GitHub Pages + Jekyll 博客搭建指南(静态网站)

🚀 静态网站及其生成工具指南

🌍 什么是静态网站？

静态网站（Static Website）指 所有网页内容（HTML、CSS、JavaScript、图片等）在服务器上是固定的，不需要服务器动态处理或数据库支持，用户访问时，服务器直接返回这些文件给浏览器进行展示。

📌 静态网站的优势

1. 加载速度快：服务器直接返回静态文件，无需动态渲染。
2. 安全性高：无数据库或后台逻辑，减少攻击风险。
3. 部署简便：可托管在 GitHub Pages、Vercel、Netlify 等平台。
4. 低维护成本：不需要服务器管理，适合长期运行。

⚖️ 静态网站 VS 动态网站

🚀 常见的静态网站生成器对比

🛠️ 使用 GitHub Pages + Jekyll 搭建个人博客

📌 1. 创建 GitHub 仓库

1. 访问 GitHub 并 登录。

2. 创建一个新的仓库，命名格式：

   yourusername.github.io
   

   （替换 yourusername 为你的 GitHub 用户名）

3. 选择 Public（公开），点击 Create repository 创建仓库。

📌 2. 安装 Jekyll（本地环境搭建）

Jekyll 需要 Ruby 运行环境，建议使用最新版本的 Ruby。

📌 安装 Ruby 和 Bundler

• Windows：

  1. 安装 RubyInstaller

  2. Windows + R 输入 cmd ，运行以下命令检查安装：

     ruby -v
     gem -v
     

     若看到 Ruby 和 Gem 的版本号，则说明安装成功。

     

• macOS：

  # 1. 在 Mac 上，推荐使用 Homebrew 安装 Ruby：
  brew install ruby
  
  # 2. 安装后，更新环境变量：
  echo 'export PATH="/usr/local/opt/ruby/bin:$PATH"' >> ~/.zshrc
  source ~/.zshrc
  
  # 3. 验证安装：
  ruby -v
  gem -v
  

• Linux：

  • Ubuntu/Debian 系统

    sudo apt update
    sudo apt install ruby-full build-essential zlib1g-dev
    ruby -v
    gem -v
    

  • CentOS 系统

    sudo yum install ruby
    ruby -v
    gem -v
    

• 安装 Bundler（Ruby 依赖管理器）

  # 安装命令
  gem install bundler
  
  # 安装验证
  bundler -v
  

  

  [!NOTE]

  注： gem install jekyll bundler 这条命令用于全局安装 Jekyll 和 Bundler，它不依赖于当前所在的目录。这意味着你可以在任何目录下打开 命令提示符（cmd） 后执行该命令，只需满足以下条件：

  1. Ruby 已安装：确保你已经在 Windows 系统上正确安装了 Ruby（推荐使用 RubyInstaller）

  2. PATH 环境变量已配置：安装 Ruby 后，请确认 Ruby 的 bin 目录已添加到系统的 PATH 环境变量中，这样你就可以在任意目录下使用 gem 命令。

📌 3. 创建 Jekyll 博客

在cmd终端运行：

# 1.安装 Jekyll 和必要依赖：
gem install jekyll bundler

# 2.初始化一个新的 Jekyll 项目：
jekyll new my-blog

# 3.进入博客目录并安装依赖：
cd my-blog
bundle install

# 4.启动本地服务器
bundle exec jekyll serve

# 5.打开浏览器访问 http://127.0.0.1:4000 预览博客

📌 4. 上传博客到 GitHub

1. 进入博客目录：

   cd my-blog
   

2. 初始化 Git 仓库： 在终端中，确保进入你的博客目录并执行以下命令：

   # 在当前目录下初始化一个本地 Git 仓库
   git init
   
   # 将 “当前目录及其子目录中的所有文件” 添加到 Git 的暂存区（Staging Area）
   git add .
   
   # 将暂存区中的文件提交到本地的 Git 仓库，并附加一条提交说明（commit message）
   git commit -m "Initial commit"
   

3. 关联 GitHub 远程仓库并推送：

   git remote add origin https://github.com/yourusername/yourusername.github.io.git
   git branch -M main
   

4. 将代码推送到 GitHub：

   git push -u origin main
   

📌 5. 启用 GitHub Pages

1. 进入 GitHub 仓库 Settings → Pages。

2. 在 Branch 选择 main 分支→ Folder: / (root)，点击 Save。

3. 访问：

   https://yourusername.github.io
   

   你的博客已上线！🎉

🎯 总结

• Jekyll：适合 GitHub Pages，简洁稳定。
• Hugo：最快，适合大规模博客/文档。
• Hexo：Node.js + 主题丰富，适合技术博客。
• Gatsby：React + GraphQL，适合现代网站。
• VuePress：Vue.js + 文档站点最佳。