欢迎来到 Kaermaxc 博客
从零开始搭建 GitHub Pages 博客的完整流程,以及我为本站打造的 Aurora 夜空主题设计思路。
开篇的一篇文章,想和你分享我如何把这个空间从一个空仓库慢慢搭建成现在的模样,也希望能给正在尝试搭建 GitHub Pages 博客的你一些参考。你会看到从准备环境、挑选主题到上线发布的全流程,还能了解本站 Aurora
主题的设计重点。
环境准备
-
安装 Ruby 与 Bundler:GitHub Pages 基于 Jekyll 构建,需要 Ruby 环境。macOS 上可以通过 Homebrew 安装,Windows 推荐使用 RubyInstaller。
# macOS 示例 brew install ruby gem install bundler
-
安装 Git 与创建 GitHub 账号:Git 用来管理版本,GitHub 则负责托管站点。安装好 Git 后,记得配置用户名与邮箱:
git config --global user.name "your-name" git config --global user.email "you@example.com"
创建 GitHub Pages 仓库
- 在 GitHub 上创建一个名为
<你的用户名>.github.io
的公开仓库。 -
克隆仓库到本地,初始化 Jekyll 项目骨架:
git clone https://github.com/<你的用户名>/<你的用户名>.github.io.git cd <你的用户名>.github.io bundle init bundle add jekyll --version "~> 4.3" bundle exec jekyll new --force --skip-bundle .
- 删除示例文章,并根据需要调整
_config.yml
中的title
、description
与author
信息。
安装与自定义主题
GitHub 官方资源页上收录了大量社区主题。我在调研后决定基于 minima
主题扩展,结合自己想要的极光色调与玻璃拟态风格,打造了 Aurora
视觉体系:
- 色彩设计:采用深夜蓝作为背景,搭配蓝绿与琥珀色的高光,营造宁静却富有科技感的氛围。
- 布局框架:首页使用“两栏布局 + 亮点卡片”呈现最新文章与标签;文章页引入阅读时长、信息卡片与侧边导航,提升可读性。
- 数学公式支持:启用 MathJax 方便书写技术公式,在需要的文章中即可直接使用 LaTeX 语法。
安装依赖后,运行一次本地构建验证主题是否正常:
bundle install
bundle exec jekyll serve
访问 http://127.0.0.1:4000
就能看到你的新主题。如果想进一步美化,可以像我一样在 assets/css/styles.css
中集中维护样式,统一管理色板、排版与组件。
撰写第一篇文章
Jekyll 的文章保存在 _posts
目录下,文件命名遵循 YYYY-MM-DD-title.md
。以下是一个标准模板:
---
title: 我的第一篇文章
date: 2024-01-01 10:00:00 +0800
tags: [Life, Note]
excerpt: "简单说明文章的亮点。"
---
这里是正文,可以使用 Markdown 语法书写,支持代码块、引用、表格乃至数学公式。
为了自动生成目录,可以在正文开头加入:
* TOC
{:toc}
推送并发布
-
将所有变更提交到 Git:
git add . git commit -m "Initialize blog" git push origin main
-
打开 GitHub 仓库的 Settings → Pages,确认部署分支选择了
main
。GitHub 会自动触发构建,大约几分钟后,你的博客就可以通过https://<你的用户名>.github.io
访问了。
后续维护建议
- 内容管理:习惯在写作前创建分支,完成后再合并到主分支,方便回滚与协作。
- 主题升级:定期关注 Jekyll 官方资源 获取新主题或插件灵感,为站点注入新鲜感。
- 性能优化:控制图片大小、善用懒加载,并在
_config.yml
中合理配置分页与 Feed 插件。
希望这份记录能帮你少踩弯路,愿我们都能在自己的博客里记录下每一段值得回味的旅程。