本系列包括三部分:
- 搭建本地服务
- 发布到Github Pages
- 配置Github Action实现CI/CD
本篇为第二部分——将搭建好的本地博客托管到github。
本方案以第一篇Hugo搭建的博客为例,但不限于Hugo,所有的静态网站都可以采用此方案。
需要准备的
- github账户
- 发布好的本地静态网页文件,根据上一篇 的结果,执行
hugo
命令后,会在public/目录下生成整套静态网站。
流程
根据官网,主要步骤大致如下:
- 创建一个GithubPages仓库
- 将仓库拉到本地
- 添加静态网页文件添加到本地仓库
- 提交到github仓库
动手干
第一步,创建GithubPages仓库
新建一个public仓库,并命名为username.github.io
,其中username
指github账户名。
GitHub Pages 项目需要符合 username.github.io
的特殊命名格式,如果仓库名和账户名没有完全匹配的话,网站就不能运行,所以一定要保证完全匹配。
第二步,将仓库拉到本地
在你希望的目录位置,用下面的命令将新建的远程仓库拉到本地。
git clone https://github.com/username/username.github.io
建议用github官方提供的客户端来操作,主要是省去了维护登录账号的工作。
第三步,添加静态网页文件添加到本地仓库
将hugo生成的public/目录下所有文件,复制到本地仓库,
cp -rf hugo项目/public/* xxx.github.io/
git add --all
git commit -m "Initial commit"
再次建议git操作使用github客户端完成。
提交到github仓库
git push -u origin main
待提交完成后,打开浏览器,访问https://username.github.io,就能看到和本地hugo网页一样的效果了。
结论
基于这种方式的托管,可以在本地将写好的md文章发布到public/目录下,再推到远程仓库,实现比较简单的网页更新。
参考文章
- 《用 GitHub Pages 建个人网站的小白级教程》,https://zhuanlan.zhihu.com/p/58254227
- 《GitHub Pages | Websites for you and your projects》,https://pages.github.com/
- 《使用 Hugo 搭建个人网站(博客、个人主页)并发布到 Github 上》,https://zhuanlan.zhihu.com/p/417259374
image.png
本作品由 IvyWooo 采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可,转载请注明出处。
本文链接
网友评论