Mac 使用 Hexo+Github 搭建个人博客

我是怎么来的？还是简单记录下我的出生吧。我的爸爸是Hexo，它的自我介绍非常清晰，我就不废话啦。我的妈妈是Github Pages，点击即可了解，看过之后发现，其实就算只有妈妈，也是可以有我的。不过有了爸爸，会让我更好的成长。感谢你们！

从上面也了解到，其实我是由“两部分组成的”。下面就分别介绍这两个部分。不会很详细的介绍，只会包括流程。因为在它们各自的官网首页已经有很详细的讲解了。本文大多也是摘抄自官网。

Hexo 静态博客工具的安装

安装Node.js，使用以下命令检查是否安装成功

1 2	node -v // 正常情况下，会有版本号输出 npm -v // npm 是 nodejs 的包管理器，安装 Hexo 需要使用

安装Hexo

完成第一步后，安装 Hexo 就很简单了，终端中输入npm install hexo-cli -g。完成后输入以下命令生成本地页面

hexo init blog  // 初始化博客文件夹 blog，可改为其他
cd blog  // 进入到 blog 文件夹
npm install  // 安装
hexo new 文件名 // 创建新的文章，文章会以 markdown 格式保存在 blog/source/_post 中
hexo server  // 启动本地服务，这步执行完成之后，就可以在本地预览页面了，链接会在终端中输出，按住 ctrl 就可以点击查看了

经过以上两个步骤就完成了 Hexo 的安装，已经可以在本地浏览生成的页面了。下面将介绍如何配置 Github Pages ，以便将我们的页面上传到 Github 。

Github Pages 的配置

Github 当然是依赖 Git 的了，所以要先安装好 Git 工具。

安装 Git

安装完成后终端输入git version，有版本号输出表示安装成功。

配置 Github Pages

首先需要开通 Github，然后是设置 SSH key，如果没有的话。

配置多个 SSH Key

这里简单说下配置多个 SSH Key。比如公司的 Git Lab 仓库与我们的自己的 Github 分别使用不同的配置。

1. 生成新的密钥 ssh-keygen -t rsa -C email // 将 email 替换为你要使用的 email，回车后输入保存的文件名，如 id_rsa_github

2. 进入.shh 文件夹，创建 config 文件vi config // 生成同时编辑 config 文件

3. 为不同的域配置不同的 SSH key

Host xxx.com // 域名
User email // 所配置的邮件地址
PreferredAuthentications publickey // 密钥类型，固定公钥
IdentityFile ~/.ssh/id_rsa_xxx // key 文件
#-----------------------------------------------------
Host xxx.com
User email
PreferredAuthentications publickey
IdentityFile ~/.ssh/id_rsa_xxx

创建博客仓库

需要注意的是 Repository name，必须为 username.github.io。username 为你的 Github 的用户名。创建完成以后。点击此 Repository 的 Setting，向下滚动，找到 Github Pages，目前 Github 仓库主分支名称已经改了 main，我是习惯性的在创建时将分支名改为了 master。此时如果在项目下新建一个名为 index.html 的文件，就可以通过 https://username.github.io/ 来访问了。

关联 Hexo 与 Github Pages

我们已经分别准备好了 Hexo 与 Github Pages。是时候将它们关联起来了。

配置部署脚本

进入到已经使用 Hexo 初始化好的博客文件夹（假定叫 blog），打开 _config.yml 文件，向下滚动，找到 deploy，加入如下配置，要注意空格必须要有

deploy:
  type: 'git'
  repo: 'git@github.com:username/username.github.io.git' // 也就是平时 clone 仓库时的地址 
  branch: 'master' //  博客所在的分支，据说目前只支持主分支，这个没有做验证

安装 deploy 插件

终端执行 npm install hexo-deployer-git -save 完成后就可以使用 Hexo 进行部署了。以下是几个常用的命令，更多的命令可以通过 hexo help 查看。

hexo clean  // 清除，如果新的改动没有变化，可以试下，通常不需要
hexo g(generate)  // 生成页面
hexo s(server)  // 开启本地服务，可以先在本地预览
hexo d(deploy)  // 发布，成功的话，过一会儿，通常 10 几秒，打开 https://username.github.io/ 就能看到自己写的文章了
hexo g -d  // 组合命令，生成 + 发布

现在已经可以开始写一些东西，并且方便的发布了。如果你想自定义主题，自定义域名，可以接着往下看。

更换主题

找到自己的喜欢的主题，clone 到 blog 文件夹下的 themes 文件夹，并修改 _config.yml 中的 theme 配置。是不是很简单。

配置个性域名

以阿里云为例，点击添加记录，按以下配置添加，把记录值改为你的地址。然后在 Repository 添加一个文件 CNAME ，文件的内容是你的域名。最后在 Repository 的 Setting 中，Github Pages 那里添加你的域名，点击保存。现在已经可以使用你自己的域名来访问站点了。各配置如下图所示

替换 Markdown 插件

hexo 默认的 markdown 插件为 hexo-renderer-marked 不是很给力。所以将它换为更强力的hexo-renderer-markdown-it，至于怎么个强力法，用了才知道。先安利一个非常简介好用的 markdwon 编辑器 typora 。下面简单记录下替换步骤。

1
2
3

cd blog # 进入到 Hexo 主目录
$ npm un hexo-renderer-marked --save  # 卸载原来的
$ npm i hexo-renderer-markdown-it --save  #安装新的

配置，具体的含意可以自行学习

# Markdown-it config
markdown:
  render:
    html: true
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
  plugins:
    - markdown-it-abbr      # 缩写插件
    - markdown-it-footnote  # 脚注插件
    - markdown-it-ins       # 插入插件（下划线插件）
    - markdown-it-sub       # 下标插件
    - markdown-it-sup       # 上标插件
    - markdown-it-emoji     #emoji 插件
    - markdown-it-container # 内容块
    - markdown-it-deflist   #Definition list (<dl>) tag
    - markdown-it-ins       #++inserted++ => <ins>inserted</ins>
    - markdown-it-mark      #<mark> tag
  anchors:                  # 锚
    level: 2                # 最小对哪一级标题生效，对应 H1-H6
    collisionSuffix: 'v'
    permalink: false        # 链接，如果设置为 true，点击后，会将其滚动到页面的最上方，
    permalinkClass: header-anchor
    permalinkSymbol: ¶      # 锚的标记，说的直白点儿，就是你点击这个东西，会发生上面所说的滚动

这里说一下anchors，锚，开始时没搞清楚，还给作者提了个Issues

FAQ

记录使用 hexo 过程中遇到的一些问题，为了保持整个目录的整洁，就不新建文章了。

deploy 后，域名失效

解决方法：当我们使用自定义域名后，其实是生成了一个文件 CNAME，里面记录着我们的域名，当 deploy 后，会使用最新生成的文件替换 github 仓库中的文件，会把 CNAME 文件给搞没。找到问题之后，对症下药就好了，在 source 文件夹下新建一个 CNAME 文件，把我们域名写上就好了。这样每次 deploy 后，这个文件还会有，域名就可以正常使用了。