GitHub Pages+Jekyll 静态网站搭建（二）

GitHub Pages+Jekyll 静态网站搭建（二

内容简介

🚩 Tech Contents

• 该文主要涉及Jekyll主题的下载与使用。Github+Jekyll已经过了黄金期（2015-2018年，很难接受2015年已经是十年前了），一开始找到的主题基本上都是7~10年前的项目，虽然设计非常美观，但由于这些主题依赖的Ruby gem版本早已不兼容现代环境，所以频频报错。由于我又非常菜，一方面无法解决部分版本过时问题，另一方面又无力自己独立写出一个主题，所以只能不考虑设计而选择最新的、且最好有人维护的主题。

🐜 jekyll-theme-chirpy

• 一个直到2025年仍被维护的Jekyll宝藏主题，安装与使用过程也非常方便、顺畅！

搭建模板

📌 创建步骤

1. 创建自己的仓库。作者给出了该项目的模板，直接使用该模板use this template创建自己的仓库<username>.github.io即可
2. 克隆项目到本地。使用bundle install安装Gemfile中的Ruby依赖
3. 浏览个人网页。使用bundle exec jekyll serve，获取到本地服务器http://locoalhost:4000，即可在网页上浏览

🔗 模板链接

cotes2020/chirpy-starter: A website startup template using the Chirpy theme gem.

网站部署

📌 部署步骤

1. 配置_config.yml文件，填写url为https://<username>.github.io的格式，注意结尾不要带 /
2. 如果本地计算机未运行Linux，还需要使用$ bundle lock --add-platform x86_64-linux更新锁定文件(Gemfile.locak)的平台列表
3. 开启GitHub Action。进入GitHub中该项目的仓库，从上边栏打开setting页面，从侧边栏打开Pages页面，Build and deployment的source处选择GitHub Action
4. 运行网页。在本地提交、推送一次，即可使用xx打开自己了的网页了！

📕 更多说明

Chirpy 非常详细的模板教程文档

工作流程

🎢 本地修改——本地测试——推送发布

❓ 问题提出

• 使用GitHub Actions自动部署后，如果在本地修改文件并没有提交到GitHub，会导致本地运行bundle exec jekyll serve时看不到网页更新，不便调试网站

🔨 问题解决

1. 本地开发使用bundle exec jekyll serve --livereload启动本地实时预览

2. 访问http://localhost:4000查看结果，修改内容后浏览器会自动刷新

3. 之后再使用add/commit/push等流程即可