Hexo + GitHub Pages搭建个人博客

Posted on Edited on In , Symbols count in article: 3.8k Reading time ≈ 3 mins.
本博客搭建过程中参考了许多教程。本文用于记录搭建过程，以及出现的一些小问题


有需要学习搭建博客的朋友可直接参考他人成熟的教程。本文参考教程：

  1. Hexo+Github Pages快速实现个人网站
    搭建流程较为清晰，整体框架都有，不想详细了解每一个步骤只是想成功搭建一个博客参考这个教程就够
  2. 彻底搞懂如何使用Hexo+GitHubPages搭建个人博客
    对于各种概念的解释都很详细，能够学习到很多知识，有助于未来对博客进行魔改升级等高级操作
  3. Hexo官方说明文档
    Hexo官方说明文档，目前更新版本为1/9/2021。内容步骤简洁明了，跟着一步步做不会出大的差错，如有问题也可以直接提交
  4. GitHub Pages官方说明文档
    GitHub Pages官方说明文档，参考性不如前面三个链接，但也能提供一部分支持。

Hexo

Git

Mac和Linux系统的电脑已经预装了git.
Windows系统的电脑可以从官网(https://git-scm.com/downloads )下载相应的版本，安装过程中选择默认选项即可。
由于之前简单使用过gitee加git存代码，git的配置在当初已经完成。搜索“git使用”能够找到很多有用的教程。

Node.js

可从官网 (https://nodejs.org/en/)直接下载安装，可根据需求下载最新版本或推荐版本。需要注意的是，目前Hexo官网给出的建议是Node.js版本需不低于10.13，建议使用Node.js 12.0及以上版本。此处下载了Nodejs官网的推荐版本(recommended for most users)，14.17.6 LTS.
由于对Node.js并不了解，安装过程中直接选择了Automatically install the necessary tools.如果想更深入了解安装过程及自定义安装，可参考官方给出的详细安装教程(https://github.com/nodejs/node-gyp#on-windows)

Hexo

检查Git和node.js安装情况

安装Hexo需要git和node.js安装完成。检查电脑中这两项安装完成后，即可安装Hexo。可使用查看版本来检查是否安装成功。 

$ npm -v  
$ node -v  
$ git --version

安装Hexo

上述安装成功后，只需要使用npm即可完成Hexo的安装 

$ npm install -g hexo-cli

对于熟悉 npm 的进阶用户，可以仅局部安装 hexo 包 

$ npm install hexo

检查安装是否成功

依然使用查看版本号的方式检查安装是否成功，运行命令： 

$ hexo - v

建站

$ hexo init <blogname> #此处blogname可以自己起名字，此步要在空目录下进行
$ cd blog  #进入blog目录
$ npm install  #它会根据package.json依赖配置文件自动下载安装所需要的依赖模块node_modules
$ hexo generate  #生成静态文件, 缩写 $ hexo g
$ hexo server  #开启本地服务, 此时通过 http://localhost:4000 就可以访问默认样式的博客, 缩写$ hexo s

小小的Debug

安装时，显示在resolveNewModule步骤耗时很久，不知道是卡住还是这个步骤本就耗费时间。
Google找到Hexo的官方说明文档(https://hexo.io/zh-cn/docs/)，其中提到安装只需要几分钟，并且这个几分钟可能包含前述的Git和Node.js的准备。因此意识到安装出现问题，直接停下此次安装并重新运行命令。
出现问题的原因可能是安装的同时在下载一个较大的文件，无论是内存占用还是网络占用都达到一定程度，使得Hexo的安装受到影响。二次运行命令行时，下载已经结束，只用时51s就完成安装。
多翻了几个教程，很多教程都有提到新建文件夹Hexo，在这个目录下安装Hexo。因此卸载Hexo，在目标位置建立文件夹重装。卸载命令： 

$ npm uninstall hexo-cli -g

这次安装同样比较顺利，很快就完成。
实际上，如果在安装前没有建立文件夹，只需在安装成功后建立一个新目录，后续步骤在这个空目录下进行即可。上述uninstall步骤是因为比较心急，直接推翻重来，但没有必要。

GitHub Pages

git初始配置

Git安装完成后确认是否完成基本部署，用户名和邮箱设置是否完成。 

$ git config --global user.name "YOUR NAME"  #设置用户名称
$ git config --global user.email "YOUR EMAIL"  #设置邮箱地址

生成SSH key公钥

查看当前用户的目录下是否存在.ssh目录，如果存在进入到此目录下检查是否存在id_rsa和id_rsa.pub两个文件，这两个文件分别对应的是公钥和私钥，如果存在直接跳过此步，否则输入下面的命令： 

$ ssh-keygen -t rsa -C “your_github_email”
# -t type:指定你要生成的密钥类型
# -C commit:提供一个新的注释

然后一路回车，直到生成一个矩形的图案为止。记下生成的这串字符，这就是后面需要给GitHub配置的公钥。

创建GitHub账号

打开官网用邮箱一步步注册即可，仅有的两个可能遇到的问题:

  • 没想好用户名
  • 确认注册的邮件因为有链接可能会被当作垃圾邮件。

配置GitHub中的公钥

在GitHub账号设置中找到添加SSH key的地方，即 Settings -> SSH and GPG keys -> New SSH key 将前述步骤中生成的公钥贴在此处

创建仓库(repository)

单机右上角(用户头像旁边)的“+”号即可创建New repository。
Owner 处为用户名，后面的 Repository name 需要严格按照 username.github.io 填写。这样才能保证生成的是 GitHub Pages 页面，而不是其它代码库。

GitHub Pages

创建成功后会自动进入该 repository，进入 setting 找到 Pages，进入后即可看到 GitHub Pages 界面。
这一步骤可能需要一些时间，耐心等待，一般几分钟就会显示站点发布成功。

小小的debug

第一次走到这一步时，此处有一句提醒，由于该 GitHub 仓库是空的，所以无法创建 GitHub Pages 站点。解决方式：

  • 可自己创建一个README文件
  • 粗暴删库重来，建库时选择生成默认README文件

将Hexo部署到GitHub

安装hexo-deployer-git

在博客根目录下运行命令 

$ npm install hexo-deployer-git –save

修改配置文件

_config.yml 是整个博客的配置文件，每项配置参数在Hexo官方文档可找到详细介绍。
使用git能将本地博客文件夹关联到GitHub的远程仓库，并把本地文件push到对应的仓库中。Hexo 提供了一种更简便地方式，只需要在 _config.yml 中作相应的配置，通过命令行命令就可以很方便地把静态文件部署到对应的仓库中。
找到根目录中的 _config.yml 博客配置文件，在deployment配置项下设置如下参数： 

deploy:  
    type: git  
    repo: git@github.com:yourname/yourname.github.io.git  
    branch: master

部署

$ hexo generate #生成本地静态文件，可缩写为hexo g
$ hexo deploy   #部署，可缩写为hexo d

这时回到GitHub仓库, 可以看到网站的静态文件已经上传。

小小的Debug

部署没有报错，但网站没有更新
原因：GitHub Pages默认是从main生成页面，但本地设置部署参数是 branch 一项中填写的是 master
Debug：修改该 repository 设置中 pages 的 source 一项,或将前面提到的修改博客配置文件的 branch 参数为 main

一些有用的命令

hexo clean = hexo c #清除本地缓存，也就是清除public/文件夹和db.json文件
hexo generate = hexo g #将souce文件夹下的Markdown和HTML文件解析到了public文件夹下，并生成了db.json文件
hexo server = hexo s #开启本地调试模式
hexo deploy = hexo d #将本地资源部署到GithubPages

修改主题

选择主题

Hexo的官网上即可找到许多可用主题，或搜索Hexo theme也可以找到。官网中列出的主题直达：https://hexo.io/themes/
找主题除了符合自己的审美之外，也要注意该主题是否一直有人维护。较长时间无人维护的主题可能由于版本问题无法顺利安装使用。

安装主题

本博客选择的主题是Next，安装步骤如下：
将主题clone到theme文件夹下

$ cd blog
$ git clone https://github.com/next-theme/hexo-theme-next themes/next

然后在hexo配置文件中修改themes为next

themes: next

一些小改动

根据next的说明文件，可以在该主题的配置文件中对细节进行修改。
对博客名、描述以及作者等的修改在根目录的配置文件中进行。