庄小帅的博客

前言

充满硝烟的秋招征程结束了，最终还是选择去做技术。在寝室无所事事一个月后回到Lab依然是一颗浮躁的心，并不能平稳心态踏实学习，遂决定开始写博客。一方面通过写博客让自己踏实起来，毕竟以后技术之路还很长；另一方面“教是最好的学”，能够把自己会的东西写出来，本身就是对掌握知识的巩固，同时也方便自己以后查看。

废话不多说，这个博客系列主要介绍如何搭建自己的博客并进行一系列自定义美化，我前前后后花了4天时间来完成博客的搭建、域名的绑定、博客主题的自定义等。第一篇博客就介绍下如何通过 Hexo 和 Github Page 初步建站。Hexo 是一个快速、简洁的博客框架，可以帮助我们快速生成静态网页；Github Page 提供静态网页托管服务，相当于是服务器功能；再加上靓丽的主题美化博客外观，自己的博客就搭建完成啦。想要加快网站的解析速度的话，再给博客绑定个域名，美滋滋。

准备环境——安装 Node.js 和 Git

为了安装 Hexo，需要先安装下面 2 种应用程序：

Node.js (Hexo 是基于 Node.js 驱动的一款博客框架，建议使用 Node.js 10.0 及以上版本)
Git (分布式版本控制系统，用于博客项目的版本控制管理)

安装 Git

Windows: 官网下载并安装 git. (官网国内下载速度较慢，参考国内下载站)
Ubuntu: sudo apt-get install git-core
Max: 下载安装程序并安装。

安装 Node.js

Windows: 下载安装程序来安装。( 安装时勾选 Add to PATH )
Linux: 大部分 Linux 发行版都会在它们的默认软件包仓库中分发 Node.js

安装后打开命令行，输入相应命令验证是否安装成功，成功的话会有对应的版本号。

git version
node -v

hexo安装完成.png

安装 Hexo

这些都准备好后，就可以进行安装啦！打开Git Bash，输入：
$ npm install -g hexo-cli
安装完成后，就可以通过Hexo搭建博客了。执行下列命令：

hexo init myBlog
cd myBlog
npm install

新建完成后，在myBlog文件夹下会生成相应文件(夹)：

├── _config.yml # 网站的配置信息，您可以在此配置大部分的参数。 
├── package.json
├── scaffolds # 模版文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。
├── source  # 资源文件夹是存放用户资源的地方。
|   ├── _drafts # 博客草稿文件
|   └── _posts # 博客文章Markdowm文件 
└── themes  # 主题文件夹。 Hexo 会根据主题来生成静态页面。

由于文件夹内自带了”hello-world.md”，运行hexo s命令，在浏览器输入 http://localhost:4000/ 就可以预览博客的效果了（我这里修改了主题，看到的会有所不同）。

博客预览.png

至此，博客的本地部分就搭建完成了。接下来将博客部署到 Github Page。

部署到 Github Page

之前的步骤只是让我们能在本地电脑上看到自己的博客，为了让我们的博客让其他人也能看到，我们还需要做接下来的一些工作。

配置 SSH Key

首先在Github 新建一个 repository，repository 的名称必须是: 你的用户名.github.io

新建仓库.png

接着使用 Git 配置下 SSH Key。设置你的用户名和邮箱：

git config --global user.name "你的用户名"
git config --global user.email "你的Github邮箱地址"

生成密钥：
ssh-keygen -t rsa -C "你的Github邮箱地址"

查看密钥并复制：
cat ~/.ssh/id_rsa.pub

SSH Key.png

Github 添加 SSH Key

然后在 Github 上添加刚刚生成的 SSH Key。

打开 Github –> Settings –> SSH and GPG keys –> SSH keys –> New SSH key，复制之前生成的密钥粘贴就行了。

此时打开 Git，输入命令 ssh -T [email protected] 验证一下，如果出现 Hi XXX! You’ve successfully authenticated, but GitHub does not provide shell access. 说明 SSH key 添加成功了。如果出现问题，很有可能是之前的用户名、邮箱设置错误，检查一下。常见错误可以参考：
git-ssh 配置和使用
GitHub Help - Error Permission denied (publickey)

连接本地与 Github

至此，本地和 Github 的工作都已经完成，最后一步我们将它们两部分连接起来。
打开本地博客根目录下的 _config.yml 配置文件，找到 deploy 属性，填上自己的个人信息：

博客deploy配置.png

再安装一个部署插件：
npm install hexo-deployer-git --save

最后 hexo g -d 将本地博客部署上传，稍等片刻就可以在 https://你的用户名.github.io 看到博客了~

绑定域名(可选)

为了提高格(逼)调(格)和访问速度，可以将自己的博客指向一个域名。

购买域名

腾讯云，阿里云都是可以的。一开始为了足够装逼，在腾讯云花了16RMB买了 .cn 的域名，然鹅后面发现 .cn 这种顶级域名需要备案，而腾讯云现在又不提供个人备案的授权号，最后无奈又去阿里云买了个 .top 的域名，只要6块钱以年，而且不用备案。购买域名之后，需要进行实名认证。

域名解析

实名认证之后就可以对自己的域名进行操作了。进入到域名解析设置中，添加如下两条记录：

dns解析.png

www 对应自己的博客 github 地址，即你的用户名.github.io
@对应 Github 的二级域名的 IP地址，即 185.199.109.153

接着在本地博客的 source 文件夹下新建文件，文件名为 CNAME ，无文件后缀名。打开该文件，在里面写上购买的域名，如我购买的 littledream.top

设置 Github Pages

打开 Github 中博客项目对应的 repository 的 Settings，注意是项目的设置，不是整个 Github 的设置。往下翻找到 Github Pages –> Custom domain 在里面填上购买的域名即可。

这样我们就完成了域名和我们博客的绑定。以我的博客为例，此时无论是输入 GuichenLv.github.io 还是输入 littledream.top 都可以跳转到我的博客。

下一篇博客我将接着介绍如何个性化博客的主题，添加头像、个性签名、访客数量统计、文章字数统计等等。

参考信息

Hexo官方文档
超详细Hexo+Github Page搭建技术博客教程

Hexo + Github Page 搭建技术博客教程系列(一) 之初步建站