搭建个人博客网站：从零开始的 GitHub Pages + Jekyll 之旅

在这个信息爆炸的时代，拥有一个属于自己的博客不仅能够记录知识、分享经验，更是一种个人品牌的打造。本文将带你从零开始，详细讲解如何使用 GitHub Pages 和 Jekyll 搭建一个专业的个人博客网站。

---

一、前期准备：认识你的工具箱

核心技术栈介绍

技术	说明	用途
GitHub Pages	静态网站托管服务	免费托管、自动部署
Jekyll	静态网站生成器	将 Markdown 转换为网站
Ruby	编程语言	Jekyll 的运行环境
Git	版本控制系统	代码管理与部署

---

二、环境配置：打造完美开发环境

Windows 系统配置

1. Git 安装

   winget install Git.Git
   

2. Ruby 环境

   winget install RubyInstallerTeam.RubyWithDevKit
   refreshenv
   ruby -v
   

3. 开发工具

   gem install bundler jekyll
   

macOS 系统配置

1. Homebrew 安装

   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
   

2. 安装 Git 和 Ruby

   brew install git
   brew install ruby
   

3. 配置 Ruby 环境

   # 添加国内镜像源
   gem sources --add https://mirrors.tuna.tsinghua.edu.cn/rubygems/ --remove https://rubygems.org/
      
   # 安装 bundler
   gem install bundler
      
   # 配置 bundler 镜像
   bundle config mirror.https://rubygems.org https://mirrors.tuna.tsinghua.edu.cn/rubygems
   

Linux 系统配置

1. 安装 Git 和 Ruby

   sudo apt-get update
   sudo apt-get install git ruby-full
   

2. 配置 Ruby 环境

   # 添加国内镜像源
   gem sources --add https://mirrors.tuna.tsinghua.edu.cn/rubygems/ --remove https://rubygems.org/
      
   # 安装 bundler
   gem install bundler
      
   # 配置 bundler 镜像
   bundle config mirror.https://rubygems.org https://mirrors.tuna.tsinghua.edu.cn/rubygems
   

---

三、创建 GitHub Pages 仓库：你的博客基石

1. 登录你的 GitHub 账号，创建一个新仓库，命名为 username.github.io（将 username 替换为你的 GitHub 用户名）。
2. 初始化仓库时，可以选择包含一个 README 文件，但不需要勾选其他选项。
3. 在本地克隆这个仓库到你的电脑上：

   git clone https://github.com/username/username.github.io.git
   cd username.github.io
   

---

四、Jekyll 主题安装：打造专业博客外观

主题安装步骤

1. 下载并安装主题

   git clone https://github.com/cotes2020/chirpy-starter.git my-blog
   cd my-blog
   bundle install
   

2. 个性化配置

   # _config.yml 核心配置
   title: "我的博客"                    # 网站标题
   tagline: "分享技术与生活"            # 网站描述
   url: "https://username.github.io"    # 网站地址
      
   # 作者信息
   author:
     name: YOUR_NAME                    # 你的名字
     avatar: /assets/img/avatar.jpg     # 头像图片
     bio: "热爱技术，乐于分享"         # 个人简介
   

3. 自定义样式

   /* _sass/custom.scss */
   $brand-color: #4CAF50;           // 主题色
   $heading-color: #2196F3;         // 标题色
   $text-color: #333;               // 文字颜色
      
   // 自定义卡片样式
   .card {
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
     transition: transform 0.3s ease;
        
     &:hover {
       transform: translateY(-5px);
     }
   }
   

图片优化方案

为了提高网站加载速度，建议对图片进行以下优化：

1. 使用 WebP 格式

   # 安装 WebP 工具
   npm install -g webp-converter
      
   # 批量转换图片
   for img in assets/img/**/*.{jpg,png}; do
     cwebp -q 80 "$img" -o "${img%.*}.webp"
   done
   

2. 添加图片懒加载

   <!-- 在 _includes/head.html 中添加 -->
   <script>
   document.addEventListener("DOMContentLoaded", function() {
     var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
     if ("IntersectionObserver" in window) {
       let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
         entries.forEach(function(entry) {
           if (entry.isIntersecting) {
             let lazyImage = entry.target;
             lazyImage.src = lazyImage.dataset.src;
             lazyImage.classList.remove("lazy");
             lazyImageObserver.unobserve(lazyImage);
           }
         });
       });
       lazyImages.forEach(function(lazyImage) {
         lazyImageObserver.observe(lazyImage);
       });
     }
   });
   </script>
   

3. 优化图片显示

   /* _sass/custom.scss */
   .post-content {
     img {
       max-width: 100%;
       height: auto;
       display: block;
       margin: 1rem auto;
       border-radius: 8px;
       box-shadow: 0 2px 4px rgba(0,0,0,0.1);
       transition: transform 0.3s ease;
          
       &:hover {
         transform: scale(1.02);
       }
     }
   }
   

---

五、本地运行测试：预览你的博客

在将博客部署到 GitHub Pages 之前，你可以先在本地运行预览效果。

1. 在博客目录下运行以下命令：

   bundle exec jekyll serve
   

2. 打开浏览器，访问 http://localhost:4000，你将看到你的博客预览。

---

六、写作与发布：分享你的故事

Markdown 写作进阶技巧

图片优化

# 1. 响应式图片
![图片描述](/path/to/image){: width="800" height="400" .w-75 .shadow }

# 2. 带标题的图片
![图片描述](/path/to/image)
_这是图片标题_{: .text-center }

# 3. 左右布局
![左图](/path/to/left.jpg){: .left }
![右图](/path/to/right.jpg){: .right }

代码块增强

# 1. 带文件名的代码块
```yaml
name: workflow

带高亮的代码块

public class Demo {
    public static void main(String[] args) {
        // 高亮第1行和4-6行
       System.out.println("Hello");
        System.out.println("World");
        System.out.println("!");
    }
}

---

七、个性化定制：打造独一无二的博客

为了让你的博客更具个性，你可以进行一些定制化操作。

修改主题样式

你可以通过修改 assets/css/jekyll-theme-chirpy.scss 文件来调整博客的样式，例如修改颜色、字体等。以下是一个示例：

/* 自定义颜色变量 */
:root {
  --main-color: #4CAF50; /* 主题色 */
  --heading-color: #2196F3; /* 标题颜色 */
  --link-color: #00BCD4; /* 链接颜色 */
}

/* 自定义标题样式 */
h1, h2, h3 {
  color: var(--heading-color);
  border-bottom: 2px solid var(--main-color);
  padding-bottom: 0.3em;
}

/* 自定义链接样式 */
a {
  color: var(--link-color);
  transition: color 0.3s ease;
  
  &:hover {
    color: darken(var(--link-color), 10%);
    text-decoration: none;
  }
}

添加友链

在 _data/friends.yml 文件中添加友链信息，然后在 _includes/friends.html 文件中定义友链的显示样式。例如：

# _data/friends.yml
- title: "朋友的博客"
  href: "https://friend.github.io"

<!-- _includes/friends.html -->
<div class="friends">
  <h3>友情链接</h3>
  <ul>
    {% for friend in site.data.friends %}
      <li><a href="{{ friend.href }}">{{ friend.title }}</a></li>
    {% endfor %}
  </ul>
</div>

增加评论区

使用 Giscus 为你的博客添加评论区。在 _config.yml 文件中填上你的 Giscus 配置信息即可。

站点统计

通过在 _includes/footer.html 文件中插入 不蒜子 代码，可以在页脚显示站点统计信息。例如：

<!-- _includes/footer.html -->
<p>本站访客数：<span id="busuanzi_value_site_uv"></span> | 本站总访问量：<span id="busuanzi_value_site_pv"></span></p>
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

---

八、部署到 GitHub Pages：让世界看到你的博客

1. 确保你的代码已经推送到 GitHub 仓库。
2. 在 GitHub 仓库的 Settings > Pages 中，选择 Source 为 main 分支。
3. 等待片刻，你的博客将自动部署完成。访问 https://username.github.io，就可以看到你的博客啦！

---

九、维护与优化：持续打磨你的博客

更新依赖

定期运行以下命令来更新你的博客依赖：

bundle update

性能优化

• 使用 WebP 格式图片：减少图片体积，提升加载速度。
• 压缩 HTML/CSS/JS 文件：使用 Jekyll Compress HTML 插件来压缩生成的 HTML 文件。

备份数据

定期备份你的博客代码和数据，以防万一。你可以使用 GitHub 的仓库导出功能，或者将代码克隆到本地进行备份。

---

十、常见问题解决方案

Ruby 版本问题

如果你遇到 Ruby 版本不兼容的问题，可以使用 rbenv 或 rvm 来管理多个 Ruby 版本。例如：

# 安装 Ruby 版本管理工具
gem install rbenv

# 安装特定版本的 Ruby
rbenv install 3.0.0
rbenv global 3.0.0

# 更新 gem
gem update --system

Jekyll 构建错误

如果 Jekyll 构建时出现错误，可以尝试以下方法：

# 清理缓存
bundle exec jekyll clean

# 更新依赖
bundle update

# 检查配置文件语法
jekyll doctor

---

十一、高级定制技巧

主题美化

你可以通过修改 _sass/custom-style.scss 文件来自定义博客的样式。例如：

/* 自定义文章内容样式 */
.post-content {
  h2 {
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 0.3em;
    margin-top: 2em;
  }
  
  img {
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
}

图片优化方案

• 使用 WebP 格式：WebP 格式图片体积小，加载速度快。你可以使用以下命令批量转换图片格式：

  # 安装 WebP 工具
  npm install -g webp-converter
  
  # 批量转换图片
  find . -type f \( -name "*.jpg" -o -name "*.png" \) -exec sh -c '
    webp_path="${1%.*}.webp"
    cwebp -q 80 "$1" -o "$webp_path"
  ' sh {} \;
  

• 使用懒加载：为图片添加懒加载功能，可以减少页面加载时的资源消耗。例如：

  ![图片](image.webp){: loading="lazy" }
  

资源优化

在 _config.yml 文件中启用 HTML 压缩插件：

compress_html:
  clippings: all
  comments: all
  endings: all
  profile: false
  blanklines: false
  ignore:
    envs: []

缓存优化

如果你使用的是 Nginx 服务器，可以在配置文件中添加以下缓存策略：

location ~* \.(css|js|jpg|jpeg|png|gif|ico|webp)$ {
    expires 30d;
    add_header Cache-Control "public, no-transform";
}

---

十二、维护与更新

定期维护清单

• 更新 Jekyll 和主题版本
• 检查并修复断开的链接
• 优化图片资源
• 备份重要数据
• 检查网站性能
• 更新文章内容
• 维护友情链接

---

十三、主题模式背景切换优化（2025.3.21新增内容）

在打造个性化博客的过程中，为了让网站在不同主题模式下呈现最佳效果，我们可以为明暗模式分别设置不同的侧边栏背景图片。这不仅能提升用户体验，还能让你的博客在视觉上更加出彩。

1. 准备工作

首先，准备两张适合作为侧边栏背景的图片：

• background-light.jpg：明亮模式下使用的背景图
• background-dark.jpg：暗黑模式下使用的背景图

将这两张图片放置在 assets/img/ 目录下。

2. 优化样式代码

在 assets/css/jekyll-theme-chirpy.scss 文件中添加以下代码：

/* 侧边栏背景设置 */
#sidebar {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  transition: background-image 0.3s ease;  /* 添加平滑过渡效果 */
}

/* 暗色模式背景图（包括默认状态） */
html:not([data-mode]) #sidebar,
html[data-mode="dark"] #sidebar {
  background-image: url('/assets/img/background-dark.jpg');
}

/* 亮色模式背景图 */
html[data-mode="light"] #sidebar {
  background-image: url('/assets/img/background-light.jpg');
}

3. 实现效果说明

这段代码实现了以下功能：

1. 智能主题识别：
   • 通过 html[data-mode] 属性识别当前主题模式
   • 默认状态和暗色模式使用深色背景
   • 明亮模式自动切换为浅色背景
2. 平滑过渡：
   • 添加了 0.3s 的过渡动画
   • 确保主题切换时背景变化自然流畅
   • 提升了用户体验
3. 背景图优化：
   • 使用 cover 属性确保背景图完整覆盖
   • 设置 top 定位保证视觉重点区域显示
   • 适配不同尺寸屏幕

4. 注意事项

• 选择的背景图片应当考虑：
  • 文件大小：建议进行适当压缩
  • 清晰度：确保图片质量
  • 对比度：注意与文字的可读性
  • 主题协调：与整体设计风格搭配
• 建议图片尺寸：
  • 宽度：至少 300px
  • 高度：根据侧边栏高度调整
  • 格式：推荐使用 jpg 或 webp
  • 文件大小：建议小于 200KB

通过这样的优化，你的博客将在不同主题模式下呈现出最佳的视觉效果，为访客带来更好的浏览体验。

---

十四、分页器样式优化（2025.3.21新增内容）

在博客系统中，分页器是一个重要的导航元素。一个好的分页器设计不仅要功能完善，还要具有良好的视觉效果和交互体验。下面我们来看看如何优化分页器的样式。

1. 基础样式设置

分页器采用弹性布局，确保按钮均匀分布：

.pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 1rem 0;
}

2. 日间/夜间模式适配

为了适应不同的浏览模式，我们为分页器设计了两套配色方案：

• 日间模式：
  • 使用淡灰色底色 (#f0f0f0)
  • 黑色文字 (#333)
  • 细边框设计
  • 鼠标悬停时轻微上浮
• 夜间模式：
  • 深色背景 (#343a40)
  • 浅色文字 (#dee2e6)
  • 突出的边框
  • 保持与整体风格统一

3. 动态效果设计

分页器包含多种动态效果，提升交互体验：

1. 彩带动画：
   • 日间模式特有的红、黄、绿三色彩带
   • 斜向划过按钮表面
   • 通过延时配置实现交错动画
2. 悬停效果：
   • 按钮轻微上浮
   • 添加阴影效果
   • 平滑的过渡动画
3. 当前页样式：
   • 采用凹陷效果设计
   • 内阴影营造按压感
   • 字体加粗突出显示

4. 具体实现要点

1. 基础按钮样式：

   .page-link {
     padding: 0.5rem 1rem;
     border-radius: 8px;
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
   }
   

2. 彩带动画效果：

   &::before {
     content: '';
     position: absolute;
     top: -50%;
     left: -100%;
     height: 40%;
     width: 60%;
     transform: rotate(25deg);
     background: linear-gradient(90deg, transparent, rgba(255, 0, 0, 0.2), transparent);
     animation: lightModeRibbon 2s infinite;
   }
   

3. 当前页突出显示：

   &.active .page-link {
     transform: translateY(1px);
     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
     font-weight: bold;
   }
   

5. 注意事项

• 确保动画效果不会影响页面性能
• 保持良好的颜色对比度，提高可读性
• 适配不同设备尺寸
• 添加适当的触觉反馈
• 保持与整体设计风格的统一

通过以上优化，我们的分页器不仅功能完善，还具有出色的视觉效果和交互体验，为博客增添了一份精致的细节。

---

希望这篇教程能帮助你成功搭建起属于自己的博客。如果你在搭建过程中遇到任何问题，欢迎随时在评论区留言，我会尽力为你解答。

最后，愿你的博客成为你与世界对话的桥梁，记录你的成长，分享你的智慧。