Hexo+Github快速搭建个人博客

现在搭建个人博客的方式越来越多，而且过程也越来越简单。大体的思路，都是先生成静态网页，然后部署到一个依托网站。

这篇文介绍的是用Hexo生成静态网站，然后部署到Github。

介绍Node和npm

Hexo是用Node写的，所以要安装它所依赖的环境后才能用，先贴一下廖雪峰关于Node和npm关系的介绍

npm是什么东东？npm其实是Node.js的包管理工具（package manager）。

为啥我们需要一个包管理工具呢？因为我们在Node.js上开发时，会用到很多别人写的JavaScript代码。如果我们要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用，非常繁琐。于是一个集中管理的工具应运而生：大家都把自己开发的模块打包后放到npm官网上，如果要使用，直接通过npm安装就可以直接用，不用管代码存在哪，应该从哪下载。

更重要的是，如果我们要使用模块A，而模块A又依赖于模块B，模块B又依赖于模块X和模块Y，npm可以根据依赖关系，把所有依赖的包都下载下来并管理起来。否则，靠我们自己手动管理，肯定既麻烦又容易出错。

安装Node和npm

开始我用brew装了半天，中间总有个包不成功。最后发现直接从Node官网下载安装包最省事，一步到位。https://nodejs.org/en/。

安装完之后检查一下，如果能显示出版本号，就可以了：

$ node -v
v14.17.6

$ npm -v
6.14.15

安装hexo-cli

这个工具是帮助我们初始化个人站的，一行命令就可以生成一个空站点

# For Mac
$ sudo npm install hexo-cli -g

# For Windows
$ npm install hexo-cli -g

装完之后，验证一下是否成功，显示如下内容则表示成功了

$ hexo
Usage: hexo <command>

Commands:
  help     Get help on a command.
  init     Create a new Hexo folder.
  version  Display version information.

初始化个人站

一行命令即可：

# blog就是网站目录的名字，可随意起，合法即可
$ hexo init blog
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
added 242 packages from 207 contributors and audited 243 packages in 13.774s

15 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

INFO  Start blogging with Hexo!

然后，进到blog目录，可以看到，这就是个Node项目。package.json里面是项目所需要的依赖，接下来安装依赖

# 切换到项目根目录
$ cd blog

$ npm install
added 1 package from 5 contributors and audited 243 packages in 2.29s

15 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

执行一下hexo命令，如下显示则说明成功:

$ hexo
INFO  Validating config
Usage: hexo <command>

Commands:
  clean     Remove generated files and cache.
  config    Get or set configurations.
  deploy    Deploy your website.
  generate  Generate static files.
  help      Get help on a command.
  init      Create a new Hexo folder.
  list      List the information of the site
  migrate   Migrate your site from other system to Hexo.
  new       Create a new post.
  publish   Moves a draft post from _drafts to _posts folder.
  render    Render files with renderer plugins.
  server    Start the server.
  version   Display version information.

生成静态网站

看上面的命令介绍，其中这几个最常用：

• generate：就是用来生成静态网站的，一般简写成g
• server：是在本地运行，也就是把静态网站依托在本机上，一般简写成s
• deploy：是把静态站部署到远程，一般简写成d
• new：用来生成一片空文章
• init：用来生成一个空页面
• claan：是删除生成的静态网站

# 生成
$ hexo g

# 运行
$ hexo s
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

看提示可以知道，hexo正在运行，在浏览器中访问本地的4000端口，就可以看到了

部署之Github Token

所谓部署，就是把生成的静态网站的所有文件，推送到远程的Github仓库。所以，Hexo就需要推送的权限。我用的是https协议，还没试过git协议。https的方式就是把带有推送权限的token放到仓库链接里即可。

Github Token：Github首页 -> 右上角个人头像 -> Settings -> Developer settings -> Personal access token -> Generate new token -> 把repo的大权限勾上

默认的过期时间Expiration是30天，可以选长一点，不然过期之后还要更新token。最后就得到了一个以ghp_开头、总长度为40的字符串的token。

部署之远程仓库

在Github上新建个仓库，用来放静态网站的文件。仓库的名字有要求，一般是这样的：*.github.io，
星号可以替换成你自己想要的单词。然后，这整个就是仓库的名字，比如我的仓库地址就是：

https://github.com/oynix/oynix.github.io.git

• 如果，这个星号使用的是Github账号的名字，那么最终的网站地址就是：

  https://oynix.github.io/

• 如果，这个星号使用的是其他的名字，比如blog，那么最终的网站地址就是：

  https://oynix.github.io/blog.github.io/

换句话说，如果想要用最短URL，那么就用Github账号的名字；如果要用到path了，可以给仓库起个短点名字，如就叫blog，那么最终的网站地址就是:

https://oynix.github.io/blog/

当然，如果买了自己的域名，那么这些都不重要。

我本也想买个域名的，一年几十块钱。但国内的环境吧，各种验证、实名、审核等等，将我冷冰冰的劝退了，以至于我觉得github这个就挺好的。

部署之hexo-deployer-git插件

因为要把代码部署到Github，所有需要先安装这个插件。hexo也支持部署到其他地方，各自都有对应的插件。

# 根目录下执行
$ npm install hexo-deployer-git --save
+ hexo-deployer-git@3.0.0
added 1 package from 1 contributor and audited 244 packages in 2.394s

15 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

部署之配置

根目录下有个文件，_config.yml，这个是用来配置网站的一些属性的，使用的yml格式，里面的注释里写了很详细的介绍，大部分应该都可以看得懂。

其中，deploy是用来配置选项的：

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: ''

把前两步生成的token和仓库地址，写进去就可以，github的规则是把token加在前面然后用@连接

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://{your_github_person_access_token}@github.com/{yourname}/{repo_name}.git
  branch: master

2022年4月16日更新
最近更新的比较频繁，发现往仓库推代码很快，但是部署网站却很慢且常常失败，细想了一下意识到，二者使用的协议不一样，前者是git，后者是https，于是便把部署协议换成git了，速度有所一生，格式如下

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

前提是，需要把本级的ssh pub key添加到github账号里，如果不是第一次推代码，那定是早就添加了，github首页右上角的Settings，里面有个SSH and GPC keys，进到这个里面，key在~/.ssh/目录下，有个id_rsa.pub的文件，把里面的内容复制过去即可。

部署

generate之后，会在根目录生成一个名字是.deploy_git的目录，这个目录默认是隐藏的，里面就是生成的静态网站，将会被推送到远程。

# 根目录下执行
$ hexo g
$ hexo d
INFO  Validating config
INFO  Deploying: git
INFO  Setting up Git deployment...
.... 省略 ....

然后，就可以在远程仓库看到所有的网站文件了

启用Github Pages

打开Github，进入刚刚创建的仓库，进入Settings，点进Pages，Branch选master，save一下。

然后，上面就会出现网站地址了：Your site is published at https://oynix.github.io/

首次部署，需要等1分钟左右才能访问，不然看到的就是404。

总结

总的来说，分为3大步：搭建环境、生成静态网站以及推送到远程。按流程来，还是很顺利的。

其中，有个主题还没说，hexo支持很多主题，每个主题都可以配置很多选项，如字体的颜色大小、字间距、行间距、多字体，等等。搭配上这些，就可以让页面在视觉上更加美观、舒服，等有时间再单独写一写这些。