0.写在前面

网上关于如何利用 GitHub Pages 白嫖一个个人博客网站的文章已经很多啦，但很多上来就是“一步步”式的教程，一些工具、框架等名词完全不解释，默认你就是知道的。而且此类同质化内容的文章很多，小白选择其中一篇按部就班地搭建，如果有一步出错就很容易无法继续下去从而被劝退。

就比如刚刚提及的 GitHub Pages 是啥？HEXO 框架又是啥？不懂其中一些名词的小白，很快就会被搞得晕头转向。即使是侥幸按照步骤成功搭建的萌新，也只是“知其然，而不知其所以然”，后期一旦需要对博客进行一些修改、升级，就又不知所措了。

因此，此篇博文记录了我建站时所踩过的坑，并且站在一个完全不懂代码的小白角度上，讲一讲建站所需要的一些基础知识和概念。

放心好了，此篇博文不是只“授人以鱼”的教程，而是从宏观感性的角度，帮助小白对搭建博客有个概念性的认知。而至于怎么搭建博客、如何主题美化等的一些细节，大家也不用怕，我为大家准备了一些高质量的教程式博文，并在文末统一地给出参考链接。

1.一些你必须知道的概念

1.1.博客构成

就像我们做菜需要食材、锅铲、油盐酱醋等等，搭建一个博客需要啥呢？为了简化说明，你可以理解为需要 3 样东西：

  • 你所写的博文
  • 能帮你将博文转换为网页 (html) 形式的工具 (以下简称这样的工具为 “框架”)
  • 能帮你存储并且能够让大家访问到这个博客网站的服务器 (以下简称为 “服务器”)

来，不要怕，让我们抽丝剥茧，一个一个地去了解。

1.2.概念展开

(1) 博文 & Markdown

博文就是你写的文章，你可以拿任何文本编辑器写 —— 像什么电脑上的记事本、Word，手机上的备忘录等等都可以，反正就是像发朋友圈一样所写的文字啦！

等等，为什么出现了 Markdown 这么个东西？不慌，我拍胸脯跟你保证，这玩意儿没那么神秘。来，举个例子：

1
2
3
4
5
6
7
8
9
# 这是一个帅气的一级标题

## 这是一个淘气的二级标题

### 你太聪明了，三级标题就是 3 个 #

###### 以此类推，最多六级标题

我只想凑字数，然后给**这部分**加粗，然后给*这部分*斜过来。

将上述代码复制到 Markdown 在线编辑器，查看效果。

好的，到此为止，你已经掌握了一门“船新”的语言！它就是 Markdown 语言，而最最常用的 3 个语法你也掌握了，它们就是：

  • 多级标题，语法: # <标题>
  • 加粗文字，语法: **<加粗内容>**
  • 斜体内容，语法: *<斜体内容>*

那为什么要学习这个 Markdown 呢？直接用备忘录或是 Word 写它不香么？

因为我们最终是希望自己的博文能够以我们看到的格式样子出现在网站上。然而大家都知道，自己在备忘录弄好的文字格式，粘贴到 Word 里就变了样，我们得重新排版。而 Markdown 相当于强制了大家写文章的格式，实现样式的“大一统”，方便后面将博文内容转换为网页形式。你可以理解为，以前提交电子文档必须是 Word 的 .docx 或是 PDF 的 .pdf 格式，现在必须提交 Markdown 也就是 .md 格式的文档。

看到这儿，有的人可能会发怵 —— 啊！怎么还要学一门新的语言？别担心，Markdown 就是以友好著称，语法炒鸡简单且学习成本低，写出来的文字排版也十分漂亮。Markdown 能够助你早日脱离 Word 排版“牵一发而动全身”的苦海，让你专注写作本身，而不是被段落格式、字体大小搞得脑阔疼。

另外，再偷偷告诉你，我们看的知乎，就支持用 Markdown 语法进行回答。此外，如果你使用有道云笔记、notion、语雀等笔记类的产品，你会发现它们都支持 Markdown 语法进行写作，因为它实在是太简单优雅了，非常适合笔记这一类需要专注写作的应用场景。而且越来越多的网站的评论回复也都支持 Markdown 了，比如中国大学MOOC，再比如你还可以在此篇博客的评论区里用 Markdown 语法评论。

小结：博文就是你平常写的文字内容，Markdown 就是另一种文档格式，扩展名为 .md。要想将自己的博文以网页形式发布，就必须以 Markdown 语法书写。

(2) 框架 & 主题

框架

依旧打个比方，如果我们遇到一个紧急的(也可能不紧急的) PPT 需要去做，我们第一反应是啥？当然是套模板啦！

  1. 熟练地下载一个自己觉得还不错的模板
  2. 填充内容
  3. 保存

奶思！请叫我 PPT 带师！别看了，说的就是屏幕前的你！那我们写博客也能否这么简(偷)单(懒)呢？

当然可以！PPT 我们可以套模板，那博客我们可以套框架。有很多框架可供我们选择，HEXO、Hugo、Jekyll 等等，有了这些框架，我们发布一篇博文就简化成了以下的过程：

  1. 用 Markdown 格式写好一篇文章
  2. 交给框架转换成网页 (html) 形式
  3. 发布到站点

框架除了能将 Markdown 的博文转换为网页形式，最重要的是“框架”一词本身的含义，一个博客最基本的框架应该有哪些构成呢？

  • 主页
  • 归档（时间线）
  • 分类
  • 标签

只要是框架都会至少会包含这些功能。

主题

现在再来谈一谈“主题”，这个就更好理解了。比如一些手机应用，大家就可以更换各类主题，而基本的功能框架不会改变；再比如游戏角色，大家可以更换角色或是道具的主题皮肤，但却不会破坏其原先的属性功能。

所以说每个框架都可以按照个人喜好套用不同的主题，比如博主目前博客使用的就是 HEXO 框架下的 Butterfly 主题。

小结：框架就是模板，主题就是皮肤。

(3) 服务器

我们仍然只从概念上讲讲，服务器在整个博客搭建的过程中起了什么作用，并不去剖析其实际的工作原理。假设我们已经完成以下 3 个步骤：

  1. 用 Markdown 语法写好一篇文章
  2. 选定某个框架，并且挑了一个符合个人口味的主题
  3. 利用框架把写好的文章转换成了网页 (html) 内容的形式

此时，我们已经能在本地的浏览器上打开看到自己博客的效果了。如果我们想能够让大家像访问百度、B站等网页一样浏览自己的博客，那么就必须把用框架转换后的网页内容放在服务器上。

这就是服务器的作用，类似于将你自己电脑上的内容放在了网盘上，分享出去，大家就都能看到了，而服务器就类似于网盘。

当然实际中服务器不是这么工作的。要真想让一个博客被访问到你还需要做以下两件事：

  • 充钱 —— 因为租用服务器是需要收费的
  • 组建环境 —— 有了服务器不是说把网页内容放在上面就玩事儿了，你还得搭配相关的环境组件，让你的网页内容……balabala

头大了头大了！说好的白嫖呢？说好的不写代码呢？

“懒”是第一生产力，这时候我们的 GitHub Pages 终于登场了。没错这个家伙就完美地满足了以上两个条件：

  • 不要钱
  • 省事儿 —— 你只管像上传内容到网盘一样，把你的网页内容上传至 GitHub Pages 上，然后就能在网页上访问到自己的博客了。

当然，类似服务器的选择还有很多，比如国内的 Gitee Pages，虽然也很省事儿，但它收费；再比如 老牌的 WordPress 等等。关于这些服务器的对比，我会在下文里贴出参考链接，感兴趣的读者可以前往阅读。

小结：GitHub Pages 是众多服务器中的一个，它的优点在于免费且省事儿。GitHub Pages 这一类的服务器功能上很像我们平时用的网盘，我们只管上传网页内容，就能让大家都可以访问到自己的博客。

2.GitHub Pages + HEXO 搭建博客指南

2.1.总体概述

基于上述讲的几个概念，在搜索“如何搭建博客”后经常出现的 GitHub Pages + Jekyll、WordPress 等一些字眼，想必大家现在就应该很容易理解它们了。而博主选择的网站配置如下：

  • 服务器： GitHub Pages
  • 框架： HEXO
  • 主题： Butterfly

PS: 不同框架下的主题之间是不能互用的，就好比网易云音乐的主题皮肤不能用于 QQ 音乐

博主以自己的博客网站 GitHub Pages + HEXO 为例，带领大家领略一篇博客的诞生过程。

  • 用 Markdown 语法写好一篇文章我真棒.md
  • 用 HEXO 框架将 我真棒.md 转换为网页形式 .html
  • 把转换生成出来的网页内容上传到 GitHub Pages 服务器上

2.2.细节展开 + 保姆级教程推荐

至此，大家应该对如何搭建博客，以及搭建博客的一些基本概念有所了解，大家是否已经迫不及待地想开始搭建自己的博客了呢？

由于博主只用过 GitHub Pages + HEXO 搭建过，因此接下来的细节基本都是围绕它们展开的，小伙伴们根据自己的需求，选择是否继续阅读。

(1) 用 Markdown 撰写博客

前文已经带大家尝过了 Markdown 的鲜，大家一定很想知道有关它更多的知识，我整理了 3 个大家比较关心的点。

我该用什么编辑器来写 Markdown ？

如果是新手，我推荐 Typora。理由：

  • 无需配置，开箱即用
  • 实时显示排版效果
  • 小巧玲珑，内置多款主题
  • 三大 PC 系统 Win、MacOS、Linux 全部支持

至于 VScode、Atom 以及一些网页在线编辑器，可以等逐步熟悉后再尝试。

如何学习更全的 Markdown 写作语法以及教程？

Markdown 除了加粗斜体，还有插入图片、链接、表格、列表等功能，那么我该如何学习相关语法呢？

博主在这里推荐Markdown 语法说明。

除此以外，博主也强烈建议大家遵循 Markdown 书写规范。因为良好的书写规范，不仅能约束自己使得行文更加通畅，还能使读者获得更好的阅读体验。

真的只能用 Markdown 写作吗？

真的只能用 Markdown 写作吗？它的排版样式还是太少了啊，不能满足我一些特别的需求。

答案是否定的。

不知大家是否注意到我前面提到的“用框架将 .md 格式的文章转换为网页 (.html)形式”。没错，如果你想玩出更多的花样，你可以直接书写 html 语言来丰富你的排版，不过这就涉及到前端编程的相关知识了，感兴趣的读者可以自行搜索相关内容。

(2) 众多框架怎么选择

目前主流的框架也就 3 个 —— Jekyll、HEXO 以及 Hugo，读者可以参考此文，来一睹它们的优劣，选择其一。

而关于 HEXO 框架的搭建教程，博主推荐大家看一看这篇博文或者使用 Hexo+GitHub 搭建个人免费博客教程（小白向）。

(3) 众多服务器怎么选择

提供博客网页托管发布的服务器主要有 GitHub、Gitee 和 Coding，关于这三者在访问速度、价格等方面的对比，大家则可以参考这篇文章 —— 静态博客「Pages」服务横评

而关于如何在 GitHub 上写作，大家可以参考这个话题下的高赞回答。

2.3.啰嗦几句

如果你真的完全不懂命令行的一些命令输入，那么整个博客搭建的过程对你来说可能并不友好。

这时候，如果你有决心，那固然很好，毕竟最终成功搭建一个属于自己的博客网站，那是非常有成就感的；如果束手无策，那也没事儿，毕竟搭建博客的本心是为了自我总结反思，写出高质量的博文。

毕竟像知乎、简书、notion 等应用也为我们提供了一片书写的广阔天空。

3.后记

行文至此，其实还有很多想和大家详细讲解的，但毕竟这只是一篇小白指南，而非完备严谨的帮助教程，无法涵盖到方方面面。同时，每个人的习惯、审美不同，因此博客的搭建是高度个性化的一件事儿，我不想因为介绍太多，限制了大家去探索挖掘的兴趣；也不想列举详尽，让大家出现“仓鼠心态”，“码”了很多却无从下手。

当然，如果有机会，我还有几个方面想和大家谈一谈，那就是对于博文资源的管理以及博客站点的优化：

  • 如何管理图片、音乐等静态资源

  • 如何使用 CDN 加快图片等静态资源的加载速度

  • 如何命名永久链接

  • 如何在不同设备上发布博客

  • ……

认识的过程是螺旋上升的，搭建博客也不是一蹴而就之事。

最后，博主感谢大家能够阅读至此，祝愿每位看完此文的小可爱都能有所收获，成功搭建属于自己的一方小天地！