使用VUE3创建个人静态主页

爬楼的猪
464 阅读2分钟

🌟 前言

作为开发者或者内容创作者，我们经常需要创建静态网页，用来展示个人博客、作品集，甚至是小型的文档网站。🎨

  • 传统工具如 Jekyll、Hexo、Hugo 等很强大：但是这些框架专注于静态站点生成，功能完善，但大多基于特定的模板语言或非前端框架，这对于大家有一些前端的基础，发现还是需要时间去了解这些工具。

  • VUE3上手快入门简单 所以用VUE3来做这个静态的网站管理 应该会很方便，主要是减少要学习技术栈 😂

😎体验

👉 项目源码: VUE3 Static Blog WebSite

👉 预览它造出来的 Git Page: pldz1.github.io

🎉 欢迎一起交流！💬 (⭐️ start 和 🍴 fork，感谢大家的支持！🙏)

  • 主页预览

在这里插入图片描述

  • 博客页预览

deploy_demo1.gif

🔨 具体实现

这个项目我在做的时候用的是 node-v16 因为里面有用到 crypto 这个库，对大于17 版本的node有加密的不一样的哈希报错

✨ 核心功能

  1. Markdown 支持 📝
    通过 markdown-it 这个 Markdown 渲染库将这些内容转成 HTML 并在页面中展示

  2. 静态内容管理 博客文章内容和元数据（比如标题、作者、日期等）都被保存在 JSON 文件 页面加载时，项目会通过 axios 请求 直接拉取这些静态文件内容，但是条件是 你先执行了 npm run update的操作，这个操作也被写在了 npm run serve脚本里，目的是为了模仿VUE3的服务流程 把public当成服务器的开放资源位置，同时对博客内容加密（如果你在.env设置了要加密)

🏗️ 项目结构

  • src/：主要代码的核心目录。
    • components/：复用组件（比如文章列表、导航等）。
    • views/：各页面视图组件，比如首页、文章详情页。
    • router/：定义路由规则的地方。
    • styles/：存放 SCSS 样式文件。
    • assets/：静态资源（图片、图标等）。
  • public/：用于存博客资源。

🚀 用这个项目部署 Git Page

具体的操作 可以等待作者后续更新 参考例子: pldz1.github.io

  1. 创建一个 Git Page 的代码仓库: creating-a-github-pages-site

  2. 利用本项目打包出你自己的静态网页: npm run build 得到 dist 文件夹

  3. 将 dist 文件夹的内容 全部拷贝到你的 Git Page 仓库, 注意检查是不是有 .nojekyll 文件, 这个文件必须存在, 表示我们 发布静态网页的工作流

  4. 推送到你的远程 Git Page 仓库

  5. 配置你的 Git Page 仓库的 settings, 其实就是直接打开 Git Page 这个选项, configuring-a-publishing-source-for-your-github-pages-site

  6. 等待 流程跑完 几分钟后 查看你的 https:/xxxx.github.io 😎

📖 参考

avatar
文章
阅读
粉丝