Hexo-Github-Pages搭建个人独立博客

搭建步骤：

1. 安装Node.js
2. 安装Git
3. 安装Hexo
4. 建站
5. 设置主题
6. 设置Github Pages
7. 部署Hexo到Github Pages

安装前提

安装 Hexo 相当简单。然而在安装前，先必须检查电脑中是否已安装下列应用程序：

• Node.js
• Git

如果电脑中已经安装上述必备程序，那么恭喜！接下来只需要使用 npm 即可完成 Hexo 的安装。

$ npm install -g hexo-cli

安装 Node.js

安装 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 stable

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

安装 Git

• Mac：使用 Homebrew, MacPorts ：brew install git;或下载 安装程序 安装。

安装 Hexo

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

$ npm install -g hexo-cli

建站

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

$ hexo init <folder>
$ cd <folder>
$ npm install

新建完成后，指定文件夹的目录如下：

_config.yml : 网站的 配置 信息，您可以在此配置大部分的参数。

package.json : 应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，您可以自由移除。

scaffolds: 模版 文件夹。当新建文章时，Hexo 会根据 scaffold 来建立文件。Hexo的模板是指在新建的markdown文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。

source: 资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

themes :主题 文件夹。Hexo 会根据主题来生成静态页面。

主题设置

主题设置以Next主题为例，参考Next官方文档：[Next官网]http://theme-next.iissnan.com/getting-started.html

在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。 其中，一份位于站点根目录下，主要包含 Hexo 本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。

为了描述方便，在以下说明中，将前者称为 站点配置文件， 后者称为 主题配置文件。

安装 NexT

下载主题：

1. 前往 NexT 版本 发布页面。

2. 进行下载。

设置主题：参考官网文档，根据自己喜好进行配置，在此就不赘述啦~

本地预览：

$ hexo c # 或者hexo clean 清除缓存
$ hexo g # 或者hexo generate 生成静态文件，会在当前目录下生成一个新的叫做public的文件夹
$ hexo s # 或者hexo server，可以在http://localhost:4000/ 启动本地web服务，用于博客的预览

打开网址http://localhost:4000/，看到如下页面，说明hexo已经部署成功了，通过control+c停止本地预览。

新建文章：在命令行中执行

hexo new "title"

此时，文件夹里便有了title.md 文件。

hexo generate  #生成更改
hexo server    #启用本地预览
hexo deploy    #将生成的更改部署到码云或者GitHub上

注意：

• 部署到GitHub时，可能因为网速等原因，需要多次运行 hexo deploy ；有时候可以运行 hexo clean 后在运行上述代码。

• 推荐一款好用的Markdown的编辑器Typora。

Github Pages设置

步骤：

• 申请GitHub账号

• 在Github上创建名字为XXX.github.io的项目，XXX一定要为自己的github用户名。

• 设置GitHub page

在项目“Setting”中设置开启GitHub page，设置如下图，设置成功之后，可以看到上方实现你的站点发布地址。

部署Hexo到Github Pages

• 打开站点配置文件，将其中的type设置为git

deploy:
type: git
repository: https://github.com/sunxyy/sunxyy.github.io.git
branch: master

• 运行：npm install hexo-deployer-git –save 安装自动部署到GitHub的插件
• 运行：hexo g（本地生成静态文件，hexo generate缩写）
• 运行：hexo d（将本地静态文件推送至Github，hexo deploy缩写）

此时，打开浏览器，访问https://sunxyy.github.io/

小提示：

在Hexo框架下如何给博客插入本地图片?
- 在source下建立一个与博文_posts同级别的文件夹 images,
- 将图片放入。路片路径形如：/hexo/source/images/myImg.png
- 在博客中插入，要使用相对路径，应写为 /images/myImg.png

markdown中插入图片语法栗子：
![图片注释](/images/myImg.png “图片标题”)
注：在markdown编辑器中无法通过该相对路径预览图片，这种方法无法指定图片的尺寸与对齐方式。