简易官网 EasyHomePage
这个项目是我用来制作个人主页的,采用 Vue3 + Vite 构建。
代码比较粗糙,毕竟我是个产品经理。但是,能用就行。
创建这个项目的初衷是,我想要一个简单的个人官网,但遇到了两个问题:
- 我希望更新网页内容能够简单化,简单到可以使用 Markdown 文件来更新
- 我希望可以直接托管在 Github Pages 上,而不需要自己搭建服务器
关于第二个原因,我考虑的不是服务器需要多少费用,而是,总有一天我会离开这个世界,但我相信 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 证书,就可以直接访问了。