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

背景

• 什么是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

• 安装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文件

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

网站

参数	描述
title	网站标题
subtitle	网站副标题
description	网站描述
keywords	网站的关键词。支持多个关键词。
author	你的名字
language	网站使用的语言。对于简体中文用户来说，使用不同的主题可能需要设置成不同的值，请参考你的主题的文档自行设置，常见的有 zh-Hans和 zh-CN。
timezone	网站时区。Hexo 默认使用你电脑的时区。请参考时区列表进行设置，如 America/New_York,Japan,和UTC。一般的，对于中国大陆地区可以使用 Asia/Shanghai。

网址

参数	描述	默认值
url	网址, 必须以http://或https://开头	source
root	网站根目录	url's pathname
permalink	文章的永久链接格式	:year/:month/:day/:title/
permalink_defaults	永久链接中各部分的默认值
pretty_urls	改写permalink的值来美化 URL
pretty_urls.trailing_index	是否在永久链接中保留尾部的 index.html，设置为 false 时去除	true
pretty_urls.trailing_html	是否在永久链接中保留尾部的.html,设置为false时去除 (对尾部的index.html无效)	true

网站存放在子目录

如果您的网站存放在子目录中，例如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/

目录

一般不用改

参数	描述	默认值
source_dir	资源文件夹，这个文件夹用来存放内容。	source
public_dir	公共文件夹，这个文件夹用于存放生成的站点文件。	public
tag_dir	标签文件夹	tags
archive_dir	归档文件夹	archives
category_dir	分类文件夹	categories
code_dir	Include code 文件夹，source_dir 下的子目录	downloads/code
i18n_dir	国际化（i18n）文件夹	:lang
skip_render	跳过指定文件的渲染。匹配到的文件将会被不做改动地复制到 public 目录中。您可使用 glob表达式来匹配路径。

例如：

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

文章

一般不用改

参数	描述	默认值
new_post_name	新文章的文件名称	:title.md
default_layout	预设布局post
auto_spacing	在中文和英文之间加入空格	false
titlecase	把标题转换为 title case	false
external_link	在新标签中打开链接	true
external_link.enable	在新标签中打开链接	true
external_link.field	对整个网站（site）生效或仅对文章（post）生效	site
external_link.exclude	需要排除的域名。主域名和子域名如 www 需分别配置	[]
filename_case	把文件名称转换为 (1) 小写或 (2) 大写	0
render_drafts	显示草稿	false
post_asset_folder	启动Asset文件夹	false
relative_link	把链接改为与根目录的相对位址	false
future	显示未来的文章	true
highlight	代码块的设置, 请参考Highlight.js进行设置
prismjs	代码块的设置, 请参考PrismJS进行设置

相对地址

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

分类 & 标签

一般不用改

参数	表述	默认值
default_category	默认分类	uncategorized
category_map	分类别名
tag_map	标签别名

日期 / 时间格式

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

参数	描述	默认值
date_format	日期格式	YYYY-MM-DD
time_format	时间格式	HH:mm:ss
updated_option	当 Front Matter 中没有指定updated时 updated 的取值	mtime

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'。

分页

参数	描述	默认值
per_page	每页显示的文章量 (0 = 关闭分页功能)	10
pagination_dir	分页目录	page

例如：

pagination_dir: 'page'
# http://example.com/page/2
  
pagination_dir: 'awesome-page'
# http://example.com/awesome-page/2

扩展

参数	描述
theme	当前主题名称。值为false时禁用主题
theme_config	主题的配置文件。在这里放置的配置会覆盖主题目录下的_config.yml中的配置
deploy	部署部分的设置
meta_generator	Meta generator标签。 值为false时 Hexo 不会在头部插入该标签

包括或不包括目录和文件

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

参数	描述
include	Hexo 默认会不包括source/下的文件和文件夹（包括名称以下划线和.开头的文件和文件夹，Hexo 的_posts和_data等目录除外）。通过设置此字段将使 Hexo 处理他们并将它们复制到source目录下。
exclude	Hexo 不包括source/下的这些文件和目录
ignore	Hexo 会忽略整个 Hexo 项目下的这些文件夹或文件

例如：

# 处理或不处理目录或文件
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"

使用代替配置文件

可以在 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

当你指定了多个配置文件以后，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 即可结束本地运行）

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

• 登录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
  

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

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

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

  $ npm install hexo-deployer-git --save
  

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

  $ hexo clean
  $ hexo g
  $ hexo d（部署到GitHub）
  

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

---

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