使用Hexo 搭建自己的博客

最近一直都想着如何去搭建属于自己的博客，有空的时候就写写文章什么的。
本人对该博客系统的要求是：

博文的编写要采用现在流行的MarkDown来进行编写。
本人还不想去注册域名和云服务器（这些可都是钱啊）。
博文系统需要开源且易上手的。

通过以上的这些分析，我采用了hexo和github来进行开发部署搭建自己的博文系统。

当然了网上也有很多教程，但是我觉得总结的还是有些不全面。现在我将结合我自己搭建好的博文系统综合总结。不喜勿喷。）

本机开发环境

win10 家庭版
node.js 6.9.2
git 2.11.1
github账户一枚
hexo 1.0.2

先学习一些概念啊

什么是Hexo

Hexo 是一个简单地、轻量地、基于Node的一个静态博客框架，可以方便的生成静态网页托管在github和Heroku上，引用Hexo作者 @tommy351的话：

快速、简单且功能强大的 Node.js 博客框架。A fast, simple & powerful blog framework, powered by Node.js.

GitHub Pages是什么？

GitHub Pages 可以被认为是用户编写的、托管在github上的静态网页。由于它的空间免费稳定，可以用于介绍托管在github上的Project或者搭建网站。有两种形式: Project Site 和 User/Org Site，二者之间的差异可以戳GitHub Pages 。基于 GP 创建Site是很方便的，这有一个简单的教程：学习 Github Page 教你分分钟搭建自己的博客

gp 生成的网站的默认域名是 username.github.io 或者 username.github.io/project-name ，但gp是支持自定义域名的：Custom Domain Name 。购买域名之后，可以和默认的二级域名进行绑定，教程参考：购买域名、设置DNS

更多关于gp的信息，可以戳：Github Pages Help

上面哔哔了那么多，现在可以正式开始操练一把啦

1. 安装node.js

这个是必须的安装的哦。这个安装其实很简单，网上教程一大把我就不在此赘述了。node.js安装传送门

2. 安装git

这个是必须的安装的哦。这个安装其实很简单，网上教程一大把我就不在此赘述了。git安装传送门

3. hexo安装

在windows命令行中执行下面的命令

npm install -g hexo

查看是否安装成功，执行下面的命令

hexo --version

安装成功hexo

hexo 命令解释

help 查看帮助信息
init[文件名] 创建一个hexo项目，不指定文件名，则在当前目录下创建
version 查看hexo版本
--config config-path 指定配置文件、代替默认的_config.yml
--cwd cwd-path 自定义当前工作目录
--debug 调试模式，输出所有日志信息
--safe 安全模式，禁用所有的插件和脚本
--silent 无日志输出模式

4. 创建hexo项目

执行新建一个hexo项目命令

hexo init blogsDemo

项目内的目录结构如下：

通过上面的命令，我们创建一个hexo的blogsDemo项目，并且自动生成一篇博文hello word。接下来我们需要在本地测试下这个项目能否跑得起来。

这个项目大概大小28.3M。如果哪位生成的时候报错或者大小差太多，那么请从新创建并且配置翻墙工具。

安装项目依赖库

npm install

本地测试博文系统

hexo server

在浏览器中输入：http://localhost:4000/

运行效果

到此为止我们就完成了hexo开发环境搭建、测试工作。那么接下来我们讲下这个项目中的配置文件。

5. hexo目录文件解析

hexo项目目录结构

1、 scaffolds ：模板文件夹，新建文章时，Hexo 会根据 scaffold 来建立文件。Hexo 有三种默认布局： post 、 page 和 draft ，它们分别对应不同的路径。新建文件的默认布局是 post ，可以在配置文件中更改布局。用 draft 布局生成的文件会被保存到 source/_drafts 文件夹。

2、 source ：资源文件夹是存放用户资源的地方。

3、 source/_post ：文件箱。（低版本的hexo还会存在一个 _draft ，这是草稿箱）除 _posts 文件夹之外，开头命名为 _ (下划线)的文件/ 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去

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

5、 themes/landscape ：默认的皮肤文件夹

6、 _config.yml ：全局的配置文件，每次更改要重启服务。

低版本的Hexo还会生成scripts文件夹，里面用于保存扩展Hexo的脚本文件。

全局配置文件 _cofing.yml 解析

下面的代码文件详细的介绍了该配置文件的用法

# Hexo Configuration

## Docs: https://hexo.io/docs/configuration.html

## Source: https://github.com/hexojs/hexo/

# Site 站点配置

title: P了个F #网站标题

subtitle: 码农世界 #网站副标题

description: 我是一个来自体育世界的码农 #网站描述

author: 杨朋飞 #作者

language: zh-CN #网站使用的语言

timezone: Asia/Shanghai #网站时区

# URL #可以不用配置

## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'

url: http://yoursite.com

root: / #网站根目录

permalink: :year/:month/:day/:title/ #永久链接格式

permalink_defaults: #永久链接中各部分的默认值

# Directory 目录配置

source_dir: source #资源文件夹，这个文件夹用来存放内容

public_dir: public #公共文件夹，这个文件夹用于存放生成的站点文件

tag_dir: tags #标签文件夹

archive_dir: archives #归档文件夹

category_dir: categories #分类文件夹

code_dir: downloads/code #Incloude code 文件夹

i18n_dir: :lang #国际化文件夹

skip_render: #跳过指定文件的渲染，您可以使用glob来配置路径

# Writing 写配置

new_post_name: :title.md #新文章的文件名称

default_layout: post #默认布局

titlecase: false # Transform title into titlecase

external_link: true # Open external links in new tab

filename_case: 0 #把文件名转换为（1）小写或（2）大写

render_drafts: false #显示草稿

post_asset_folder: false #是否启动资源文件夹

relative_link: false #把链接改为与根目录的相对地址

future: true

highlight: #代码块的设置

  enable: true

  line_number: true

  auto_detect: false

  tab_replace:

# Category & Tag 分类 & 标签

default_category: uncategorized #默认分类

category_map: #分类别名

tag_map: #标签别名

# Date / Time format 时间和日期

## Hexo uses Moment.js to parse and display date

## You can customize the date format as defined in

## http://momentjs.com/docs/#/displaying/format/

date_format: YYYY-MM-DD

time_format: HH:mm:ss

# Pagination 分页

## Set per_page to 0 to disable pagination

per_page: 10 #每页显示的文章量（0=关闭分页功能）

pagination_dir: page #分页目录

# Extensions 扩展

## Plugins: https://hexo.io/plugins/ 插件

## Themes: https://hexo.io/themes/ 主题

theme: landscape #当前主题名称

# Deployment #部署到GitHub

## Docs: https://hexo.io/docs/deployment.html

deploy:

  type: git

  repo: http://github.com/yangpengfei/yangpengfei.github.io.git

  branch: master

一般主题下有一个 languages 文件夹，用于对应 language 配置项。

1. language 的配置项是 zh-CN ，则会在 languages 文件夹下找到 zh-CN.yml 文件中对应的项来解释。修改全局配置时，注意缩进，同时注意冒号后面要有一个空格。 2. language和timezone都是有输入规范的，详细可参考[语言规范][14]和[时区规范][15]。

主题配置

主题的配置文件在 /themes/主题文件夹/_config.yml ，一般包括导航配置(menu)，内容配置(content)，评论插件，图片效果(fancybox)和边栏(sidebar)。

Hexo提高了大量的主题，可以在全局配置文件中更改主题：

# Extensions 扩展

## Plugins: http://hexo.io/plugins/ 插件

## Themes: http://hexo.io/themes/ 主题

theme: 你的主题名称

主题的文件目录必须在 themes 目录下。 Hexo主题更换教程
更多Hexo主题戳此： Hexo Themes。

6. 新建一篇博文

在windows命令行中输入如下命令：

hexo new [layout] <title> 其中layout是可选参数，默认值为 post 。
如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，需用引号括起来。

Hexo提供的layout在 scaffolds 目录下，也可以在此目录下自建layout文件。新建的文件则会保存到 source/_post 目录下。

hexo new '第一篇博文'

第一篇博文

使用sublimeText或者你认为其他好用的工具都行，接着就可以欢快的进行写博文啦~~~~
接着我们可以使用hexo server启动服务，就看在浏览器中看到我写的这个博文啦。
小技巧

发表的文章会全部显示，如果文章很长，就只要显示文章的摘要就行了。在需要显示摘要的地方添加如下代码即可：

以上是摘要

<!--more-->

以下是全文

1488621382866.jpg

刷新，就能够看到只显示摘要了，同时会提供 Read More 的链接：

这个文字可以更改，在主题的配置文件( themes/主题文件夹/_config.yml )中，找到 Content ：

# Content

excerpt_link: Read More #可以更改成想要显示的文字

fancybox: true

此外，可以修改文章的模板参数，打开 scaffolds/post.md ，增加类别和描述：

---

title: {{ title }}

date: {{ date }}

tags:

---

在部署hexo博文之前，需要通过命令把所有的文章（.md文章）都做静态化处理，就是生成对应的html, javascript, css，使得所有的文章都是由静态文件组成的：

hexo generate

生成静态文件

在本地目录下，会生成一个public的目录，里面包括了所有静态化的文件。

总结：

到此为止我们已经学习了：

如何创建hexo项目
如何设置全局配置文件_config.yml
如何设置主题
如何发布一篇博文
如何将markdown格式的博文生成静态文件。

将hexo部署到github

注册Github账号

这里我们就不多讲了，小伙伴们可以点击这里，进入官网进行注册。

创建仓库

1488622729726.jpg

登录账号后，在Github页面的右上方选择New repository进行仓库的创建。

1488622775546.jpg

在仓库名字输入框中输入：
你的github用户名.github.io
然后点击Create repository即可。

生成添加秘钥

在windows命令行中输入下面的命令

ssh-keygen -t rsa -C "Github的注册邮箱地址"

一路回车过来就好，待秘钥生成完毕，会得到两个文件id_rsa和id_rsa.pub，用带格式的记事本打开id_rsa.pub，Ctrl + a复制里面的所有内容，然后进入https://github.com/settings/ssh：

1488623060458.jpg

将复制的内容粘贴到Key的输入框，随便写好Title里面的内容，点击Add SSH key按钮即可。

配置`_config.yml`

deploy:

  type: git

  repo: http://github.com/yangpengfei/yangpengfei.github.io.git

  branch: master

这里输入的地址我们需要注意：http和https，这里我选择的是http。由于我没有将ssl添加到github上面，所以我采用http。

安装hexo-deployer-git

npm install hexo-deployer-git --save

执行hexo deploy推送到 githu

hexo deploy

在执行这个命令的时候，会提示我们输入github的账号和密码。

以后我们需要写一篇博文怎么办？？？

只要在blog目录下的source_posts下面添加.md文件就行了，我们也可以使用执行hexo new命令来创建并进行编写。
推送到github。

hexo clean

hexo generate

hexo deploy

参考文章

简洁轻便的博客平台: Hexo详解
 hexo —— 简单、快速、强大的Node.js静态博客框架
 20分钟教你使用hexo搭建github博客
 HEXO+Github,搭建属于自己的博
 Hexo折腾记——基本配置篇