总算下定决心要把博客搭建起来了，之前一直因为想找工作的原因，没有整。现在清闲下来了，再加上最近心态放松了，不太想学习了，所以想着找点东西玩儿。

个人博客的搭建是Hexo与Github配合进行搭建。通过Hexo你可以轻松地通过Markdown编写文章，除了支持Markdown本身的语法之外，还可以通过Hexo提供的标签插件来快速插入特定形式的内容。本文主要分为三个部分，一个是博客搭建准备工作，二是博客界面的修改和装饰，三是使用hexo写博客。

博客搭建准备工作

相关技术平台介绍：

• Hexo是一款基于Node.js的静态博客框架，依赖少、易于安装使用，可以方便的生成静态网页托管在github和heroku上，是搭建博客的首选框架。同时hexo的创建人是台湾人，对中文的支持还是很友好的。
• git是开源的分布式版本控制系统，用于敏捷高效地处理项目，个人博客搭建好了，就需要使用git同步到github上。然后说一下git和github的区别，git是一款免费开源的分布式版本控制系统，而github是用git做版本控制的代码托管平台。

注意点：在Hexo中有两份主要的配置文件，其名称都是_config.yml。其中，一份在站点根目录下，主要包含Hexo本身的配置；另外一份位于主题（就是你下载的theme主题）目录下，这份配置由主题的作者提供，主要用于配置主题相关的选项，前者称为 $ \color{blue}{站点配置文件}$，后者称为$\color{red}{主题配置文件}$

git下载安装以及绑定github账号

可以参看廖雪峰老师的Git教程，然后从Git官网下载Git 。安装好Git之后需要将github账号与其绑定。在菜单中搜索Git Bash，设置user.name和user.email配置信息：

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

生成ssh密钥文件

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

然后直接三次回车就行，默认不需要设置密码

然后找到生成的.ssh的文件中的id_rsa.pub密钥，将内容全部复制。打开Github_Settings_keys页面，新建new SSH Key。Title是标题，任意填就行，将刚刚复制的id_rsa.pub内容复制进去，最后点击Add SSH Key。在Git Bash中检测Github公钥设置是否成功，输入ssh git@github.com

设置github密钥的原因是，通过非对称加密的公钥与私钥来完成加密，公钥放置在github上，私钥放置在自己的电脑上，github要求每次推送代码都是合法用户，所以每次推送都需要输入账号密码验证推送用户是否是合法用户，为了省去每次输入密码的步骤，采用了ssh，当你推送的时候，git就会匹配你的私钥跟github上面的公钥是否是配对，如果配对就说明你是合法用户。

安装Node.js

hexo是基于Node.js，Node.js的下载地址 ，选择合适的下载安装即可。

安装hexo

hexo是个人博客网站的框架，这里需要先新建一个文件夹（文件夹命名最好是英文，不然容易出现不可预知的错误）。hexo框架和以后发布的网页都在这个文件夹中，创建好这个文件夹，然后进入，右键使用Git Bash Here进行hexo的安装。在命令行里面输入下面五条语句

• npm install -g hexo-cli
• hexo init
• nmp install
• hexo generate
• hexo server

第一条语句用来安装hexo（安装完之后，打开刚才新建的文件夹），在文件夹中使用Git Bash Here输入第二条命令，用来自动在文件夹中下载搭建网站需要的文件。第三条语句用来安装依赖包，第四条语句用来生成静态文件。第五条语句用来启动本地服务器。

默认情况下，就可以通过访问http://localhost:4000/，可以看到本地建立的博客，但是要建立一个在线博客还需要将github和本地博客进行连接。

创建github repository远程仓库

创建也比较简单，但是这个地方有一个坑需要注意，稍后来讲。建立一个username.github.io名字类型的仓库（这里需要$\mathrm{注}\mathrm{意}username\mathrm{是}\mathrm{你}github\mathrm{的}\mathrm{用}\mathrm{户}\mathrm{名}\mathrm{，}\mathrm{必}\mathrm{须}\mathrm{一}\mathrm{致}$），仓库建立好之后，需要在仓库的Setting中找到$\textcolor{red}{}$ $\textcolor{red}{Github Page中的Source，将其修改为master branch}$ 。这些解决方案主要来自于hexo搭建Github博客上传后，网页显示404问题解决方案

部署本地文件到github

远程仓库和本地仓库都创建好了，然后就是建立将本地代码提交远程仓库的路径，用于连接本地仓库和远程仓库。需要的操作是：打开之前建立好的hexo文件夹，然后在里面找到_config.yml文件，现在只需要更改文件最下面的三行代码。在最下面更改原先的代码为：

deploy:type: gitrepository: http://github.com/username/username.github.io.gitbranch: master

需要$\textcolor{red}{注意}$的是：

• 每一个: 之后必须要有空格
• 注意第二个username之后的后缀
• branch之后跟的master的原因是之前咱们更改了Github Page的Source来源

配置好之后执行：

$ hexo generate (或者输入 hexo g)
$ hexo deploy (或者输入 hexo d)

至此，博客搭建算是完成了，而且已经发布到github上了，别人也可以访问到了，在浏览器上访问http:\\username.github.io就可以看到自己的博客。

建议：

• 在每次部署github之后，可能要过一会才能显示最新的页面，也就是说输入完hexo deploty 之后，建议一开始调试页面的时候在本地服务器上操作，可以节省时间

• 每次在部署之前最好先clean一下

  $ hexo clean
  $ hexo generate
  $ hexo deploy
  

博客界面的修改和装饰

在网上有许多很好看的Hexo主题，大家可以到这个知乎问题里面自行挑选。Hexo的主题都是放在github上的。Hexo的主题安装也非常简单，只要将主题文件拷贝到站点目录的themes目录下，然后修改配置文件就行了。

下载主题

在git终端窗口下，定位到Hexo站点目录下（也就是你之前建立的个人博客文件夹下），这里比如下载Next主题

$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

如果你对Git不太熟悉，可以在线阅读《Pro Git》进行学习。

启用主题

下载完毕之后，打开站点配置文件 (_config.yml)，找到theme字段，并将其值改为next（或者是你下载下来的主题的文件夹名字）

然后验证主题更换之前，需要使用hexo clean清除hexo的缓存。

主题设定

主题设定，在许多主题的手册上都有教程，大家可以看Next的这个教程更改自己需要的效果，包括设置Scheme，语言，菜单，侧栏，头像，昵称，站点描述以及集成常用的第三方服务。

使用hexo写博客

新建文档以及编辑

在个人博客的文件夹里面打开Git 终端窗口，执行下面的命令

$ hexo new myfirstblog

执行了上述命令在./hexo/source/_posts 路径下新建一个 myfirstblog.md的文件。打开这个文件，你会看到

---
title: myfirstblog.md
date: 2018-10-16 18:11:25
tags:
---

这些直接生成的内容，是用来设置Markdown文档在被解析为静态网页文件时的相关配置，其中tags下面可以添加相关的文章标签。比如我给这篇文章贴上技术 的标签

---
title: myfirstblog.md
date: 2018-10-16 18:11:25
tags:- 技术
---

除了tags这个参数可以设置，我们还可以对文章进行分类。使用categories 给文章分类（相当于给文章新建一个文件夹进行分类设置），这个和tags不一样。

生成文件的时候需要按照下面的命令将markdown文档生成相应的静态文件。

$ hexo clean
$ hexo generate

遇到的坑

• 标签，分类，主页这些，在主题配置文件中需要按照这样的格式来写（不过准确来说，应该按照你当时所在版本的格式要求来写）,开始我看的网上的写法都是这样写的tags: /tags没有后面的那个斜线，然而！！！，那就是错的，必须要加斜线。我后来总结了，应该是版本变动的原因，所以按照下载到的版本来写。

  menu:home: /    categories: /categories/ about: /about/    archives: /archives/ tags: /tags/ #sitemap: /sitemap.xml#commonweal: /404/
  

参考文献：

Next官方使用文档

Hexo+Github Page搭建个人博客

Hexo教程：（三）使用Hexo写博客