GitHub Pages+Jekyll 静态网站搭建(二)
GitHub Pages+Jekyll 静态网站搭建(二
内容简介
🚩 Tech Contents
该文主要涉及Jekyll主题的下载与使用。Github+Jekyll已经过了黄金期(2015-2018年,很难接受2015年已经是十年前了),一开始找到的主题基本上都是7~10年前的项目,虽然设计非常美观,但由于这些主题依赖的Ruby gem版本早已不兼容现代环境,所以频频报错。由于我又非常菜,一方面无法解决部分版本过时问题,另一方面又无力自己独立写出一个主题,所以只能不考虑设计而选择最新的、且最好有人维护的主题。
🐜 jekyll-theme-chirpy一个直到2025年仍被维护的Jekyll宝藏主题,安装与使用过程也非常方便、顺畅!
搭建模板
📌 创建步骤
- 创建自己的仓库。作者给出了该项目的模板,直接使用该模板
use this template创建自己的仓库<username>.github.io即可- 克隆项目到本地。使用
bundle install安装Gemfile中的Ruby依赖- 浏览个人网页。使用
bundle exec jekyll serve,获取到本地服务器http://locoalhost:4000,即可在网页上浏览
🔗 模板链接cotes2020/chirpy-starter: A website startup template using the Chirpy theme gem.
网站部署
📌 部署步骤
- 配置
_config.yml文件,填写url为https://<username>.github.io的格式,注意结尾不要带 /- 如果本地计算机未运行Linux,还需要使用
$ bundle lock --add-platform x86_64-linux更新锁定文件(Gemfile.locak)的平台列表- 开启
GitHub Action。进入GitHub中该项目的仓库,从上边栏打开setting页面,从侧边栏打开Pages页面,Build and deployment的source处选择GitHub Action- 运行网页。在本地提交、推送一次,即可使用xx打开自己了的网页了!
📕 更多说明Chirpy非常详细的模板教程文档
工作流程
🎢 本地修改------本地测试------推送发布
❓ 问题提出
- 使用
GitHub Actions自动部署后,如果在本地修改文件并没有提交到GitHub,会导致本地运行bundle exec jekyll serve时看不到网页更新,不便调试网站
🔨 问题解决
本地开发使用
bundle exec jekyll serve --livereload启动本地实时预览访问
http://localhost:4000查看结果,修改内容后浏览器会自动刷新之后再使用add/commit/push等流程即可