Hexo博客搭建（1）：Mac端使用Hexo+GitHub Pages搭建免费个人博客

自己创建博客的过程整理，供日后查阅。本人Mac端，使用Hexo和GitHub搭建的博客。一步一步操作就可以。

废话不多说了，下面开始。

1. 基本介绍

• 选择哪种方案搭建博客

  • 参考这篇文章，免费搭建个人博客的几种高效方案，最终选定hexo+Github的方式。

• 关于Github Page

  • Github Page 是 Github 提供的一种免费的静态网页托管服务，可以用来托管博客、项目官网等静态网页。支持 Jekyll、Hugo、Hexo 编译静态资源。

• 关于Hexo

  • Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

2. 环境配置：安装Node.js和git

2.1. 安装brew

安装brew，之后可以使用 HomeBrew 安装各类软件

2.1.1. 方法1

终端中输入以下命令

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

若GitHub无法连接，可以使用HomeBrew国内源，比如清华镜像（可自行百度）。

git clone --depth=1 https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/install.git brew-install
/bin/bash brew-install/install.sh
rm -rf brew-install

2.1.2. 方法2

在 Homebrew GitHub项目 中下载安装包。

2.1.3. 安装brew前确保Xcode Command Line Tool安装

若电脑未安装，则报错如下。

终端中输入以下命令安装 Xcode Command Line Tool。

xcode-select --install

2.2. 下载安装Node.js

Hexo 是基于 Node.js 驱动的一款博客框架，所以需安装node。

2.2.1. 方法1

终端中输入以下命令

brew install node

2.2.2. 方法2

前往 Node.js官网 下载软件安装。

2.3. 下载安装git

2.3.1. 方法1

终端中输入以下命令

brew install git

2.3.2. 方法2

前往 git官网 下载软件安装。

2.4. 检查是否安装

在命令行中输入相应命令验证是否成功，如果成功会有相应的版本号。

node -v
git version
npm -v

3. 使用npm安装Hexo

3.1. 安装Hexo

终端中输入命令

sudo npm install -g hexo-cli

hexo-cli：CLI就是命令行接口的意思，Command Line Interface。会安装Hexo和hexo的一些命令，也就是说可以使用命令行操作hexo

输入管理员密码（Mac登录密码）即开始安装

注意坑：Hexo官网上的安装命令是npm install -g hexo-cli，安装时不要忘记前面加上sudo，否则会因为权限问题报错。可能的错误如下:

根据报错信息的最后一行，使用sudo命令root执行即可。

3.2. 本地初始化操作

• 执行hexo init命令，复制文件到本地

hexo init Hexo_Blog

如果要指定上层文件夹（默认user）位置，cd 到你想安装的目录。

CD方法：
输入cd+空格
将想要定位的文件夹拖进终端，将会自动填充文件路径，再点击回车

• 会在user下建立一个Hexo_Blog文件夹，这个文件夹名称按照自己喜好在命令行里自定义。hexo会复制对应的文件到本地Hexo_Blog文件夹下。

- 安装完的目录
    - .
    ├── .github
    ├── node_modules
    ├── scaffolds # 模版文件夹
    ├── source  # 资源文件夹，除 _posts 文件，其他以下划线_开头的文件或者文件夹不会被编译打包到public文件夹
    |   └── _posts # 文章Markdowm文件 
    └── themes  # 主题文件夹
    |   └── landscape  # 默认的博客主题
    ├── .gitignore # 限定在提交的时候哪些文件可以忽略
    ├── package-lock.json
    ├── package.json # 说明使用哪些包
    ├── _config.landscape.yml
    ├── _config.yml # 网站的配置参数和信息。
    

这些文件哪儿来的。这就是要先安装git的原因，hexo的github有个叫hexo-starter的仓库，这里面有所有的hexo包文件

3.3. 安装npm

cd到“Hexo_Blog”文件夹下，执行命令

npm install

3.4. 执行下述命令生成本地网页文件并开启服务器：

hexo g 或 hexo generate 生成静态文件
hexo s 或者 hexo server 在服务器上运行

此时，浏览器中打开网址 http://localhost:4000 ，如果没有问题，就能看到如下页面：

上图中是Hexo默认主题，后续可以修改，参考我的博客文章：

3.5. 初次写作文章

control+C,暂时关闭服务器，回到命令行输入界面

输入命令行

hexo new "My First Post"

source/_posts/的本地文件夹下会生成My-First-Post.md文件，可以打开编辑保存。注意双引号要使用英文双引号，否则无效。

该md文件在自动生成时会带有一些属性：

title: 定义了博文的标题
date: 定义了创作博文的时间
tags: 定义了博文的标签

除了这个三个属性以外我们还可以扩展一些属性：
update: 定义了最后修改的时间
comments: 定义能否评论此博文(默认为true)
categories: 定义了博文的分类

网页效果如下。

4. 本地博客关联部署到GitHub上

4.1. 创建GitHub仓库

4.1.1. 注册登录GitHub

点击打开 GitHub，注册登录

4.1.2. GitHub创建个人仓库

用于存放构建后的网站文件。

点击右上角加号，选择New repository，或者直接点击 仓库新建页 创建一个公开仓库

• Repository name填写用户名.github.io

注：Github 仅能使用一个同名仓库的代码托管一个静态站点，所以仓库名必须是“用户名.github.io”，其他名称无效。
用户名即setting → Account中的username

• 选择public，勾选初始化readme
• 创建成功后，以后你的博客所有代码都可以放在这个仓库里。

4.2. 本地博客代码上传GitHub

4.2.1. 修改配置

编辑自己创建的本地博客文件夹中的_config.yml中的deploy节点

终端cd到Hexo_Blog文件夹下，使用命令打开_config.yml文件。也可以在本地使用编辑器软件直接打开文件。

vim _config.yml

修改配置如下：

我是使用sublime编辑保存的，或者用其他文本编辑器也可以。

拉到文件末尾，填上如下配置。

deploy:
  type: 'git'
  repository: https://github.com/用户名/仓库名.git
  branch: master

deploy:
  type: 'git'
  repository: git@github.com:用户名/仓库名.git
  branch: master

注意：repo这一行，若没有配置SSH Key，使用https形式的地址，配置了使用下面那一种。注意type、repository、branch后均有空格。

4.2.2. 安装部署插件 hexo-deployer-git

npm install hexo-deployer-git --save

若不执行这个命令安装部署插件，执行hexo d就会报错

ERROR Deployer not found: git。

4.2.3. 生成静态文件并上传到服务器

使用命令：（cd到博客的对应文件夹路径下）

hexo g 或 hexo generate 生成静态文件
hexo d 或 hexo deploy 将网站部署到服务器上

或 hexo g -d

若执行hexo g出错则执行npm install hexo --save，若执行hexo d出错（即2.2可能出现的错误）则执行npm install hexo-deployer-git --save。错误修正后再次执行hexo g和hexo d上传到服务器。

4.2.4. 填写username和password

之后终端会显示下列代码，依序输入用户名，点击enter，输入密码，enter即可。

Username for '[https://github.com](https://github.com/)':
Password for '[https://Pamarus@github.com](https://Pamarus@github.com/)':

deploy成功后，便可通过 https://pamarus.github.io （你的GitHun博客域名）访问博客，看到的内容和 http://localhost:4000 相同了。如下图（浏览器中域名）

5. 博客写作

• 终端内cd到博客目录，依次输入命令：

hexo new "My Second Post"
hexo g
hexo d

• 刷新网页，看见第二篇文章了。

• 也可以在本地source/_posts/的文件夹下自己创建md文件。再执行hexo g和hexo d即可。

此时本地博客内容便已关联到GitHub之中，本地博客改变之后，通过hexo g和hexo d便可更新到GitHub之中，通过 https://pamarus.github.io 访问便可看到更新内容。

部署前最好能先执行一下 hexo clean 命令，清除缓存文件 (db.json) 和已生成的静态文件 (public)。在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。

6. 配置 SSH key

这一步不是必须的，所以我放在后面了。配置SSH Key的话之后每次更新博客就不用都输入用户名和密码，可以方便一些。

为什么要配置这个呢？因为提交代码肯定要拥有你的github权限才可以，但是直接使用用户名和密码太不安全了，也很麻烦，所以我们使用SSH key来解决本地和服务器的连接问题。

6.1. 配置用户名和邮箱

配置用户名和邮箱是提交代码时的必要步骤。打开终端，输入以下命令。

git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"

6.2. 生成SSH key

• 终端中输入命令：

ssh-keygen -t rsa -C "你的GitHub注册邮箱"

• 按下enter，让你输入文件名，直接enter会创建使用默认文件名的文件（推荐使用默认文件名），然后会提示你输入两次密码，可以为空。两次enter之后生成key

Your identification has been saved in /Users/user/.ssh/id_rsa.
Your public key has been saved in /Users/user/.ssh/id_rsa.pub.
The key fingerprint is: **********
The Key's randomart image is:
**************

6.3. 找到key

按照上面生成的，mac下前往文件夹/Users/user/.ssh

如何前往
Finder中前往 -> 前往文件夹… -> 填入/Users/user/.ssh -> enter。打开文件夹后就可以看到id_rsa和id_rsa.pub这两个文件
注意将user替换为你的电脑用户名称

打开id_rsa.pub文件，ssh key便在这个文件里

6.4. Github 上添加刚刚生成的ssh key

将key复制到GitHub的Add ssh key中。路径：GitHub -> Settings -> SSH and GPG keys -> add SSH key。

Title里填写任意标题，将复制的内容粘贴到key中，点击Add key完成添加。

6.5. 检验SSH Key是否配置成功

终端输入命令：

ssh -T git@github.com

出现：

Are you sure you want to continue connecting (yes/no)?

输入yes，enter返回：

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

就说明你的SSHKey配置成功了。

7. 致谢

安装过程中其他问题见其他文章。

Mac+Hexo+GitHub博客搭建教程

超详细Hexo+Github Page搭建技术博客教程【持续更新】