我的博客搭建历程，使用github pages + hexo，域名解析，配置插件

前言

其实从去年开始我就想搭建一个自己的个人网站了，主要用于记录自己的技术积累和重点知识。但由于自己太懒，能力也太渣，所以就一直没有行动。直到今年，突然发现随着知识积累的增加，有好多重要的内容脑袋都记不下了，有的网页就直接存个标签，但是标签越存越多，但却很少再次去浏览，最后知识还是会淡忘，所以今天痛下决心，还是自己搭个博客吧，以挽回知识的流失，同时也可以向外部分享自己的一些见解。
博客搭建过程也是一波三折，遇到各种坑爹问题，还好我没那么轻易放弃，最终在无数次失败之后终于成功了。

正文

1. github配置

1）首先需要有一个github账号，没有的话就得申请一个。
然后新建一个代码仓库，注意，仓库名一定要是：你的github账号名字.github.io，比如我的是windrunnerlihuan.github.io。
2）clone到本地，比如我的就是如下命令：
git clone https://github.com/windrunnerlihuan/windrunnerlihuan.github.io.git
cd 进文件夹，我们先建个index.html用于测试：
cd windrunnerlihuan.github.io
vi index.html
然后编辑：

<!DOCTYPE html>
<html>
<body>
<h1>github pages测试</h1>
</body>
</html>

然后按esc，再输入“:wq”回车保存。然后提交上去：
git add .
git commit -m “测试github pages”
git push
此时需要输入你的github账号和密码，输入就是了，成功后我们验证一下。
然后打开浏览器，输入地址，比如我的就是：http://windrunnerlihuan.github.io
如果能正确显示“github pages测试”字样，说明我们成功了。

2. hexo安装

Hexo 是一个简单地、轻量地、基于Node的一个静态博客框架。通过Hexo我们可以快速创建自己的博客，仅需要几条命令就可以完成。

Hexo的官方网站：http://hexo.io/ ，也是基于Github构建的网站。

不过要使用hexo必须装node.js，这个easy，直接在官网https://nodejs.org/en/ 上下一个，首页就是下载页面，选一个你自己电脑平台对应的，比如我的是windows x64。如果不想看英文呢，还有个中文网站http://nodejs.cn/ ，几乎是把英文网站翻译了一遍，套路都一样。下载下来之后文件名叫node-v4.4.4-x64.msi，双击，一路next，傻瓜式安装。

接着安装hexo：
1）打开控制台（按下win + r，输入cmd，回车）或者直接在git bash界面。
输入 npm install -g hexo，然后开始安装hexo。
成功后再输入 npm install hexo-deployer-git –save，安装发布工具。

2）接着进入我们从github上克隆下来的windrunnerlihuan.github.io文件，再次git bash here。
输入 hexo init，初始化hexo。
完成后我们测试一下：
输入hexo server
bash控制台会打印出 “[info] Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.”
这时端口4000被打开了，我们能过浏览器打开地址，http://localhost:4000/ 。

出现了默认的网页界面，是不是很容易呢！！

3. hexo配置

我们先看一下文件结构

scaffolds 脚手架，也就是一个工具模板
scripts 写文件的js，扩展hexo的功能
source 存放博客正文内容
source/_drafts 草稿箱
source/_posts 文件箱
themes 存放皮肤的目录
themes/landscape 默认的皮肤
_config.yml 全局的配置文件
db.json 静态常量

在这里，我们每次用到的就是_posts目录里的文件，而_config.yml文件和themes目录是第一次配置好就行了。

_posts目录：Hexo是一个静态博客框架，因此没有数据库。文章内容都是以文本文件方式进行存储的，直接存储在_posts的目录。Hexo天生集成了markdown，我们可以直接使用markdown语法格式写博客，例如:hello-world.md。新增加一篇文章，就在_posts目录，新建一个xxx.md的文件。

themes目录：是存放皮肤的，包括一套Javascript+CSS样式和基于EJS的模板设置。通过在themes目录下，新建一个子目录，就可以创建一套新的皮肤，当然我们也可以直接在landscape上面修改。

我们主要改的就是_config.yml全局配置文件，以及新建文章时要增加或者修改文章在source/-posts/目录下的md文件。

1）修改_config.yml全局配置文件

_config.yml是全局的配置文件：很多的网站配置都在这个文件中定义。

站点信息: 定义标题，作者，语言
URL: URL访问路径
文件目录: 正文的存储目录
写博客配置：文章标题，文章类型，外部链接等
目录和标签：默认分类，分类图，标签图
归档设置：归档的类型
服务器设置：IP，访问端口，日志输出
时间和日期格式：时间显示格式，日期显示格式
分页设置：每页显示数量
评论：外挂的Disqus评论系统
插件和皮肤：换皮肤，安装插件
Markdown语言：markdown的标准
CSS的stylus格式：是否允许压缩
部署配置：github发布

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site 站点信息
title: this way, little boy
subtitle: 無限大な夢のあとの 何もない世の中じゃ
description:
author: Huan Li
language:
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://windrunnerlihuan.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
i18n_dir: :lang
skip_render:

# Writing 写博客配置
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
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
pagination_dir: page

# Markdown Markdown语法
## https://github.com/chjj/marked
markdown:
  gfm: true
  pedantic: false
  sanitize: false
  tables: true
  breaks: true
  smartLists: true
  smartypants: true

# Deployment 部署配置
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/windrunnerlihuan/windrunnerlihuan.github.io.git

其他没啥改动的，就改个Site 站点信息，URL，还有Deployment 部署配置，前两个没啥难度，这个Deployment 部署配置很重要：

其中type一定要填git，因为以前低版本的hexo是github，不过现在早就废弃了。
其次repo填你github项目的clone地址，http/https/ssh类型都行，我的是
https://github.com/windrunnerlihuan/windrunnerlihuan.github.io.git 和git@github.com:windrunnerlihuan/windrunnerlihuan.github.io.git ，我填的是第一个，因为填第二个后期发布时会验证公钥，需要用git bash生成公钥，然后贴到项目的Deploy keys里，比较麻烦，所以为了省事，我填了第一个。

2）新建博客

接下来，我们开始新博客了，创建第一篇博客文章。Hexo建议通过命令行操作，当然你也可以直接在_posts目录下创建文件。

通过命令创建新文章，在bash 里输入 hexo new “新的开始”
在source/_posts目录下就会生成文件：”新的开始.md”。

然后我们编辑 新的开始.md：

---
title: 新的开始
date: 2016-05-27 18:44:12
tags:
- 开始
categories: 日志
---

这是**新的开始**，我用hexo创建了第一篇文章。

## 引用
# Swig语法
{% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %}
Every interaction is both precious and an opportunity to delight.
{% endblockquote %}
# Markdown语法
> Every interaction is both precious and an opportunity to delight.

## 链接
# Swig语法
{% link gank日志 http://gank.io/ true 粉丝日志 %}
# Markdown语法
[gank日志](http://gank.io/)

## 图片
# Swig语法
{% img /images/新的开始/meizi.jpg 400 600 这是一张图片 %}
# Markdown语法
![这是一张图片](http://images.windrunnerlihuan.com/img/windrunnerlihuan%E5%8D%9A%E5%AE%A2/%E6%96%B0%E7%9A%84%E5%BC%80%E5%A7%8B/meizi.jpg)


## 公式
$$J\_\alpha(x)=\sum _{m=0}^\infty \frac{(-1)^ m}{m! \, \Gamma (m + \alpha + 1)}{\left({\frac{x}{2}}\right)}^{2 m + \alpha }$$
感觉非常好。

文章使用markedonw语法写的，还有很多普通或者高级的语法，这个可以问度娘或者谷歌，找找别人的帖子学学。

用命令行启动本地server：hexo server
通过浏览器打开， http://localhost:4000/ ，就出现了我们新写的文章。

4. 发布到Github

1) 静态化处理
写完了文章，我们就可以发布了。要说明的一点是hexo的静态博客框架，那什么是静态博客呢？静态博客，是只包含html, javascript, css文件的网站，没有动态的脚本。虽然我们是用Node进行的开发，但博客的发布后就与Node无关了。在发布之前，我们要通过一条命令，把所有的文章都做静态化处理，就是生成对应的html, javascript, css，使得所有的文章都是由静态文件组成的。

输入静态化命令：hexo generate
在本地目录下，会生成一个public的目录，里面包括了所有静态化的文件。

2) 发布到github
接下来，我们把这个博客发布到github。
现在检查我们上次填好的_config.yml文件，找到deploy的部分，设置github的项目地址。

1
2
3

deploy:
  type: git
  repo: https://github.com/windrunnerlihuan/windrunnerlihuan.github.io.git

然后执行部署命令：hexo deploy
中间过程会让你再次输入github账号和密码，输入就行了
成功后验证，浏览器里输入上次的地址：http://windrunnerlihuan.github.io

说明我们成功了

5. 独立购买域名与绑定

有时候我们想做个人博客，想让自己的博客拥有自己的域名，那就得去买个域名了。这里我们可以通过万网申请购买：https://wanwang.aliyun.com/ 。流程很简单，基本上一路next。
我也斥资45块买了个.com结尾的域名 windrunnerlihuan.com 。

然后就是解析域名了，不过解析之前你得知道你的gihub pages个人主页的ip：
首先ping 一下个人主页地址，控制台里输入 ping www.windrunnerlihuan.github.io，然后会返回一个ip，然后用这个ip设置我们刚才买的域名解析，也是轻车熟路

最后最重要的是：
1）在github项目中，新建一个文件CNAME，文件中写出你要绑定的域名windrunnerlihuan.com。通过浏览器，访问http://windrunnerlihuan.com，就打开了我们建好的博客站点。
2）由于每次执行deploy的时候，github代码仓库所有的文件都会被覆盖，所以我们最好在source目录下创建这个CNAME文件，这样每次部署就不用动手创建了。

6. 个性化功能配置

1）替换皮肤
博客系统流行的原因，是因为他的个人性，而皮肤正式个性化的一种体现。
利用hexo替换皮肤，还是比较简单的，3步完成。

No.1 找到一个皮肤或者自己开发一个皮肤
打开hexo的皮肤列表页面，你可以找到很多的皮肤，网页地址： https://github.com/tommy351/hexo/wiki/Themes 。

No.2放到themes目录下
比如，我觉得pacman( https://github.com/A-limon/pacman )这个皮肤还不错，我就可以下载皮肤到themes目录下面。
通过git命令下载皮肤
git clone https://github.com/A-limon/pacman.git themes/pacman

No.3在_config.yml指定皮肤
编辑文件_config.yml，找到theme一行，改成 theme: pacman
本地启动hexo服务器，打开浏览器 http://localhost:4000

新皮肤的效果还不错吧，然后静态化处理，再发布到github，就完成了站点的改版。

这里只介绍换皮肤，当然还有其他很多功能，不过对于我来说暂时没多大卵用，如果其他人有需求可以再google或者baidu搜，也都不难，很easy。

结语

因为这是我第一次搭建个人博客，水平实在比较差，流程写的很粗燥，很多细节都没有涉及，望大家体谅，以后我会努力完善的，将后续文章做的更好。

四月是你的谎言

博客搭建历程————————Github和Hexo

前言

正文