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

2024-02-12 08:50:10

title: 利用Hexo搭建GitHub托管的个人博客
date: 2019-01-04 23:58:32
tags:

BlogSet-up
category:
Blog

心血来潮，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中，使用以下代码进行验证：

git version

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

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中，使用以下代码进行验证：

node -v

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

v10.15.0

4. Hexo配置

4.1 Hexo安装

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

npm install -g hexo-cli

4.2 Hexo初始化

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

cd ~/                          //跳转到根目录
mkdir XXXXX                    //创建一个文件夹
hexo init XXXXX                //初始化该服务器文件夹
cd XXXXX                       //跳转到该服务器文件夹
npm install                    //博客环境安装
hexo g                         //博客生成
hexo s                         //博客服务器开启（本地预览用）

4.3 注意事项

在每次重新打开命令窗口，并生成本地服务器预览页面之前，都必须跳转到该服务器的文件夹中。即：

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

请执行以下命令：

ssh-keygen

三次回车之后，可以生成id_rsa.pub文件，这里面就是SSH key的内容，然后使用Vim编辑器打开这个文件，复制里面的全部内容！

vim ~/.ssh/id_rsa.pub

然后在键盘上敲击以下命令并回车退出Vim编辑器：

:q

附带Vim编辑器的其他使用教程：

《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

回到命令行，输入：

ssh -T git@github.com

如果得到以下提示，则说明你已经配置好SSH-Key了。

Hi! You've successfully authenticated, but GitHub
does not provide shell access.

3. 上传到GitHub仓库

3.1 本地参数修改

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

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:

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

# 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的上传插件：

npm install hexo-deployer-git --save

显示如下文字说明插件安装成功了：

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 。

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

三、博客主题配置

1. 选择博客主题

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

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

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

theme:   XXXXX

2. 主题配置

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

XXXXX\themes\hexo-theme-pln-master\_config.yml

然后对照着Hexo对config.yml文件的说明进行编辑。

官方文档如下：
《配置》

3. 注意事项

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

四、博客撰写及文件更新

1. 博客撰写

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

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

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

![说明](url地址)

url地址的填项也可以是相对(物理)地址。

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

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

更多MarkDown的使用方法，请循：

《Markdown编辑器editor.md的使用》
《Github上README.md的简单使用方法》

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

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

hexo clean
hexo g
hexo d

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

3. 注意事项

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

五、博客展示

1. 域名申请

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

由于此步骤较为简单，不做多介绍。域名申请参考文章如下：

《免费申请域名》
《教你如何申请域名和解析域名》

2. 域名解析

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

有两种方法可以用来将自己的域名指向到Github Pages:

A类型解析：将域名定向解析到一个IPv4地址，只要将获取到个人博客的IPv4地址就可以定向解析了
CNAME类型解析：将自己的域名（定向域名或子域名）指向另一个域名（博客地址）

本人使用阿里云域名解析服务，具体步骤请参考以下链接：

六、博客个性化

1. 图床服务器

对于博客而言，有两项因素关乎着“我是否需要图床服务器”这项问题：

本博客是否有数量庞大的访客；
本博客是否有插入数量庞大的多媒体（动画、视频和图片等等）；

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

理论上说，只要另外申请一个服务器，专门用来存放图片的，就能被称作图床服务器。
因此图床服务器也有自建服务器和门户服务器的区别。
你也可以上传到微博相册或者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盘更方便。

参考链接

下载链接

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

码农公寓

一、前置准备工作

1. 基础知识

2. Git配置

2.1 Git Bash Shell下载

2.2 Git安装验证

3. Node.js配置

3.1 Node.js下载

3.2 Node.js安装验证

4. Hexo配置

4.1 Hexo安装

4.2 Hexo初始化

4.3 注意事项

二、上传到GitHub仓库

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

1.1 GitHub注册

1.2 Repository建立

2. SSH Key配置

2.1 本地生成SSH Key

2.2 拷贝到GitHub记录该Key

2.3 验证SSH Key

3. 上传到GitHub仓库

3.1 本地参数修改

3.2 上传插件安装

3.3 用户名称及邮箱配置

三、博客主题配置

1. 选择博客主题

2. 主题配置

3. 注意事项

四、博客撰写及文件更新

1. 博客撰写

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

3. 注意事项

五、博客展示

1. 域名申请

2. 域名解析

六、博客个性化

1. 图床服务器

2. .YML

七、后续总结

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

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

参考链接

下载链接

相关文章