使用 Hexo + github pages 搭建博客

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

安装

安装hexo的前提是要有Node.js以及Git，至于什么是Git和Node以及如何安装他们可以自行搜索了解。

安装完Node以及Git后，通过下面的命令安装Hexo:

1	npm install -g hexo-cli

初始化

在电脑中找个目录，并进入目录，执行下面几个命令，hexo就准备就绪了。

1 2	hexo init // 初始化目录 npm install // 安装运行hexo的一些必要的组件

运行完，你会看到你的当前目录下，会自动创建一些目录，如下：

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

各个文件或者目录的用途：

_config.yml站点配置文件，很多全局配置都在这个文件中。
package.json 应用数据。从它可以看出hexo版本信息，以及它所默认或者说依赖的一些组件。
scaffolds 模版文件。当你创建一篇新的文章时，hexo会依据模版文件进行创建，主要用在你想在每篇文章都添加一些共性的内容的情况下。
scripts 放脚本的文件夹，就是放js文件的地方
source 这个文件夹就是放文章的地方了，除了文章还有一些主要的资源，比如文章里的图片，文件等等东西。这个文件夹最好定期做一个备份，丢了它，整个站点就废了。
themes 主题文件夹。

GitHub

有GitHub账号的，看下面：

创建一个repo，名称为username.github.io,其中yourname是你的github名称，按照这个规则创建才有用哦

_config.yml配置

用编辑器打开你的blog项目，修改_config.yml文件的一些配置(冒号之后都是有一个半角空格的)：

url: https://github.com/candy415
root: /


deploy:
  type: git
  repo: https://github.com/candy415/candy415.github.io.git
  branch: master

本地启动

回到gitbash中，进入你的blog目录，分别执行以下命令

1
2
3

hexo clean
hexo generate
hexo server

打开浏览器输入：http://localhost:4000

接着你就可以看到你的博客了~

创建文章

1	hexo new [layout] <title>

创建一篇文章，如果不指定layout，那么就使用_config.yml中default_layout的值，标题中如果有空格，将整个title放到引号中。比如，hexo new “hello world”创建一篇叫hello world的文章。

layout如果为page时，新建菜单

1	hexo new page title

布局（Layout）

Hexo 有三种默认布局：post、page 和 draft，它们分别对应不同的路径，而自定义的其他布局和 post 相同，都将储存到 source/_posts 文件夹。

如果你不想你的文章被处理，你可以将 Front-Matter 中的layout: 设为 false 。

模版（Scaffold）

在新建文章时，Hexo 会根据 scaffolds 文件夹内相对应的文件来建立文件，例如：

1	hexo new draft 'new pape'

在执行这行指令时，Hexo 会尝试在 scaffolds 文件夹中寻找 draft.md，并根据其内容建立文章，以下是您可以在模版中使用的变量：

变量描述:

layout布局
title标题
date文件建立日期

Front-matter

Front-matter是文件最上方以 — 分隔的区域，用于指定个别文件的变量，举例来说：

---
title: Hello World
date: 2013/7/13 20:46:25
---

参数描述默认值:

layout布局
title标题
date建立日期文件建立日
updated更新日期文件更新日期
comments开启文章的评论功能
truetags标签（不适用于分页）
categories分类（不适用于分页）
permalink覆盖文章网址

文章摘要

设置文章摘要，我们只需在想显示为摘要的内容之后添即可。像下面这样：

---
title: hello hexo markdown
date: 2016-11-16 18:11:25
tags:
- hello
- hexo
- markdown
---

我是短小精悍的文章摘要(๑•̀ㅂ•́) ✧

<!-- more -->

紧接着文章摘要的正文内容

这样，之前、文档配置参数之后中的内容便会被渲染为站点中的文章摘要。

注意！文章摘要在文章详情页是正文中最前面的内容。

资源引用

写个博客，有时候会想添加个图片或者其他形式的资源等等。有以下两种方式进行解决：

使用绝对路径引用资源，在 Web 世界中就是资源的 URL
使用相对路径引用资源

对于使用相对路径引用资源的，我们可以使用 Hexo 提供的资源文件夹功能。

使用文本编辑器打开站点根目录下的 _ config.yml 文件，将 post_asset_folder 值设置为 true。

1	post_asset_folder: true

修改之后会开启 Hexo 的文章资源文件管理功能。

安装hexo-asset-image

1	npm install https://github.com/xcodebuild/hexo-asset-image.git

Hexo 将会在我们每一次通过 hexo new <title> 命令创建新文章时自动创建一个同名文件夹，于是我们便可以将文章所引用的相关资源放到这个同名文件夹下，然后通过相对路径引用。例如，你把一个 example.jpg 图片放在了这个同名文件夹中，使用相对路径的常规 markdown 语法 ![](./example.jpg)即可访问。

发布文章

先安装一波：npm install hexo-deployer-git –save（这样才能将你写好的文章部署到github服务器上并让别人浏览到）
执行命令(建议每次都按照如下步骤部署)：

1 2	hexo clean hexo g -d // 编译部署

在浏览器中输入https://candy415.github.io 就可以看到你的个人博客啦

主题

推荐三个还不错的主题:

主题怎么使用和配置呢?

下面以melody为例讲解:(Hexo 版本 >= 5.0)

1、安装

进入你的 hexo 博客的工作路径

1	npm install hexo-theme-melody

2、设置

在 hexo 的工作目录下找到站点配置文件——_config.yml:

1	theme: melody # 将主题设置成melody

3、配置

在 hexo 的工作目录下创建一个 _config.melody.yml。
将 ./node_modules/hexo-theme-melody/_config.yml（这意味着你要先通过 npm 安装 hexo-theme-melody）里的内容拷贝至 _config.melody.yml。
如果你是 hexo-theme-melody 的老用户，请将 melody.yml 的内容拷贝至 _config.melody.yml，然后将 melody.yml 删掉，因为它将会被废弃。

之后你就只需要通过npm update hexo-theme-melody 来平滑升级 theme-melody 了。