目录
- 🚀 静态网站及其生成工具指南
- 🌍 什么是静态网站？
- 📌 静态网站的优势
- ⚖️ 静态网站 VS 动态网站
- 🚀 常见的静态网站生成器对比
- 🛠️ 使用 GitHub Pages + Jekyll 搭建个人博客
- 📌 1. 创建 GitHub 仓库
- 📌 2. 安装 Jekyll（本地环境搭建）
- 📌 安装 Ruby 和 Bundler
- 📌 3. 创建 Jekyll 博客
- 📌 4. 上传博客到 GitHub
- 📌 5. 启用 GitHub Pages
- 🎯 总结
🚀 静态网站及其生成工具指南
🌍 什么是静态网站？
静态网站（Static Website）指 所有网页内容（HTML、CSS、JavaScript、图片等）在服务器上是固定的，不需要服务器动态处理或数据库支持，用户访问时，服务器直接返回这些文件给浏览器进行展示。
📌 静态网站的优势
- 加载速度快：服务器直接返回静态文件，无需动态渲染。
- 安全性高：无数据库或后台逻辑，减少攻击风险。
- 部署简便：可托管在 GitHub Pages、Vercel、Netlify 等平台。
- 低维护成本：不需要服务器管理，适合长期运行。
⚖️ 静态网站 VS 动态网站
| 特点 | 静态网站 | 动态网站 |
|---|---|---|
| 内容更新 | 需手动修改代码 | 由数据库或后端代码动态生成 |
| 交互能力 | 仅支持html" title=前端>前端交互 | 支持后端处理和数据库交互 |
| 访问速度 | 快（直接返回页面） | 慢（服务器计算请求） |
| 安全性 | 高（无服务器端漏洞） | 低（可能有 SQL 注入、XSS 攻击） |
| 适用场景 | 博客、文档、企业官网 | 论坛、电商、社交平台 |
🚀 常见的静态网站生成器对比
| 生成器 | 语言 | 适用场景 | 特点 |
|---|---|---|---|
| Jekyll | Ruby | 博客、GitHub Pages | GitHub Pages 官方支持，适合个人博客 |
| Hugo | Go | 文档、博客、官网 | 速度极快，单个二进制文件，无需安装依赖 |
| Hexo | Node.js | 技术博客 | 适合程序员，支持丰富插件和主题 |
| Gatsby | React | 现代网站、数据驱动 | 基于 React，支持 GraphQL，适用于动态内容 |
| VuePress | Vue.js | 文档网站 | Vue 驱动，可作为技术文档平台 |
🛠️ 使用 GitHub Pages + Jekyll 搭建个人博客
📌 1. 创建 GitHub 仓库
-
访问 GitHub 并 登录。
-
创建一个新的仓库，命名格式：
yourusername.github.io（替换
yourusername为你的 GitHub 用户名） -
选择 Public（公开），点击 Create repository 创建仓库。
📌 2. 安装 Jekyll（本地环境搭建）
Jekyll 需要 Ruby 运行环境，建议使用最新版本的 Ruby。
📌 安装 Ruby 和 Bundler
-
Windows：
-
安装 RubyInstaller
-
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） 后执行该命令，只需满足以下条件：-
Ruby 已安装：确保你已经在 Windows 系统上正确安装了 Ruby（推荐使用 RubyInstaller）
-
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
-
进入博客目录：
cd my-blog -
初始化 Git 仓库： 在终端中，确保进入你的博客目录并执行以下命令：
# 在当前目录下初始化一个本地 Git 仓库 git init # 将 “当前目录及其子目录中的所有文件” 添加到 Git 的暂存区（Staging Area） git add . # 将暂存区中的文件提交到本地的 Git 仓库，并附加一条提交说明（commit message） git commit -m "Initial commit" -
关联 GitHub 远程仓库并推送：
git remote add origin https://github.com/yourusername/yourusername.github.io.git git branch -M main -
将代码推送到 GitHub：
git push -u origin main
📌 5. 启用 GitHub Pages
-
进入 GitHub 仓库 Settings → Pages。
-
在 Branch 选择
main分支→ Folder:/ (root)，点击 Save。 -
访问：
https://yourusername.github.io你的博客已上线！🎉
🎯 总结
- Jekyll：适合 GitHub Pages，简洁稳定。
- Hugo：最快，适合大规模博客/文档。
- Hexo：Node.js + 主题丰富，适合技术博客。
- Gatsby：React + GraphQL，适合现代网站。
- VuePress：Vue.js + 文档站点最佳。
