这个项目是我用来做我个人主页的,采用 Vue3 + Vite 构建。
代码挺粗糙的,毕竟我是个产品经理。但是,能用。
做这个项目的初衷是,我想要一个简单个人官网,但遇到 2 个问题:
- 我希望更新网页里的内容是简单的,简单到可以使用 Markdown 文件来更新
- 我希望可以直接托管在 Github Pages 上,而不需要自己搭建服务器
对于第 2 个原因,很直接的思考不是服务器需要多少费用,而是,总有一天我会离开这个世界,而我相信 Github 可能会比我活的时间更长。
让自己在这个世界留下一点点痕迹,也是一件美好的事。
- 页面代码在
src
目录下,public
目录下是一些静态资源。 - 根目录下的
contents
目录是用来存放 Markdown 文件的,这些文件在编译时会被读取,然后生成对应的页面。 .github/workflows
目录下是 Github Actions 的配置文件,用来自动部署到 Github Pages。
- 克隆这个项目
- 在你的项目里创建一个新分支:
gh-pages
,然后在项目设置里配置好你的域名 - 在项目的 Actions 里配置,允许 Workflow 进行读写操作
- 修改
contents
目录下的 Markdown 文件,以及你希望修改的其它页面,推送回main
分支 - 等待 Actions 自动部署,然后访问你的域名,搞定!
当然,你也可以在本地运行这个项目,方法也非常简单:
进入开发环境:
npm install && npm run dev
写完后,构建和运行:
npm run build && npm start
程序会运行在 localhost:18772
上。
接着用 Nginx 或你喜欢的服务器程序设置一下反向代理,套个 SSL 证书,就可以直接访问了。