GitHub Pages+Jekyll 静态网站搭建(二)

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文件,填写urlhttps://<username>.github.io的格式,注意结尾不要带 /
  2. 如果本地计算机未运行Linux,还需要使用$ bundle lock --add-platform x86_64-linux更新锁定文件(Gemfile.locak)的平台列表
  3. 开启GitHub Action。进入GitHub中该项目的仓库,从上边栏打开setting页面,从侧边栏打开Pages页面,Build and deploymentsource处选择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等流程即可

相关推荐
直接冲冲冲1 小时前
研0-准备claude
git·github
Yunzenn5 小时前
深度分析字节最新研究cola-DLM 第 07 章:推理流水线逐行拆解 —— 从 prompt 到生成文本
人工智能·驱动开发·深度学习·chatgpt·架构·prompt·github
努力努力再努力wz6 小时前
【Qt入门系列】:按钮组件全解析:从 QAbstractButton 到快捷键事件、单选与复选机制
c语言·开发语言·数据结构·c++·git·qt·github
JoyCong19988 小时前
远控届的隐形冠军ToDesk,告别延迟与卡顿,“无感”重塑远程体验
科技·github·电脑·远程工作·远程操作
峰向AI10 小时前
star 狂飙,把 Deepseek 用到极致的省钱神器
github
随风丶飘12 小时前
AI Code Review 实测:GitHub Copilot PR Review 与 CodeRabbit,能否替代人工 Review?
人工智能·github·代码复审
蒜香味可乐13 小时前
GitHub 一周热点 :桌面 AI 助理、编程 Agent 知识图谱、隐身 Chromium、软件 CLI 化、实时 3D 重建
人工智能·github
带娃的IT创业者14 小时前
本地化AI的觉醒:从GitHub热门项目看端侧大模型的未来
人工智能·后端·大模型·github·端侧大模型·本地化ai
落羽的落羽14 小时前
【项目】C++实现JsonRpc框架——功能分析与模块划分
linux·服务器·开发语言·c++·人工智能·计算机网络·github
青瓦梦滋14 小时前
Obsidian笔记PC/Android同步方案--Gitee/GitHub
笔记·gitee·github·obsidian