使用Hexo一步一步搭建github博客

首先看一下最终的效果：
https://stormwy.github.io/

Hexo是基于Nodejs的一个快速简洁高效的博客框架，这篇文章将要介绍如何使用Hexo博客框架、Github Pages免费静态站点托管服务来建立个人在github上的博客站点。本文版本是Hexo 3.2.2。

一、安装相关软件

这一点Hexo官方文档上面写得很清晰了，直接复制下来,稍微补充了一点内容：

安装 Git

• Windows：下载并安装 git.
• Mac：使用 Homebrew, MacPorts 或下载 安装程序 安装。
• Linux (Ubuntu, Debian)：sudo apt-get install git-core
• Linux (Fedora, Red Hat, CentOS)：sudo yum install git-core

安装 Node.js

window下，到官方网站下载nodejs的安装包即可。
Linux下安装 Node.js 的最佳方式是使用 nvm。

cURL:

$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh

Wget:

$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh

安装完成后，重启终端并执行下列命令即可安装 Node.js。

$ nvm install 4

或者您也可以下载 安装程序 来安装。

安装 Hexo

所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。

$ npm install -g hexo-cli

二、使用Hexo建立本地站点

1.初始化及运行

打开命令行cd到某一目录，然后运行下面的命令就可以初始化Hexo站点需要的东西

hexo init <folderName>

我运行的是：hexo inti HexoBlog
等初始化完成后，就可以看到生成了一个名字为HexoBlog的文件夹,打开该文件夹，可以看到Hexo生成的博客框架文件。
可以通过命令行进入该文件夹，运行hexo服务器看看初始化完成的效果：

cd <folderName>hexo server -p 5000  //指定5000端口

通过浏览器访问http://localhost:5000就可以看到hexo默认的页面了。

2.修改配置

hexo的配置文件是站点根目录下的_config.yml，里面可以配置博客的大部分内容
下面是常用配置：

参数 描述 title 网站标题 subtitle 网站副标题 description 网站描述，用于标识网站内容，被搜索引擎收录的简要网站描述。 author 您的名字 language 网站使用的语言,设置为“zh-CN”,主题的语言是在这里设置。 url 网址 root 网站根目录 theme 当前主题名称。值为false时禁用主题 post_asset_folder 启动资源文件夹,用来管理文章的图片等资源文件，建议设置为true deploy 部署部分的设置，请看本文第三节

其他配置具体见官网的配置一节
注意：配置的时候，每一项的key的冒号:后面要留一个空格，不然会报错。

3.写文章

文章创建

首先是先创建一篇新文章
hexo new [layout] <title>
layout是文章布局，title是文章标题。如果不指定layout，则使用默认layout。
例子：
hexo new "使用Hexo一步一步搭建github博客"
运行完成后，将会在博客根目录HexoBlog的\source\_posts目录底下生成使用Hexo一步一步搭建github博客.md文件。
打开这个md文件，可以看到下面的内容

---title: Hexo一步一步搭建github博客date: 2016-07-27 22:38:45tags:---

这上面的内容是文章的配置，详细说明可以见官网Front-matter一节;
我们可以用markdown语法，在默认内容的下面写自己文章的内容即可。

图片插入

图片插入可以使用本地图片或者网络图片，使用网络图片，用markdown语法写入即可，图床可以用这个网站:极简图床,这个图床可以用网站提供的公共空间存储图片，或者上传图片到自己的七牛云储存（免费用户有10G的空间）

当然,用自己本地的图片是最安全的，这就要通过Hexo的资源文件夹实现了。我将官网的资源文件夹使用简单说明一下：
- 设置config.yml的post_asset_folder为true，开启资源文件夹功能

• 通过相对路径标签引用资源，而不是markdown语法引用。
  {\% asset_img 1.png [title] \%}

  上面的“\”要去掉，这里因为是hexo的指令，不能直接显示在文章里，所以这里才加上。

4.发布文章、运行

写好文章后，我们通过下面的命令将文字编译成静态html等资源文件：
hexo generate
运行后，博客根目录下就会生成public站点文件夹，里面是编译生成的文件。这时候，我们可以运行或者重启hexo查看效果

hexo server //这样启动，默认端口为4000  

然后访问http://localhost:4000，就可以看到刚才写的文章了。

三、将Hexo博客站点部署到github Page

Github Page是github提供的静态站点服务，在github创建userName.github.io的仓库，将静态html文件上传到该仓库，就可以通过https://userName.github.io进行访问了，具体设置见：https://pages.github.com/

HexoBlog部署到git我们需要安装hexo-deployer-git插件，在博客HexoBlog根目录运行：
npm install hexo-deployer-git --save
然后修改_config.yml中的deploy配置：

deploy:  type: git  repo: <repository url>  branch: [branch]

参数说明:

参数 描述 type 部署方式（git/heroku/rsync/openshift/ftpsync） repo 库（Repository）地址 branch 分支名称。如果您使用的是 GitHub 或 GitCafe 的话，程序会尝试自动检测。

设置好部署参数之后，通过hexo的部署指令，就可以一键部署了：

hexo deploy

实际上，我们也可以手动将public文件夹的内容，上传到userName.github.io，完成部署，这个就不说了。

四、Hexo进阶使用

更换主题

目前本博客用的是屠城9441的博客主题maupassant-hexo

Hexo主题更换很容易，首先到https://hexo.io/themes/ 里面寻找你喜欢的主题，然后进入该主题的链接，里面一般有文章介绍从哪里获取主题文件，或者直接到github里面按照hexo+主题关键字搜索，找到主题关键字之后，git clone下载到本地。然后将maupassant文件夹复制一份到博客根目录的themes里面，最后修改_config.yml的theme值为主题名即可，这里是修改为maupassant。

不过maupassant主题有点特别，还需要依赖hexo-renderer-jade和hexo-renderer-sass，所以还要安装两个插件

npm install hexo-renderer-jade --savenpm install hexo-renderer-sass --save

安装完成后，先清理一遍原来编译的静态资源文件，然后重新生成，最后运行hexo，就可以看到新主题的博客啦。

hexo clean hexo generatehexo server

【参考文档】
https://hexo.io/zh-cn/docs
https://xuanwo.org/2015/03/26/hexo-intor/
https://www.haomwei.com/technology/maupassant-hexo.html