利用 Hexo 和 Github 搭建一个属于自己的个人博客(基础)

写在最前面

博客的搭建有很多种，可以利用第三方平台，也可以自建。比较早的有博客园、CSDN，近几年新兴的也比较多诸如：WordPress、SegmentFault、简书、掘金、知乎专栏、Github Page 等等。

这次我要介绍的就是利用 Github Page 和 Hexo 搭建个人博客的方式。Github Page 是 Github 提供的一种免费的静态网页托管服务（所以想想免费的空间不用也挺浪费的哈哈哈），可以用来托管博客、项目官网等静态网页。支持 Jekyll、Hugo、Hexo 编译静态资源，这次我们的主角就是 Hexo 了，具体的内容下面在文章内介绍。下面就开始吧~

准备工作

Node.js 和 Git 的安装是搭建个人博客的第一步。下面我会详细的介绍如何安装 Node.js 和 Git。

点击查看

首先去Node.js官网，下载 node.js 的安装程序，根据你电脑系统的配置信息，下载对应的安装程序，然后开始进行下面的步骤。

下载好与电脑系统对应的安装程序后，开始安装流程：
1.点击 Next

2.将"I accept the terms in the License Agreement"前面的复选框勾选，同意安装协议，再点 Next，进行下一步操作

3.选择 Node.js 安装程序的安装位置，在这里我以"C:\Program Files\nodejs"为例，点击 Next，进入下一步操作

4.选择安装的模块和功能，这里全部安装，并添加到系统环境变量，继续点击 Next，进入下一步操作

5.这一步可以跳过，这个选项的意思是安装一些编译本地模块的工具，比如 python，C/C++ 等，点击 Next，进入下一步

6.点击"Install"，等待 Node.js 安装完成

7.当看到下图所显示的情况，Node.js 就成功安装完毕

8.验证安装，并测试 Node.js 是否加入环境变量，当出现如下图的情况，Node.js 安装大功告成

如果执行node -v报错的话，那么手动将 Node.js 的安装路径添加到环境变量中，右击点击我的电脑 ——> 属性 ——> 高级系统设置 ——> 环境变量，在系统变量下找到名为 path 的变量名，如下图：

选中 path，或者双击，然后将你 node.js 的安装路径放在 path 变量值的最后面，如果添加之前 path 值最后有英文的分号，则直接将路径添加进去即可，如果没有，先添加分号，然后点击保存，回到桌面，打开cmd（Win+R），执行node -v，看是否成功。

9.设置 npm 的镜像源

# 查看npm的配置
npm config list
# 默认源
npm config set registry https://registry.npmjs.org
# 临时改变镜像源
npm --registry=https://registry.npm.taobao.org
# 永久设置为淘宝镜像源
npm config set registry https://registry.npm.taobao.org
# 另一种方式，编辑 ~/.npmrc 加入下面内容
registry = https://registry.npm.taobao.org

10.设置 npm 的内置路径 ——> 全局模块路径和缓存路径（可选）
如果不改变内置路径也可，除非你的 C 盘空间足够 bigger，这一步可以略过，不改变的话，它的路径在：

此处参考：node 环境变量配置，npm 环境变量配置

● npm 包全局目录：C:/Users/[username]/AppData/Roaming/npm/node_modules
● npm 包全局命令目录：C:/Users/[username]/AppData/Roaming/npm
● npm 实际去找全局命令的目录：C:/Users/[username]/.npmrc文件内容的prefix值
● npm 包全局cache目录：C:/Users/[username]/.npmrc文件内容的cache值
首先在你 Node.js 的安装位置，新建两个文件夹，node_global和node_cache，我的路径是：

D:\Learning\nodejs\node_global
D:\Learning\nodejs\node_cache

然后分别执行的命令就是：

npm config set prefix"D:\Learning\nodejs\node_global"
npm config set cache "D:\Learning\nodejs\node_cache"

然后在配置环境变量，右击我的电脑 ——> 属性 ——> 高级系统设置 ——> 环境变量同样的位置，在用户变量的地方，找到 path 变量进行修改，修改值如下图。然后就大功告成了，Node.js 就安装完毕了。

首先就是去Git官网下载 Git，根据你电脑系统的配置信息，下载对应的安装程序，然后开始进行下面的步骤。

1.下载好 Git 的安装包，开始安装，打开安装包，出现如图的界面，点击 Next

2.选择你要安装的位置，我以 C 盘为例，路径为图中所示，安装到其他位置的话，点击 Browse，选择你要安装的位置，然后点击 Next，进入下一步

3.选择你是否创建桌面快捷放方式，其他默认即可，点击 Next，进入下一步

4.是否将 Git 快捷方式的目录加入开是菜单栏

5.这个是选择文本编辑器的方式，默认是 Vim，也可以选择其他的方式，自主选择，在这里我选择的 Vim 默认方式。选择好文本编辑器的方式后，点击 Next，进入下一个流程

6.选择安装 Git 时对环境变量 PATH 的影响，第一种影响较小，第三种会影响到 Windows 的自带工具，默认勾选中间项，建议不要修改，直接点击 Next 继续安装

7.选择 Git 在使用 HTTPS 时使用的库，若无特殊需求，可保持默认选项，点击 Next 继续安装

8.选择提交与拉取记录时，对换行符的处理方式，若无特殊需要，默认选择即可，点击 Next 继续安装

9.选择模拟终端软件（即命令行窗口软件），若无特殊需要，可默认选择，点击 Next 继续安装

10.最新功能的询问，若不想尝试尚未保证稳定性的新功能，默认不勾选，点击 Install 即可完成安装

11.安装完成

12.回到桌面，点击鼠标右键，会出现两个选项Git GUI Here和Git Bash Here，在打开 Cmd(Win+R)，分别输入git和git --version，如果出现如下图的情况，即安装成功

1.打开Github官网首页，点击右上角的Sign Up，然后在出现的页面上填写你的相关信息，进行注册

2.验证完成后，点击 Next：Select a plan，会出现如上图的验证界面，同理，只需要将其中的动物调整为正向显示即可。接着会出现下图的界面，选择 Free，下方的两个选项可选可不选，点击 Continue 继续

3.这时 Github 会给你发一封邮件，验证一下即可，验证过后才可以创建库

4.验证完成后，开始创建库，如下图所示，仓库名创建格式必须为：<用户名>.github.io，Description为描述仓库，自定义写，填写必要的描述，也可不填。勾选Initialize this repository with a README点击Creat repository进行创建

然后就会出现如图所示的界面，即仓库创建成功！

5.我们来测试一下，点击Create new file，出现如下界面，然后命名文件名为index.html，在填写如图的内容，再点击Commit new file，即创建成功，然后打开一个新的网页，输入网址https://<你的用户名>.github.io，即可以看见一个新的网页，其中的内容就是你写的内容。至此，Github 的注册以及 Github Pages 已经创建完成了

1.在桌面点击鼠标右键，点击Git Bash Here，会出现一个界面如下图所示

2.然后分别输入下面的两个命令，并回车

$ git config --global user.name "此处填写你注册时的用户名"
$ git config --global user.email "此处填写你注册时的邮箱"
# 一般只要不报错，可以跳过下面寻找.gitconfig文件

3.然后找到.gitconfig文件，文件存放位置在C:/Users/[username]/.gitconfig（未找到的话，请开启显示隐藏文件的功能），用编辑器打开，看到如下图所示的内容，即配置成功

本地安装 hexo 静态博客框架以及发布到 Github Pages

1.首先选择一个磁盘作为你博客文件的存放位置，然后新建一个文件夹，比如名为 MyBlog 的文件夹，创建完后，先不要点进去，在此处点击鼠标右键，选择Git Bash Here，然后依次输入如下命令

# hexo框架的安装
$ npm install -g hexo-cli
# 等上一个命令完成后，在输入下面的命令
$ hexo init <新建文件夹的名称>  #初始化文件夹
$ cd <新建文件夹的名称>
$ npm install  # 安装博客所需要的依赖文件

2.等待运行完成，此时文件夹中多了许多文件

注意：后续的命令均需要在站点目录下（即文件夹内）使用 Git Bash 运行

此时 Hexo 框架的本地搭建已经完成了。我们来运行一下看看，命令行依次输入以下命令

$ hexo g
$ hexo s

3.浏览器中打开http://locakhost:4000或者127.0.0.1:4000，可以看到一个网页，说明 Hexo 博客已经成功在本地运行

本地博客发布到 Github Pages

之前的步骤中，我们已经完成了对 Github 账户的注册以及 Github Pages 的创建，接下来是将本地博客发布至 Github Pages。

1.首先需要安装发布的插件，在站点目录下执行下面的命令，也就是创建的博客目录下

$ npm install hexo-deployer-git --save

2.紧接着，将本地目录与 GitHub 关联起来，输入下面的命令行

$ ssh-keygen -t rsa -C "你的邮箱地址"

输入后一直回车，然后在C:/Users/[username]目录下找到名为.ssh的文件夹，文件夹内会有两个文件，一个id_rsa.pub一个id_rsa，用文本编辑器打开id_rsa.pub，复制里面的的内容。然后打开 Github，点击右上角的头像Settings选择SSH and GPG keys

点击New SSH key将之前复制的内容粘帖到Key的框中。上面的Title可以随意，点击Add SSH key完成添加。

然后回到 Git 的命令行界面，测试一下是否与 GitHub 连接成功。输入下面的命令行

$ ssh -T git@github.com

点击回车，然后会出现一个询问内容，输入yes，回车，会出现一段内容Hi <account name>! You've successfully authenticated, but GitHub doesnot provide shell access.。说明连接成功。此处这个<account name>应该是你 Github 的用户名。

3.进入博客站点目录，用文本编辑器打开_config.yml，这个_config.yml是博客的配置文件，在以后的博客修改，如个性化修改，博客SEO优化等都会使用到，修改如下几个地方

title: 你的博客名
subtitle: 博客的副标题，有些主题支持
description: 博客描述
keywords: 博客关键词
author: 作者，在文章中显示
language: 博客语言语种   
timezone: 时区

4.在该文件最底部，有一个 deploy，在 deploy 下面添加一个 repo 项，一个 branch 项，填入如下代码

deploy
  type: git
  repo: git@github.com:Github用户名/github用户名.github.io.git  
  //也可使用https地址，如：https://github.com/Github用户名/Github用户名.github.io.git			
branch: master

5.最后就是生成页面，并发布至 Github Pages，执行如下命令

# Hexo会根据配置文件渲染出一套静态页面
$ hexo g
# 将上一步渲染出的一系列文件上传至至Github Pages
$ hexo d
# 也可以直接输入此命令，直接完成渲染和上传
$ hexo g -d

上传完成后，在浏览器中打开https://<用户名>.github.io，查看上传的网页。如果页面变成了之前本地调试时的样子，说明上传以及完成了。没变的话查看一下上传时命令行窗口的信息有没有错误信息，没有的话清除一下浏览器缓存试试。

网页部署阶段可能会出现的 bug

报错ERROR Deployer not found: git

1.git 用户名和邮箱配置错误

$ git config --global user.name%"username"
$ git config --global user.email%"username@example.com"

这里的%，在正确的格式中是一个空格，如果你之前没有打空格，那么邮箱和用户名根本就没有记录进去。回退到这一步重新进行。

2.hexo-deployer-git插件没有安装正确，重新在[Blogroot]路径下右键 ——> Git Bash Here，执行：

$ npm install hexo-deployer-git –save
# 重新安装之后，再尝试提交
$ hexo d