hexo+Github部署教程（防踩坑）_github hexo

背景

• 什么是hexo？

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他标记语言）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

• 为什么使用hexo？

  • hexo提供了丰富的主题 。
  • 相比自己去开发搭建一个博客系统，而且还要自己购买域名和服务器，搭建博客成本太高。除了购买成本，还需要花时间定期维护它，所以，选择免费且高速的hexo再好不过了。
  • 搭建快速方便，与GitHub搭配，可以便捷的部署我们的博客网站（主要是不需要自己去买服务器）

hexo安装与部署

以下教程以Ubuntu为例，具体请参考hexo文档。

前提

• 安装git

  $ sudo apt-get install git-core

• 安装Node.js及npm

  $ sudo apt install nodejs npm

准备一个文件夹用来安装hexo并进入，便于操作管理：

$ mkdir hexo
$ cd hexo
1
2

• 安装hexo

  $ npm install hexo
• 将 Hexo 所在的目录下的 node_modules 添加到环境变量之中：
  $echo 'PATH="$PATH:./node_modules/.bin"' >> ~/.profile

本地建站

• 在hexo目录下将所需文件创建在blog文件夹中，便于操作管理

  $ hexo init blog
$ cd blog
$ npm install
  完成后blog文件夹的目录如下：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|├── _drafts
|└── _posts
└── themes

• 更改_config.yml文件

网站的配置信息，可以在此配置大部分的参数。

网站

网址

网站存放在子目录

如果您的网站存放在子目录中，例如http://example.com/blog，则请将您的 url 设为 http://example.com/blog并把root设为/blog/。

例如：

# 比如，一个页面的永久链接是 http://example.com/foo/bar/index.html
pretty_urls:
  trailing_index: false
# 此时页面的永久链接会变为 http://example.com/foo/bar/
1
2
3
4

目录

一般不用改

例如：

skip_render: "mypage/**/*"
# 将会直接将 `source/mypage/index.html` 和 `source/mypage/code.js` 不做改动地输出到 'public' 目录
# 你也可以用这种方法来跳过对指定文章文件的渲染
skip_render: "_posts/test-post.md"
# 这将会忽略对 'test-post.md' 的渲染
1
2
3
4
5

文章

一般不用改

相对地址

默认情况下，Hexo 生成的超链接都是绝对地址。例如，如果您的网站域名为example.com，您有一篇文章名为hello，那么绝对链接可能像这样：http://example.com/hello.html，它是绝对于域名的。相对链接像这样：/hello.html，也就是说，无论用什么域名访问该站点，都没有关系，这在进行反向代理时可能用到。通常情况下，建议使用绝对地址。

分类 & 标签

一般不用改

日期 / 时间格式

Hexo 使用Moment.js来解析和显示时间。
一般不用改

updated_option
updated_option控制了当 Front Matter 中没有指定updated时，updated如何取值：

• mtime: 使用文件的最后修改时间。这是从 Hexo 3.0.0 开始的默认行为。
• date: 使用date作为updated的值。可被用于 Git 工作流之中，因为使用 Git 管理站点时，文件的最后修改日期常常会发生改变
• empty: 直接删除updated。使用这一选项可能会导致大部分主题和插件无法正常工作。
  use_date_for_updated选项已经被废弃，将会在下个重大版本发布时去除。请改为使用 updated_option: 'date'。

分页

例如：

pagination_dir: 'page'
# http://example.com/page/2
  
pagination_dir: 'awesome-page'
# http://example.com/awesome-page/2
1
2
3
4
5

扩展

包括或不包括目录和文件

在 Hexo 配置文件中，通过设置 include/exclude 可以让 Hexo 进行处理或忽略某些目录和文件夹。你可以使用glob 表达式对目录和文件进行匹配。
include和exclude选项只会应用到source/，而ignore选项会应用到所有文件夹。

例如：

# 处理或不处理目录或文件
include:
  - ".nojekyll"
  # 处理 'source/css/_typing.css'
  - "css/_typing.css"
  # 处理 'source/_css/' 中的任何文件，但不包括子目录及其其中的文件。
  - "_css/*"
  # 处理 'source/_css/' 中的任何文件和子目录下的任何文件
  - "_css/**/*"

exclude:
  # 不处理 'source/js/test.js'
  - "js/test.js"
  # 不处理 'source/js/' 中的文件、但包括子目录下的所有目录和文件
  - "js/*"
  # 不处理 'source/js/' 中的文件和子目录下的任何文件
  - "js/**/*"
  # 不处理 'source/js/' 目录下的所有文件名以 'test' 开头的文件，但包括其它文件和子目录下的单文件
  - "js/test*"
  # 不处理 'source/js/' 及其子目录中任何以 'test' 开头的文件
  - "js/**/test*"
  # 不要用 exclude 来忽略 'source/_posts/' 中的文件。你应该使用 'skip_render'，或者在要忽略的文件的文件名之前加一个下划线 '_'
  # 在这里配置一个 - "_posts/hello-world.md" 是没有用的。

ignore:
  # 忽略任何一个名叫 'foo' 的文件夹
  - "**/foo"
  # 只忽略 'themes/' 下的 'foo' 文件夹
  - "**/themes/*/foo"
  # 对 'themes/' 目录下的每个文件夹中忽略名叫 'foo' 的子文件夹
  - "**/themes/**/foo"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

使用代替配置文件

可以在 hexo-cli 中使用--config参数来指定自定义配置文件的路径。你可以使用一个 YAML 或 JSON 文件的路径，也可以使用逗号分隔（无空格）的多个 YAML 或 JSON 文件的路径。例如：

# 用 'custom.yml' 代替 '_config.yml'
$ hexo server --config custom.yml

# 使用 'custom.yml' 和 'custom2.json'，优先使用 'custom3.yml'，然后是 'custom2.json'
$ hexo generate --config custom.yml,custom2.json,custom3.yml
1
2
3
4
5

当你指定了多个配置文件以后，Hexo 会按顺序将这部分配置文件合并成一个 _multiconfig.yml。如果遇到重复的配置，排在后面的文件的配置会覆盖排在前面的文件的配置。这个原则适用于任意数量、任意深度的 YAML 和 JSON 文件。

例如，使用--options指定了两个自定义配置文件：
$ hexo generate --config custom.yml,custom2.json

如果custom.yml中指定了foo: bar，在custom2.json中指定了"foo": "dinosaur"，那么在_multiconfig.yml中你会得到foo: dinosaur。

更多信息请参考配置文档

有关主题教程请等待更新

接下里可以在blog目录下使用以下命令在localhost查看自己的博客配置情况：

$ hexo clean（清除缓存）
$ hexo g（生成静态文件）
$ hexo s（启动本地服务）（ctrl + c 即可结束本地运行）
1
2
3

准备好了就开始学习如何部署吧！

• 登录GitHub账号（这个就不多说了 GitHub传送门）

• 新建一个仓库（仓库名称格式：GitHub用户名.github.io)

• 在blog目录下配置GitHub信息：

  $ git config --global user.name "your github name here"
$ git config --global user.email "your email for github here"

• 在blog目录下创建ssh：

  $ ssh-keygen -t rsa -C "your email for github here"

• 找到给出的ssh密钥文件.ssh/id_rsa和.ssh/id_rsa.pub

• 在GitHub的Setting里面，找到SSH keys，把id_rsa.pub里面的内容全部复制到key中，title随便即可

• 在之前讲到的_config,yml中进行编辑，拉到最底部的deploy:进行编辑：

  deploy:
    type: git
    repo: git@github.com:your github name/your github name.github.io.git
    branch: master
  1
  2
  3
  4

• 再拉到前面，找到网址配置，在url:后进行编辑：（下面的网址就是你博客的访问地址，部署好后就可以访问了）

  url: https://your github name.github.io
  1

• 在blog目录下安装git部署工具

  $ npm install hexo-deployer-git --save
  1

• 在blog目录下输入以下命令开始部署到GitHub

  $ hexo clean
  $ hexo g
  $ hexo d（部署到GitHub）
  1
  2
  3

  稍等部署成功即可访问你的博客链接了

---

That’s all.Thank you very much for reading this blog!
参观我的博客网站 click here!