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. 下载安装Node.js

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

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

2.2. 下载安装git

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

2.3. 检查是否安装

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

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. 生成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.2. 找到key

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

如何前往
Finder中前往 -> 前往文件夹… -> 填入/Users/user/.ssh -> enter。打开文件夹后就可以看到id_rsa和id_rsa.pub这两个文件

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

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

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

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

6.4. 检验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搭建技术博客教程【持续更新】