利用Hexo搭建GitHub托管的个人博客

Posted on Edited on In

心血来潮，2019年伊始的第四天，我要搭建我自己的个人博客，作为个人工作学习和生活的一种记录方式。

这前面的路或许会有困难，但我喜欢“挑战成功”的快感！

本博文部分语句和教程是适用于Windows平台的，mac及其他平台请依据官方文档进行操作，本博文较长，请耐心阅读并多多实践。欢迎大家留言，提出问题，ありがとうございます。

一、前置准备工作

本博文将叙述如何基于Hexo静态博客生成器快速搭建托管于GitHub的自建博客。

首先，我们要在本地电脑端配置环境，并完成本地个人博客的搭建，然后申请GitHub账户和仓库，并上传本地个人博客到仓库，最后申请域名“XXXXX.com/XXXXX.cn” 并解析到对应的GitHub地址“XXXXX.github.io” 。

本文所示操作方法都是在Windows环境下利用Git Bash Shell进行的。

本文中出现的所有下载连接如果无法进行下载或下载速度极慢时，可以到文末找到对应的百度云盘链接。

首先我们要安装几个工具：Git、Node.js、hexo和hexo-git（第二节 3.2中）上传工具。

1. 基础知识

个人博客，可以分为传统博客和自建博客两种。

传统博客像是新浪博客、网易博客和QQ空间等，主要依托于自身强大的博客门户运营能力，能够为用户提供安全便捷的博客环境，缺点就是兼容性不够强，并且个性化定制能力稍差。

自建博客根据服务器管理方式也可以分为两种。一种是基于第三方服务器托管的自建博客，像GitHub这种；另一种是基于自有服务器的博客。

自建博客根据博客生成器来分也可以分为两种，分别是动态博客和静态博客。其中，动态博客以WordPress、FarBox、Ghost等为代表。静态博客以Hexo、Jekyll、Octopress、Hugo为代表。

以下为动态博客和静态博客的几点主要区别：

  • 资源占用上，静态的相比动态占用服务器资源少，还可以托管在Github Pages上；
  • 发布更新操作上，由于静态博客没有管理后台，所以发布更新内容要比动态博客繁琐；
  • 访问速度上，由于静态博客没有数据库，所以访问速度更快；
  • 安全性上，静态博客相比动态博客免疫了很多Web攻击套路；

除了Hexo以外，还有其他的静态博客生成器推荐，见文章《11个最流行的静态(博客)网站生成工具》。

2. Git配置

2.1 Git Bash Shell下载

Windows平台： https://gitforwindows.org/ Hexo提供的Git-SCM网址的Git Bash shell: https://git-scm.com/downloads

2.2 Git安装验证

为了确保安装成功，我们可以在Bash Shell或Windows CMD中，使用以下代码进行验证： 

1
git version
若成功安装，则会提示以下结果： 
1
git version 2.20.1.windows.1

3. Node.js配置

3.1 Node.js下载

Windows平台： https://nodejs.org/en/

3.2 Node.js安装验证

为了确保安装成功，我们可以在Bash Shell或Windows CMD中，使用以下代码进行验证： 

1
node -v

若成功安装，则会提示以下结果： 

1
v10.15.0

4. Hexo配置

4.1 Hexo安装

成功安装Git和Node.js之后，（关闭窗口并重启命令终端）则可以使用npm命令语句安装Hexo： 

1
npm install -g hexo-cli

4.2 Hexo初始化

为本地博客创建文件夹，以下代码中的”XXXXX”为该文件夹的名称，为避免出错，请勿输入中文。 

1
2
3
4
5
6
7
cd ~/                          //跳转到根目录
mkdir XXXXX                    //创建一个文件夹
hexo init XXXXX                //初始化该服务器文件夹
cd XXXXX                       //跳转到该服务器文件夹
npm install                    //博客环境安装
hexo g                         //博客生成
hexo s                         //博客服务器开启（本地预览用）
### 4.3 注意事项 在每次重新打开命令窗口，并生成本地服务器预览页面之前，都必须跳转到该服务器的文件夹中。即： 
1
cd XXXXX                       //跳转到该服务器文件夹

到此步骤为止，本地服务器配置已经全部完成。可以根据hexo官方文档给出的参数格式说明来对博客进行个性修改，这些请看第3节。

二、上传到GitHub仓库

在这部分中，我们将会申请到一个Github账户，并建立好对应博客代码的储存仓库，也会将本地生成的公钥SSH Key中。

1. GitHub账户申请及Repository（仓库）建立

1.1 GitHub注册

在这里偷个懒，引用别人的文章作为参考： 《GitHub注册》 GitHub官方网址：https://github.com

1.2 Repository建立

在创建Repository的时候一定要注意，仓库名应该为：XXXXX.github.io。 这个XXXXX使用你的GitHub帐号名称代替，这是固定写法。

比如我的名字是liewzheng，则我对应的仓库名称应该是：liewzheng.githug.io 不然在后续上传本地博客到仓库之后，会发现仓库无法打开的情况，因为DNS寻址会不成功。

2. SSH Key配置

此步骤是为了让Github给你的电脑访问授权，如果没有此步骤，则无法上传到Github。

2.1 本地生成SSH Key

请执行以下命令： 

1
ssh-keygen
三次回车之后，可以生成id_rsa.pub文件，这里面就是SSH key的内容，然后使用Vim编辑器打开这个文件，复制里面的全部内容！ 
1
vim ~/.ssh/id_rsa.pub
然后在键盘上敲击以下命令并回车退出Vim编辑器： 
1
:q
附带Vim编辑器的其他使用教程： 1. 《Vim入门基础》：https://www.jianshu.com/p/bcbe916f97e1

2.2 拷贝到GitHub记录该Key

在自己的GitHub主页，点击右上角头像，点击Setting，点击左侧边栏的SSH and GPG keys,点击New SSH key。

然后将SSH-key粘贴到Key文本框中，在Title文本框键入对该Key的备注并保存即可。

2.3 验证SSH Key

回到命令行，输入： 

1
ssh -T git@github.com
如果得到以下提示，则说明你已经配置好SSH-Key了。 
1
2
Hi! You've successfully authenticated, but GitHub
does not provide shell access.

3. 上传到GitHub仓库

3.1 本地参数修改

首先找到本地博客的服务器文件夹下的_config.yml文件，然后打开并滑动到最底下，其原始文件应该是如下的： 

1
2
3
4
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:

然后我们要对其进行上传参数修改，XXXXX为你对应的账户名： 

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git                   #为Git，旧写法为github
  repo: git@github.com:XXXXX/XXXXX.github.io.git        #输入你对应的Git仓库地址，SSH写法
  branch: master              #可以为其他分支，默认为master

3.2 上传插件安装

接下来安装hexo对应Github的上传插件： 

1
npm install hexo-deployer-git --save
显示如下文字说明插件安装成功了： 
1
2
3
4
5
6
7
8
9
10
11
  npm WARN deprecated swig@1.4.2: This package is no longer maintained

> fsevents@1.2.4 install /Users/apple/liewzheng/node_modules/fsevents
> node install

[fsevents] Success: "/Users/apple/liewzheng/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
+ hexo-deployer-git@0.3.1
added 68 packages from 33 contributors, updated 1 package and audited 5870 packages in 12.563s
found 1 low severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details

3.3 用户名称及邮箱配置

（更新日期：2021年2月5日）

向cmd或者terminal内设置两个变量，分别是 user.name 和 user.email 。

1
2
git config --global user.email "you@example.com"
git config --global user.name "Your Name"

三、博客主题配置

1. 选择博客主题

本步骤需要在Hexo的官网上进行主题挑选及预览，然后再跳转到对应的GitHub仓库中下载主题Zip包，并解压放在对应的位置/themes/下面。

然后在根目录下找到文件_config.yml

并在其文件下方XXXXX处替换刚下载好的主题名称（其文件夹名称）: 

1
theme:   XXXXX

2. 主题配置

请打开对应的主题文件夹下的\_config.yml文件，如： 

1
XXXXX\themes\hexo-theme-pln-master\_config.yml
然后对照着Hexo对config.yml文件的说明进行编辑。

官方文档如下： 《配置》

3. 注意事项

大概是因为Hexo免费的原因，其主题很多都是资源上传，且无人维护的，因此需要多下载几个主题，一个一个进行尝试，在本地博客服务器上尝试到所有网页跳转正常且无BUG之后再进行主题配置，按需修改。

四、博客撰写及文件更新

1. 博客撰写

使用Hexo创建的静态网页之后，在编写博文之时，一般都是使用轻量级标记语言（MarkDown,文件名如：XXXX.md）来编写的。然后利用脚本语言将md格式文件自动转换成html5文件，并上传到服务器仓库。

这时候，熟练使用MarkDown这种纯文本文档语言来编写博客，是为广大博客爱好者提供了便利的。

由于MarkDown是纯文本文档，在文章撰写中无法使用图片直接插入和预览功能，因此最好选择合适的稳定的图库网站来保存自己的图片，并生成对应url，再使用如下引用方法来插入图片： 

1
![说明](url地址)
url地址的填项也可以是相对(物理)地址。

科普 相对地址和绝对地址（相对路径和绝对路径）。 这一点，学计算机和电子的人可能会比较懂。 详细科普还是请参考链接6吧。

另外，推荐使用Atom文本编辑器对本博文中出现的各种文件进行编辑，自带各种显示优化，地址如下： https://atom.io/

更多MarkDown的使用方法，请循： 1. 《Markdown编辑器editor.md的使用》 2. 《Github上README.md的简单使用方法》

2. 文件更新（利用Git Bash Shell）

再次更新本地服务器文件，并保存生成预览之后，如果想要更新对应git仓库里的文件，最好每一次都按照以下代码进行操作，避免出现不必要的意外。 

1
2
3
hexo clean
hexo g
hexo d
之所以强调需要每一次都这样操作，是因为本人就有过偷懒，在本地博客预览成功后选择直接部署，都没有提示错误，也没有部署成功（输入对应网址后无法显示更新）。

3. 注意事项

可以在本地博客服务器开启的情况下，实时修改服务器文件并刷新网页进行查看，这样创建文章和预览网页的效率有极大的提升。

五、博客展示

1. 域名申请

域名申请比较靠谱的，可以选择国内的阿里云、百度云和腾讯云等等。

由于此步骤较为简单，不做多介绍。域名申请参考文章如下： 1. 《免费申请域名》 2. 《教你如何申请域名和解析域名》

2. 域名解析

域名解析是指将指定的域名与指定的服务器或其他地址绑定在一起，能够在DNS服务器中被检索得到，通过输入域名A并跳转到指定位置。

有两种方法可以用来将自己的域名指向到Github Pages: - A类型解析：将域名定向解析到一个IPv4地址，只要将获取到个人博客的IPv4地址就可以定向解析了 - CNAME类型解析：将自己的域名（定向域名或子域名）指向另一个域名（博客地址）

本人使用阿里云域名解析服务，具体步骤请参考以下链接： 1. 《github pages+阿里云域名绑定搭建个人博客》 2. 《github pages 绑定阿里云域名》 3. 《github怎么绑定自己的域名？》

六、博客个性化

1. 图床服务器

对于博客而言，有两项因素关乎着“我是否需要图床服务器”这项问题： 1. 本博客是否有数量庞大的访客； 2. 本博客是否有插入数量庞大的多媒体（动画、视频和图片等等）；

对于以上两种因素而言，图床服务器都能够很好的减轻博客服务器的访客压力，减少因为访客众多或者多媒体加载时的网页载入缓慢或崩溃。对于自有服务器的博客而言，图床服务器能够降低租用服务器的流量消耗，加快访问速度。

理论上说，只要另外申请一个服务器，专门用来存放图片的，就能被称作图床服务器。 因此图床服务器也有自建服务器和门户服务器的区别。 你也可以上传到微博相册或者QQ空间相册，然后引用超链接到.md文件里。

本人用阿里云OSS（Object Storage Service，对象存储服务），搭配Mac平台的 iPic插件 ，有兴趣也可以参考一下： 《对象存储OSS》 《在 iPic 中添加阿里云 OSS》

然后再推荐个口碑不错的七牛云，注册和使用方法请遵循技术文档吧，链接如下： 七牛云

推荐网友Mashiro的自建图床服务器： 《搭了一个图床》

其他推荐链接： 《免费图床》

2. .YML

.YML是YAML语言的文件格式。

YAML是"YAML Ain't a Markup Language"（YAML不是一种标记语言）的递归缩写。在开发的这种语言时，YAML 的意思其实是："Yet Another Markup Language"（仍是一种标记语言），但为了强调这种语言以数据做为中心，而不是以标记语言为重点，而用反向缩略语重命名。——摘自wikipedia.org

请自行以Hexo官方针对_config.yml文件做出的解释进行.yml学习，并针对个人博客进行适当的修改即可。

七、后续总结

1. 如何GitHub自建博客和自有服务器博客的区别

这个问题，相当于我给自己挖了个坑，之前打算长篇大论来着，发现自己也并没有那么深的体会。

自由服务器博客最大的问题是，一般都会有自己的系统。 这样的服务器系统分为两类：应用镜像和系统镜像。

应用镜像的代表是：WordPress、LAMP、Drupal、Node.js、ECShop等等。 系统镜像的代表是：CentOS、Ubuntu、Debian和Windows。

自己管理服务器的话，最好是有一个自己的博客应用镜像，如WordPress，WordPress也是基于CentOS打造的，是功能非常强大的博客和内容管理工具平台。

而GitHub的话更多的是静态博客的搭建，没有操作系统这种东西。

2. 做好更换设备前的备份工作

对了，值得一提的是，如果你准备在多台电脑之间编辑你的博文，最好是能够把本地博客服务器拷贝到U盘或者移动硬盘上面。

假如，尝试着从GitHub再次git clone到本地的话，你会发现里面的内容和本地博客服务器的内容完全不一样。这是因为本地博客服务器使用.md文件进行编辑，之后在hexo d的过程中会把.md文件转换成.html文件，而使用.html文件编辑的话会变得更加复杂。

因此，为了避免在转移到另一台电脑上编辑的时候出现这种尴尬问题，还是备份到U盘更方便。

参考链接

  1. 《GitHub+Hexo 搭建个人网站详细教程》
  2. 《在github上搭建hexo个人博客（Linux-Ubuntu）》
  3. 《搭建个人博客，你需要知道这些》
  4. 《Hexo官方帮助文档》
  5. 《MarkDown》
  6. 《相对路径和绝对路径》

下载链接

  1. 《安装工具合集（更新时间2019/01/05）》 提取码：28wj