前言

在这篇文章中，我们将学习如何利用 Netlify + Github + Jekyll，快速零成本搭建个人博客。

每个技术人都应该有自己的博客。正如 Github Profile 一样，博客也是一张对外展示的名片。Github 展示了你的开源项目和编码水平，博客则展示了你的思考与技术沉淀。

为什么我不建议选择 CSDN、博客园、竹白等平台，或者语雀、飞书文档等个人知识库呢？一方面，每个平台有不同的调性。读者对你的印象，会受到这个平台其他作者的平均值的影响。有的平台虽然 SEO 做得很好、总是出现在搜索引擎的首位，但内容质量属实不敢恭维。出现在这样的平台上，很难保证读者不会给你的文章预设一个较低的分数。另一方面，这些平台不支持自定义主题，大家都使用统一的样式和排版风格，互相之间基本没有区分度，个人符号很难在其中得到展示。最后，有些平台是封闭的，无法被搜索引擎索引到。

所以，我建议申请一个独特的域名，搭建一个专属于你的个人博客。在这里，我们拥有完整的自主权，可以修改主题样式、监控网站数据、分享只属于你的内容、结交志同道合的朋友。

当然，自建博客也有缺点，比如 SEO 差、访客数量少、缺少交互性等。但对我来说，写博客不是为了获得知名度和商业收入，而是想纯粹地记录和分享。我在搜集资料、解决问题的过程中耗费了不少时间，写一篇博客不仅可以帮助自己理清思路，还可以让知识复用。提高文章的信息量、让博客的内容有长期价值、让每位读者都有收获，这便是写作的意义。

总之，博客是一个值得精心打磨的作品。如果一份简历上附有独立博客的链接，我一定会想点进去看一看。如果你也有这样的想法、希望输出有价值的内容、享受书写的乐趣，那就参考下面的步骤，用 10 分钟的时间搭建一个博客吧。

Quick Start

这一节我们将直接用 Netlify + Github + Jekyll 零成本搭建个人博客。简单介绍一下原理：

  • Jekyll 是一个静态博客生成器，它可以把 markdown 格式的文本内容转成静态的 HTML 页面。可以修改 CSS 来配置博客的样式和风格，网上有很多现成的主题可以使用。
  • 每个 Jekyll 项目是一个文件夹，包含了这个博客的所有内容，如 markdown 文章、图片、CSS 文件、字体资源等。
  • Jekyll 构建的产物是纯 HTML 页面。我们把它拖到任何一个静态站点托管服务上，便可以在浏览器中访问。
  • Github 提供了 Github Pages。这是一个免费的静态站点托管服务，我们可以直接在某个 Github 仓库里托管 HTML 页面，然后通过 <username>.github.io 去访问。
  • Jekyll 内置了对 Github Pages 的支持。我们只需要把 Jellky 项目上传到 Github 仓库，再把该仓库设置为 Github Pages，就可以在每次仓库提交后，自动构建和发布。
  • Netlify 是一个类似于 Github Pages 的静态站点托管服务，界面操作体验更好，构建和访问速度更快。绑定一个 Github 仓库之后，Netlify 会监听该仓库的提交、自动完成构建和发布。普通用户每个月有一定的免费流量额度，作为个人博客来说完全够用了。我们可以通过 Netlify 提供的 唯一id.netlify.app 链接来访问网站，但既然是个人博客，最好还是绑定到一个自己的域名上。

一、安装 Jekyll 环境

参考 Jekyll 的官方文档。

先安装基本环境 Ruby 和 Ruby Gems，详见 https://jekyllrb.com/docs/installation/。

然后安装 jekyll 和 bundler：

gem install jekyll bundler

之后创建第一个 Jekyll 项目。你可以从零创建一个默认项目：

jekyll new myblog

也可以直接复用 Github 上公开的主题，比如 jasper：

git clone https://github.com/jekyllt/jasper

最后构建网站，这会在 _site 目录下生成 HTML 页面，同时以 HTTP 方式提供服务：

# cd jasper
# bundle add webrick
# bundle install
bundle exec jekyll serve --livereload

访问 http://localhost:4000，便可以看到我们的博客首页：

image-20230312151902964

💡 给 serve 命令添加 –livereload 选项，可以在源文件有任何改变时自动刷新页面。

💡 亲测 MacOS 安装 Jekyll 环境比较麻烦，可以考虑使用现成的 docker 镜像，参考这篇文章。

二、创建 Github 仓库

这里我们需要把上一步创建的 Jekyll 项目上传到 Github 仓库。比较基础，就不再赘述了。

三、配置 Github Pages (可选)

💡 这一节只是为了演示 Github Pages 的功能，不建议使用它部署个人博客，推荐使用 Netlify + 自定义域名。

Github Pages 的官方文档有详细教程，下面是摘要：

  1. 创建一个名为 <username>.github.io 的代码仓库：

    创建存储库字段

  2. 上传 Jekyll 项目到该仓库：

    # cd jasper
# git remote add origin git@github.com:imageslr/imageslr.github.io.git
git push

  3. 进入 Github 仓库 → Settings → Pages，配置 Jekyll Actions，如下图 ①~④：

    image-20230312154812471

    如果有独立域名，也可以在上图 ⑤ 配置。

  4. 等待几分钟，就可以通过 https://username.github.io 访问博客了。

    如果你使用的是 jasper 主题，需要按照下图修改 _config.yml，才能正常加载到 CSS 资源：

    image-20230312160345749

四、配置 Netlify 项目

  1. 访问 https://app.netlify.com，直接使用 Github 账号登录。

  2. 选择从 Github 导入项目 → 授予 Netlify 权限 → 安装 Netlify 应用 → 导入博客项目：

    image-20230312161113686

    image-20230312161205048

  3. 等待项目首次构建完成：

    image-20230312161406530

  4. 然后便可以使用 Netlify 提供的 唯一id.netlify.app 链接来访问博客了。


Netlify 部分功能说明：

  • 部署状态：

    image-20230312161849257

  • 域名管理：Site settings → Domain management

    image-20230312164404305

五、申请独立域名

为什么要申请独立域名？一方面，域名是我们在互联网上的符号。相比于 Github Pages 的 github.io 和 Netlify 的 netlify.app，个性化的域名有更强的个人色彩，便于读者记忆和分享。另一方面，域名是一个方便的网站定位器。当我们想要从 Netlify 迁移到其他平台时，只需要修改域名的指向记录，而不需要读者重新保存一个新的链接。

申请域名非常简单，只需要选择一个域名服务商、搜索喜欢的域名是否已经被注册、付费。国内的域名服务商有阿里云、腾讯云等，国外的有 GoDaddy 等。域名付费一般以年为单位，首年费用较低，但后续续费价格可能增加。国内注册域名需要备案。

注册域名后，可以参考上面的步骤，将域名指向 Netlify 的博客项目。

深入讨论

博客框架

静态博客 vs 动态博客

静态博客生成器 (Static Site Generator) 不依赖数据库，所有博客内容都以文件的形式存储。静态博客生成器的作用是把 Markdown 格式的文本内容转成静态的 HTML 页面，需要我们自行部署。优点是轻量、易用、访问速度快、可以在本地缓存页面后离线查看。缺点是发布内容慢，需要更新本地文件 → 上传 → 部署，以及插件数量少，需要自行编码集成。

动态博客依赖数据库，博客内容是数据库里的一个条目。优点是使用简单，能在线编写文章，有丰富的插件，自带管理后台。缺点是需要运行在服务器上，部署和维护较为繁琐。一个知名的动态博客框架是 WordPress。

💡 我个人推荐使用静态博客框架，原因是上手简单、成本低、好维护、文章能够本地存档。

静态博客框架对比

以下对比了几个知名的静态博客生成器。

Jekyll：https://jekyllrb.com

  • Ruby 实现的老牌博客框架。
  • 优点：网上有丰富的教程和主题；原生支持 Github Pages；支持 Sass；支持 Liquid 语法，某些语法糖很好用。
  • 缺点：装环境比较麻烦；构建速度相比于其他框架较慢；近期迭代较少。

Hexo：https://hexo.io/zh-cn

  • Node 实现的博客框架。
  • 优点：主题众多；安装简单；构建速度快；支持 Github Pages；HTML + CSS + JS 友好；插件众多；良好的中文文档和社区支持；快速迭代。

Hugo：https://gohugo.io

  • Golang 实现的博客框架。
  • 优点：轻便，构建速度快；无需安装环境，整个工具是一个二进制文件。
  • 缺点：主题使用 Go 模板开发，需要熟悉 Go。

VuePress：https://vuepress.vuejs.org/zh/

  • Vue 驱动的静态网站生成器。非常适合用于 Wiki、API 文档等网站类型。
  • 优点：安装简单；构建速度快；可以使用 Vue 实现自定义组件，网站的动态性更强。
  • 缺点：主题较少。

💡 我最终选择了 Jekyll，只是因为喜欢它的主题。从易用性来说，我更推荐 Hexo。

使用 Markdown 编写

Markdown 是一种用来写作的轻量级标记式语言，它使用简洁的纯文本格式来编写文档，可以转换成有效的 HTML 或 PDF 文档。Markdown 的语法十分简单，常用的标记符号不超过十个，几分钟就能掌握。可以通过这篇文章学习：少数派：认识与入门 Markdown。

基本上所有的静态网站生成器都是用 Markdown 写的。许多网站也支持 Markdown 语法，如 Github、少数派、石墨文档、飞书文档等。

我最初使用 VS Code 编辑博客的 .md 文件，同时打开浏览器预览效果。后来换到了 Typora，粘贴图片会更方便，也支持所见即所得。最后开发了一个和博客样式一致的 Typora 主题，就不需要再打开浏览器了。

博客优化

博客插件

以下是我的博客使用的插件。大部分插件都提供了傻瓜式的安装方法，某些插件需要有一定前端基础。这些插件都是免费的。

  • 不蒜子：极简网页计数器，两行代码搞定 PV、UV 统计。

  • giscus：由 GitHub Discussion 驱动的评论系统。

  • Google Analytics：Google 提供的站点统计工具，可以分析流量来源、所在国家、每个页面的阅读人次等。类似的工具还有百度网站统计。

  • Algolia：网站搜索工具。本身是一个付费服务，但对开源社区提供了免费额度，需要发邮件申请，一般三个工作日会回复。申请通过后，algolia 会定时给你的网站建索引，之后在网站上添加一个搜索按钮，接入其 SDK，就可以搜索全站内容了。但如果博客的 SEO 做得不错，直接通过 site: xxx.com 在 Google 搜索就足够了。

    image-20230312205507859

💡 建议在开发环境下关闭这些插件，避免不必要的数据污染。

SEO 优化

因为 Netlify 的服务器在国外，一开始百度无法索引到我的博客内容。解决办法是在百度站长平台中主动推送网站的 sitemap：

image-20230312205009660

我使用的是 jekyll，需要安装 jekyll-sitemap 插件，这会在构建博客时生成一个 sitemap 文件。之后把这个链接提交到上图的输入框中，过十几天就可以在百度搜索到网站内容了。验证方法是在百度搜索 site: imageslr.com。

除此之外，我的博客就没有做过 SEO 优化了，也没有主动推广过。目前来看，Google 的搜索效果最好、流量最多，百度聊胜于无。每天大约 80 UV。

性能优化

  1. 获取自动优化建议。通过 Google PageSpeed Insights、Web Page Test 等工具。

    16333641783878

  2. 用 CDN 加速。比如从 CDN 加载 JS、CSS 文件，而不是放在博客的 assets 目录下。图片也可以上传到 CDN，许多 markdown 编辑器都支持配置图床，比如 Typora：

    image-20230312211016537

  3. 减少加载的文件大小。比如使用 .min.js 文件、去除用不到的 CSS、使用 ImageOptim 优化图片大小等。
  4. 提升特定地区的访问速度。可以通过访问速度测试工具，检测网站在不同国家和地区的访问速度。如果某些地区访问延迟很高或者 ping 不通，考虑在该地区部署一台实例。
  5. 如果自己部署了服务器，打开 gzip 选项。

Jeklins 自动部署 (可选)

去年我把博客部署在了腾讯云服务器上，但因为访问量较少，就没再续费了。期间参考这篇文章配置了基于「Gitee + Jenkins + 飞书机器人」的自动部署流程，记录下来，以备不时之需。

最终效果：我只需要往 Github 推送最新的提交，服务器就会自动拉取最新代码并构建，部署成功或失败都会给我发送一条飞书消息。

image-20230312213846047

具体实现：

  1. 因为国内服务器无法访问 Github，需要创建一个 Gitee 仓库，然后参考这篇文章，配置 Github 仓库自动同步到 Gitee。我的实现在这里。
  2. 在飞书开放平台，申请一个飞书机器人，参考这篇文档获取机器人的 webhook 地址。之后就可以通过 curl 命令来给自己发送飞书消息了。
  3. 服务器安装 Jenkins，创建 CI 任务。我的实现在这里，里面集成了发送飞书消息的功能。
  4. 把 Jekins 的 Webhook 地址添加到 Gitee 仓库的 WebHooks 中。参考这篇文章。

结语

最后我想说，搭建博客是成本最低的操作，持续输出才是最难的。要多写精品文章、写原创内容。不要发一些可以很容易检索到的内容。提高博客文章的信息量、让博客的内容有长期价值、让每位读者都有收获。