惯例的第一篇：搭建博客，从申请域名到撰写博文

眼看着半只脚要踏入前端工程师的坑了，正好去年申请的域名过期了，纠结了一阵还是申请了一个新域名（我的这个手啊，怎么就不听使唤呢

域名能干嘛？最最最基础的就是搭个博客了，但又不想再花钱搞个服务器，想到之前在同学博客（强势推广一波→jcf94.com）上看到的 Hexo 好像不错，那就造起来！

搭完博客后总得写点啥吧，苦苦思索数日，实在是肚里没货，那就也来一篇搭建博客的过程好了，权当记录，如果您搭建博客的过程中刚好路过这里又有兴趣阅读下去的话真真是非常感谢了！

建立博客项目

初始化博客

首先去 Hexo 官网 瞅一眼怎么安装，嗨呀，这中文看着怎么就那么爽！

因为我本地就有 Node.js 和 Git 环境了，所以直接走下一步——
（没有的同学可以去 Hexo 官网看看教程，或者直接下载安装就行）

# 安装 hexo 脚手架
# npm 是 node.js 用的包管理器
# 这句话意思就是「在全局安装 hexo-cli」程序
npm install -g hexo-cli

脚手架可以认为是帮助我们进行生成基础代码的工具。

拿着这个脚手架就可以搭建 Hexo 博客了：

# 用脚手架初始化博客的代码
hexo init <博客项目名字>

# 进入到博客项目文件夹
cd <博客项目名字>

# 安装相关依赖项
npm install

等上几分钟……铛！博客就建好了！

顺手再进 _config.yml 文件进行一些博客设置，官网有 详细的说明，照着改就可以了~
运行下服务器：

博客根目录

# 在本地运行 hexo 的博客服务器
hexo s

然后浏览器打开 http://localhost:4000——

博客就搭建完成了！好了这篇文章就到……才不！折腾是无极限的！

这么丑的博客是没有资格当我的博客的（赶紧先给这个主题的作者认个错）！不设置个主题怎么行？

设置主题

Hexo 官网提供了一个主题列表，我 在里面逛了半个小时后 选中了一款 Maupassant 主题，根据文档走起：

博客根目录

# 把主题下载到 ./themes/maupassant 里
git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant

# 安装主题的一些依赖，不同主题可能有所不同
npm install hexo-renderer-pug
npm install hexo-renderer-sass

然后进 _config.yml 设置下主题：

/_config.yml

theme: maupassant

安装不同主题所要执行的命令可能不同，具体参照各个主题的官网说明，大体步骤为 1. 下载主题；2. 设置主题。
有一款 Next 主题好像很多人都在用，这里也推荐下~

重新启动下 hexo 服务器，刷新页面，歘（chuā），页面就不一样了！

主题就安装完成了！好了这篇文章就到……才不！折腾是无极限的！

随手戳戳页面，嗯？怎么「关于」和「订阅」页面都是空的？

不行，得造起来！

其实也可以关掉这两个页面，页面的控制是归主题管的，在 themes/<对应主题文件夹>/_config.yml 中找到 menu 设置就可以增删不用的页面了。
当然，各个主题也可能有不同的设置，具体的还是要去主题官网看，或者研究研究 _config 文件。

生成「关于」页和「订阅」页

可以在 maupassant 的 _config.yml 中看到：

/themes/maupassant/_config.yml

page: about
directory: about/

所以，「关于」页面是一个 page，对应目录为 about/，所以可以用生成页面的方式生成它：

# 用 hexo 生成名为 "about" 的 "page" 类型页面
hexo new page "about"

好吧，其实我是网上找的方法啦。

执行完后就可以看到 source 文件夹下生成了 about 文件夹，里面有一个 index.md 文件，是用 Markdown 格式编写的，之后在 撰写博文 一节还会提到。

这里先往里面随便填一点东西：

/source/about/index.md

个人信息
---
姓名：脑袋
英文名：Brain Bag

再戳一下「关于」页面——啾！页面已经可以访问啦！

那么「订阅」页也……并没有好！这两个页面的作用是不一样的，不能按照同样的方式生成。
订阅页是用于别人 RSS 订阅 博客内容用的。虽然我的博客没啥内容吧，但这些花架式一定要先摆好，万一火了呢（不存在的！

Hexo 已经提供了订阅页的生成工具 hexo-generator-feed，还是一样跟着文档来：

npm install hexo-generator-feed

然后编辑一下根目录的（不是主题目录） _config.yml 文件：

/_config.yml

plugin:
- hexo-generator-feed

# RSS 订阅 - by hexo-generator-feed
feed:
  type: atom
  path: atom.xml
  limit: 20

重启下 hexo 服务器，再点一下「订阅」，可以看到 RSS 已经生成好了，完美！

主要页面就生成完毕了！

但是往上一看，浏览器顶端的页面小图标还是默认的空白——

这怎么可以，赶紧造起来！

设置 favicon

这个图标被称为 favicon，具体的作用和设计规则这里有一篇非常好的文章：设计小测试！教你制作完美的Favicon图标(附神器)，文章提到的 favicon 制作网站先记上，先把图标画出来。作为半个前端做个图标还不是信手拈来，看我掏出 p…pt 随手一画——

把图标搞出来，在前面提到的网站上上传，就可以得到一整个图标包了~

提供下我从 PPT 里搞出图片的步骤供参考：
复制->粘贴成图片->复制粘贴出来的图片->用 Snipaste 贴图到桌面上->保存成文件

我的博客只要用到里面的 favicon.ico 与 apple-touch-icon.png 就可以了，把它们粘到 source 文件夹下，一刷新——

我写博客测试的时候不知道为什么还是没有…尝试了重启服务器、重新生成、清除浏览器缓存…
但是换个浏览器发现已经可以读取了…

有些主题的 favicon 路径是写在主题配置文件中的，可能需要设置主题的 _config.yml 文件。

可以看到，无论是标题栏或是书签栏都可以显示 精美的 图标了！
但是博客只搭建在本地有什么意思？当然是要放到公网上 接收凌辱 以供大家观阅啦。

传到 GitHub Pages

一般的网站需要部署到服务器上才能访问，而 GitHub 提供了方便的 GitHub Pages 服务，静态的网页只需要部署在该服务上就可以访问了。要做的事情很简单，首先有个 GitHub 帐号，然后创建一个 .github.io 的仓库（repositories）。

然后在博客根目录的 _config.yml 文件中最底部加入：

/_config.yml

deploy:
  type: git
  repo: https://github.com/<GitHub Username>/<GitHub Username>.github.io.git
  branch: master

这里的 repo 就是博客的地址了，可以在仓库右上角获取到：

接下来的部署过程 Hexo 已经设定好了，只需要：

# 部署 hexo 博客
hexo d

等命令行里显示 done，就可以在 .github.io 访问到博客了！

可能是我的 git 之前配置过，不需要输入帐号密码，如果遇到此问题可以参照 这篇文章 进行 SSH key 的设置。

这就结束了么？不！还记得我一开头说我买了个域名么？这才是正事啊！部署到自己的域名上才更有 装逼 归属感！

个人域名

域名申请

虽然我是在申请好域名之后才想起来搞个博客的，但这里还是说一下域名的申请。

买域名其实和其它购物一样，选商家，选商品，交钱，拿货，走人！那么去哪儿可以买到域名呢？个人是在 namesilo.com 买的，另外还有 name.com，godaddy.com，阿里云等等，各家提供的域名本身是相同的，但是价格、服务等可能各不相同，这就要靠自己筛选了。

我为什么选 namesilo 呢？

首先，国内的服务商都要备案，太麻烦了，就先排除在外。然后就是看各家的评价了，namesilo 会赠送 WHOIS 隐私保护，价格好像也最便宜（价格不能只看首年的，还要看续费价格，可能会差很多），就它了！
我为什么要写这段话呢，因为我有一个 namesilo 的优惠码 bbag，新用户首次购买可以少 1 美元，我可以拿到首笔订单 10% 的返利，emmmmm，利害关系就是这些了，使用与否任君决定~

什么是 WHOIS？

WHOIS是用来查询互联网中域名的IP以及所有者等信息的传输协议。
—— 维基百科
总而言之就是网上直接能查到域名的登记信息，包括申请时填的姓名电话等，而 WHOIS 隐私保护就是域名商提供一个假的 WHOIS 替代，这样别人就不能直接查到登记人了。一般的域名商都会提供 WHOIS 隐私保护服务，具体收费情况就要看各家自己的策略了。

具体的购买步骤就不详述了，输入你想购买的关键字后查找想要的域名购买即可，一般见得多的后缀有 com, me, io 等等，要注意的是 cn 是中国的国别域名，是一定要备案哒。

那在一通忽悠购买域名后该怎么做才能让它和 GitHub Pages 里的博客关联起来呢？

关联到 GitHub Pages

首先要在域名商处进行 DNS 设置，如果是想设置类似 blog.bbag.me 的二级域名只需设置 CNAME，而类似 bbag.me 的一级域名则需要配置 ALIAS/ANAME/A 记录的一种。

域名解析到底是干什么的呢，这里给一个 阿里云的介绍文档
简单地可以认为 A 记录用于指向 IP 地址，CNAME 用于指向别的域名，MX 记录用于指向邮件服务器。

这里我使用的是二级域名，所以只需要设置 CNAME 记录就可以了——
在 source 目录下新建一个 没有后缀名 的 CNAME 文件，里面填上申请的域名：

/source/CNAME

blog.bbag.me

因为我自己是设置的二级域名，所以就没写怎么设置顶级域名了，关于顶级域名的配置可以见 GitHub 的官方说明 或者 这篇知乎专栏。

这是为了部署到 GitHub Pages 后让它知道要指向的域名。
然后进行部署：

hexo d

这时候在 GitHub 仓库的 settings 下应该就可以看到 GitHub Pages 设置成功了！

但是光 GitHub 知道还不行，还要告诉 DNS 如何解析，如果没有特别指定域名服务器的话就是在域名服务商处进行设置，比如我就是在 namesilo 里设置 CNAME:

域名解析可能需要一段时间才能生效…

再访问下自己的域名——

完美~

不！等等！

为什么别人家的网站都有小绿锁而我的没有？

不行，我也要小绿锁！

设置 HTTPS

要小绿锁呢当然不是为了好看，是为了安全 和治疗强迫症，自 5 月 1 日起 GitHub Pages 已经支持自定义域名的 HTTPS 设置了，只需要在 GitHub 的 settings 里一点：

其实之前是使用 CloudFlare 的服务设置的 HTTPS，但之后看了 这篇博文，让我决定还是使用 GitHub Pages 提供的服务。
这篇文章主要指出了 CloudFlare 服务的几个缺点：

1. “Flexible SSL” 模式仅仅在用户与 CloudFlare 之间采用加密连接，而 CloudFlare 与原始服务器间仍采用未加密通信；
2. 由于是共享的 SSL 证书，所以查看 SSL 证书时会看到许多无关的域名和我的域名关联在一个证书上。

总而言之，既然 GitHub 提供了更好的 HTTPS 服务又为什么不用呢~

勾选完毕后耐心地等上一段时间（24 小时内）再登上我的博客就可以看到鲜艳的绿锁了！查看一下证书可以看到，GitHub 是与 Let’s Encrypt 合作提供的 SSL 服务：

但是这里有一点需要注意的，小绿锁只有在全站的内容都是通过 HTTPS 访问才会显示，这就要求了站内的图片等也要走 HTTPS。如果要求不高的话可以选用 微博图床，可以将图片传到新浪微博的服务器。

但考虑到这种方式可能利用了微博的某些后门，万一哪天微博心情不好一封了之咱博客的图片可就全挂了。博客还是掌握在自己的手里才安心啊，翻了一圈云服务之后，我决定选 腾讯云 COS 作为我的坚实后盾。为什么？因为免费啊！每个月 10GB 流量足够我可劲造了。什么？不够怎么办？那说明我火了啊！火了还怕什么资费问题~

这里再推荐一个方便传图的工具：PicGo 就可以通过快捷键一键传图了~
Mac 上有个 iPic 也是同样功能~

好了，一切准备就绪，终于可以开始写博客了！

撰写博文

先生成一篇文章：

# 生成一篇名为 <title> 的文章
hexo new <title>

在 /source/_posts 就可以看到新建的文章了，找个文本编辑器打开它——嗯…嗯？这都是些啥呀：

---
title: hello-world
date: 2018-05-27 20:16:07
tags:
---

最顶端用 --- 分隔出来的部分叫 Front-matter，是用来告诉 hexo 文章的一些属性的，比如 title 代表文章的标题，date 代表文章创建日期等等，具体有哪些可以在 Hexo 文档 内找到。

在第二个 --- 之后就可以泼墨挥毫了，但是，我这篇博客里花花绿绿的格式是什么呢？图片又怎么插入呢？这就需要 Markdown 的支持了。Hexo 支持 GitHub Flavored Markdown 的所有功能，使用 Markdown 语法写出的文档可以被正确渲染，比如 **强调** 渲染出的效果就是：强调。

但我试了一下 GitHub 插入 emoji 的语法好像不可以，比如：:thumbsup:
这里的「支持所有功能」是 Hexo 官网说的，我就照着写了。
当然也可以通过第三方插件支持 emoji，这里就不展开了。

Markdown 本身就是为文字工作设计的语言，所以不用担心太复杂，只需要照着文档敲一遍基本上就能非常熟练辣。

写完！生成！发布！

# 根据 source 里的博文生成对应的博客网页
hexo g
# 部署到线上（GitHub Pages）
hexo d

这回终于完成了吧……连文章都发上去了难道还有什么问题不成？

等等！

怎么没有评论！

不行！我得加上！

评论系统

对我这种菜鸡来说写的文章肯定有许多纰漏，要是没有评论的话别人也不能进行指正，误导了更多的人可不好（不，并没有人访问这个博客的）。

评论一般是由主题提供的，比如我使用的 Maupassant 便提供了 disqus, 友言, LiveRe, 畅言, Gitment, Gitalk, Valine 等多个评论系统接入方式，大多数系统只需要在 /themes/maupassant/_config.yml 中填入相应信息即可，但我在选用 Gitment 作为评论系统的时候出了点问题，这里记录一下：

当 Gitment 初始化文章评论时一直失败，查看发送的请求可以看到返回的错误为 Error: validation failed，经过一阵子谷歌后发现，Gitment 是使用 GitHub 的 Issues 存储评论的，并且使用文章地址作为 issue 的 label 进行索引。但是在 GitHub 某版本更新后 label 的长度被限制为 50 字符，所以当文章地址太长时就会出现初始化错误的问题。

既然知道了问题所在，那解决方案也非常简单：使用一个小于 50 字符且不重复的字符串作为文章的 label 即可。一般使用文章的时间即可——毕竟没有人会在同一秒内创建两篇博客吧。

具体地，可以找到 /themes/maupassant/comments.pug 进行修改：

/themes/maupassant/comments.pug

var gitment = new Gitment({
        id: '#{page.date}', // 修改这一行，使 id 为文章的日期
        owner: '#{theme.gitment.owner}',
        repo: '#{theme.gitment.repo}',
        oauth: {
          client_id: '#{theme.gitment.client_id}',
          client_secret: '#{theme.gitment.client_secret}',
        },
      })

当然，每个主题的修改方式是不一样的，主要是找到 new Gitment 的位置进行修改。

多设备同步

平时我会在实验室和宿舍两个地方写博客，但是博客的源码却只在一处，如何保证两处代码都最新呢？

这可以用两个思路进行解决：

1. 文件同步，即通过 OneDrive、DropBox 等文件同步工具进行同步。
2. 代码同步，即使用 GitHub 等代码托管平台进行同步。

其中文件同步会同步大量 node_modules 内的依赖模块代码（可以通过 npm install 重新安装），所以我选用了第二种代码同步的方法进行同步，毕竟也算是源代码么。
具体的流程可以参考：Hexo 多台电脑同步 源码保存 | 马上学123

后记

呼呼呼，这篇文章从 5 月 10 日创建，一直到今天（5 月 27 日）才算基本完成（而且越后面越短），看来我的博客之路充满了坎坷啊…

不过如果有帮助到谁的话，哪怕只有一点点，也是非常开心了~

希望我还能产出下一篇博文，不要写完这篇就荒废了（立下 Flag

版本记录

2018/05/27 完成第一版