搭建了一个博客网站，第一篇博客的内容，用来介绍如何搭建该博客网站，这是再合适不过了。
下面，将按照如下思路来介绍：
- 什么是静态网站，什么是静态 web 容器
- 什么是静态网站生成器
- 什么是 Jekyll 以及使用
- Jekyll Themes使用
- 常见插件的使用
- 自定义博客
静态网站
静态网站static website
静态网站(Static Website)是相对动态网站(Dynamic Website)而言，动态网站是前端浏览器请求的内容是由后端语言动态生成之后来响应的，那么静态网站就是网站的服务器响应内容是由固定内容的文件形成的，没有一点其他的处理逻辑，后端web容器完全根据请求地址去服务器目录上去找对应目录里的文件内容，然后响应给这个请求。
也就是说静态网站的后端服务器上针对每个请求都已经写好了静态文件内容，不依赖数据库以及后端其他语言动态生成内容来处理请求。
换言之，每个URL映射到一个固定的文件上
静态网站优点：
- 容易部署：可以部署到任何一个支持HTTP的服务器上
- 很安全：没有数据库或者动态脚本等
- 速度快：没有后端处理逻辑
静态网站缺点：
- 无法拥有用户登录、搜索、评论等后端功能
登录
虽然可能可以集成第三方登录，但是无法限制用户必须登录才能访问静态内容，所以这些登录功能毫无验证的意义
搜索
搜索功能可以使用前端来伪装，并不走后端，比如有一个文件是用来响应请求/search的，是对应的该网站上所有文件内容的 json 文件，那么就可以在前端对这个 json 进行筛选，实现搜索功能。但是这个搜索功能并不是动态的搜索服务器，而是写死的，所以这个 json 文件也需要事先生成，静态网站上的内容一改变，这个 json 文件就需要重新生成。
评论
评论功能可以使用开放的第三方文字记录平台，比如 GitHub 的 issues 板块，或者 disscusion 板块，就可以实现，每个 post 或者 page 对应 GitHub上 的一个 issue 问题，或者 disscusion 帖子，然后下面就可以对该话题进行评论。需要 GitHub 登录
静态 web 容器
首先Web容器(web container)是一种运行Web应用程序的运行时环境，web容器负责管理应用的生命周期、处理HTTP请求、路由分发、会话管理等核心功能
比如 JavaEE 中的 web 容器，负责运行 Servlet和 JSP，常用功能：解析 HTTP 请求，调用对应的 Servlet，处理过滤器 Filter、监听器 Listener，生成响应、管理会话 Session 等
当然，现在云原生环境下，使用容器化的技术，将上述这些 web 容器放入到 Docker 容器中，也就是承载 Web 服务的 Docker 容器
web容器 vs web服务器 vs 应用服务器
- Web 容器：类似Tomcat、Jetty，执行 Servlet/JSP，处理 HTTP 请求等
- Web 服务器：类似Nginx、Apache，提供静态资源服务、反向代理、负载均衡等功能
- 应用服务器：类似JBoss、GlassFish，支持 EJB、事务管理、消息队列等企业级功能
那么，静态web容器就是一个静态文件服务器，接收HTTP请求，然后查找服务器本地对应的静态文件，最后返回文件内容(HTML、JS、CSS、图片、json文件，xml文件)
一般来说，只要是支持 HTTP 请求的 web 容器，都当然是可以支持静态内容的 web 容器，比如常见的 Apache，Nginx，JBoss，Jetty，Tomcat
现在，很多高级语言或者框架，已经集成了 web 容器，比如 Python Flask，Python Django，Java SpringBoot(内嵌的 Tomcat，当然可以切换成其他容器)，Node.js
| 工具 | 启动命令 | 特点 |
|---|---|---|
| Python | python -m http.server |
快速启动一个 HTTP 静态服务 |
| Node.js (http-server) | npx http-server |
功能强，跨平台 |
| Jekyll | jekyll serve |
生成 + 预览 |
| Vite / Webpack |
vite, webpack-dev-server
|
热更新，适合前端工程化开发 |
当然还有一些常见工具也可以提供静态 web 容器，比如 VScode 的 live server，Everything 软件(win 系统)的 http 服务，所以说这个静态 web 容器需要的功能很少，非常简易
但是部署博客，我们需要的是可以免费托管静态页面的服务器厂商是否有提供这种云服务，常见有四个：
- GitHub Pages
- Vercel
- Cloudflare Pages
- Netlify
这四个都提供免费托管，免费提供二级域名，而且还允许自己绑定私有域名，最重要的是都支持免费的CI/CD部署，为什么呢？
因为我们上传到 GitHub 仓库的博客文章往往是 MD 文档，并不是给用户访问网站时看到的 HTML 文件，这是需要转换的，也就是说我们上传到远程仓库的文件(代码)是并不是真正的静态网站所需的文件，还需要经过某些工具打包生成，毕竟静态网站一般是通过静态网站生成器自动构建生成的，而不是我们真的去自己写静态网页
那么接下来就需要了解静态网站生成器
静态网站生成器
一般现代主流方式，就是使用静态网站生成器来构建静态网站，工具通过模板+Markdown 自动生成 HTML 文件
| 工具 | 语言 | 特点 |
|---|---|---|
| Jekyll | Ruby | GitHub Pages 官方支持；配置简单；适合博客；插件多 |
| Hugo | Go | 构建速度极快；易部署；支持多语言；不依赖数据库 |
| Hexo | Node.js | 中文社区庞大；适合程序员；主题丰富 |
| Eleventy | JS | 现代、灵活；兼容多种模板语言；渐进式替代 Jekyll |
| Astro | JS/TS | 支持 Markdown、React/Vue/Svelte 组件混用；支持零 JS 输出 |
| Gatsby | React | 强大 GraphQL 支持；适合博客/内容型站点；适合高级用户 |
| Next.js（静态导出） | React | 虽是 SSR 框架，但支持静态导出为博客；插件丰富 |
| Zola | Rust | 极快构建速度；单文件二进制；Markdown 支持好 |
| Pelican | Python | Python 博主首选；插件多；支持多语言 |
| VuePress | Vue | Vue 写的文档/博客生成器；官方文档好；支持插件/自定义组件 |
| Docusaurus | React | Facebook 出品；适合写文档/博客；多语言；主题漂亮 |
上面常用的就是Jekyll，Hugo，Hexo，Vuepress
如何选择呢？其实各有各的好，还有就是，如果需要定制网页，那必须要了解这个静态网站生成器的原理，还有定制原理，否则有很多功能无法实现，还浪费时间
虽然没接触过 Ruby 语言，但是由于 Jekyll 是 GitHub 官方支持的，而且 Ruby Liquid 模板语法在相关网站上能找到很好的说明文档，倒也不难上手
一开始选择了 GitHub Pages 作为部署静态博客的厂商，毕竟 GitHub 支持 GitHub Action，可以自动执行 CI/CD 等构建任务，上面这些静态网站生成器它都支持，只需要写构建脚本命令即可，其实其他厂商也是这样的，比如 Cloudflare Pages
由于 Cloudflare Pages 提供一条龙的服务，遂搬迁托管平台到 Cloudflare，GitHub 只是托管博客代码
总结
选择 GitHub + Cloudflare Pages 一起实现云存储+构建托管
其实，如果喜欢简约风格，或者喜欢自己 DIY，可以自己实现一个静态网站生成器，这是不难的，任何一个后端语言都可以干这个事情，另外一般后端语言也都会有至少一个模板引擎，所谓的生成器就是用模板来规定通用的页面样式风格，内容可以在生成的时候替换，至于页面样式也可以在模板中给 HTML 元素写好 class 或者 id，然后定制 CSS 样式，至于转换逻辑可以使用后端语言配合模板引擎来实现，解析 Markdown 文档也有十分成熟的方案供参考了
Jekyll
Jekyll 官网： Jekyll
Jekyll GitHub： Jekyll GitHub
Jekyll 是一个开源的 静态网站生成器，它将 Markdown 文件、HTML 模板以及配置文件组合成一个可以直接部署的静态网站（无需数据库或服务器端脚本。ps: 这里说的是使用 Jekyll 就可以直接生成静态网站的所有资源，但是实际部署构建的时候，我们是直接将这个 Jekyll 项目上传到 GitHub 仓库，因为现在主流的托管平台都支持后端脚本来自动构建生成静态资源，然后托管生成的静态资源）。
Jekyll Demo 示例( Ubuntu 系统)：
- 首先要安装 Ruby 环境，然后安装 Gem，然后使用 Gem 来安装 Jekyll 和 Bunlder
# 安装必要依赖
sudo apt install build-essential
sudo apt-get install ruby-full
sudo apt-get install rubygems
# 配置用户级 Gem 安装目录
mkdir -p ~/.gems
# 然后修改环境配置变量到 ~/.bashrc
cat >> ~/.bashrc << EOF
export GEM_HOME="$HOME/.gems"
export PATH="$HOME/.gems/bin:$PATH"
EOF
# 让环境变量生效，或者关闭终端重新打开
source ~/.bashrc
测试是否配置生效，请执行命令gem env，如果看到有- INSTALLATION DIRECTORY: /home/yourname/.gems而不是/var/lib/gems/...则说明成功了
然后使用 Gem 安装必要的组件 Jekyll 和 Bundler
# 不需要使用 sudo 权限
gem install bundler
gem install jekyll