Hexo结合Github搭建静态网页博客

源起

总喜欢记录些什么，从最开始的QQ日志、豆瓣日志，到后来的免费博客如：新浪博客，总觉得是别人的平台，要么得忍受广告的各种肆虐，要么就是不能定制化。于是尝试着自己建立独立的平台，也算一个网络的家。作为入门，首先尝试了WordPress，容易上手的后台管理，和用一款新的软件没什么区别，种类繁多的插件要什么就加载什么，系统地资源管理和数据库备份，相当方便:)。 很多人嫌弃WordPress臃肿，后来才开始搭建静态网页，也就是今天的主题。但是，我是因为穷啊==！总之，我到了另一种阶段：自己搭博客，但是让第三方托管，只负责专注于写本身。
这样，我们就需要明确静态网站需要怎么搭建？
note:以下适合快速搭建可用的个人博客，像我一样不太有技术背景的童鞋

域名

考虑到初衷是自己搭建，那么很多人包括我自己也希望有属于自己的域名，这也是使用这种博客形式唯一需要花费的地方（非必须），用于之后第三方托管方的绑定。相比起既要买域名又要买空间的建站模式，实在是划算。个人推荐国外的域名商，比如Godaddy，关注下优惠折扣信息，一次买几年也不贵。

Hexo与Github

之前尝试过Jekyll但是对我来说还是略微复杂，搞不定。现在推荐用Hexo ，因为搭建好后只需常用的四个命令即可完成正常的博客功能：新文档、生成、预览、发布，而且支持Markdown：

$ hexo new <title> #写一篇新文章
$ hexo gengerate #生成静态文档
$ hexo server #启动浏览器本地预览
$ hexo deploy #部署到远程服务器
$ hexo publish #将草稿发布成正式文档

Github，作为第三方托管商，免费空间够用，代码托管放心易用。

准备工作

Git与Node.js安装

我是Windows平台，在此之前需要用Git的常用命令来授权本地与远程部署，安装hexo等。根据Hexo官方文档，还要安装Node.js。这两个都直接下载的安装程序，一路选择next就行。

常用Git命令

基础的命令行（Command Line Interface）输入如下

mkdir #新建文件夹
pdw #现在的工作路径
cd #转到其他路径
ls #列出本路径下的项目
cd .. #返回上一层
cd ~ #回到默认工作路径
cp #复制A到B
mv #将A移动到B，相当于剪切
q #quit

此外，在Git官网还有大约15分钟的入门使用教程，简单明了，建议先看下，即可对付日后的基本使用。

git log #日志
git clone #克隆一个repository
git diff #比较不同版本
git checkout "id" #回到某个id号的版本
git init #初始化一个新的git仓库
git status #查看仓库的信息
git add #从staging区中将文件正式添加到仓库
git commit #提交
git branch #切换不同分支
git merge #合并分支
git pull #将远程的仓库复制到本地
git push #将本地的上传到远程端

安装Hexo

打开Git Bash，找到自己希望安装的目录，命令用cd之后开始执行以下，安装Hexo：

$ npm install -g hexo-cli
$ hexo init
$ npm install

这样在安装目录下就出现了Heox的整体框架，有几个日后主要使用的文件或者文件夹：

_config.yml #整个网站的配置信息，可以在这里修改很多的参数，比如站点名
source文件夹下：
_drafts #草稿
_posts #发布的正式文章
themes文件夹 #主题

Github配置

Github注册

首先，没有Github 账号就先注册，完成后新建一个repository来存放你的博客的全部代码文件，注意命名一定要使用你的github用户名，格式为：yourname.github.io

SSH生成

第一次使用Github或者没有配置过SSH，需要配置。先保证进入到Git的安装路径

$ ssh-keygen -t rsa -C "youremail"

youremail是你Github的注册邮箱，之后会要求你输入密码可以选择不输入直接按回车就好，然后会生成新的文件夹.ssh 里面有两个文件：id_rsa（私人密钥）和id_rsa.pub（公共密钥）。将公共密钥打开复制好，在浏览器中打开GIthub账户的设置选项-SSH and GOG keys，新建一个SSH，名称随便填，Key填写刚才复制的内容。

SSH测试

$ ssh -T git@github.com

根据提示操作后显示如下信息则成功啦

Hi crossairplane! You've successfully authenticated, but GitHub does not provide shell access.

绑定个性域名

同样，在Github的你的博客repository中，选择设置-Github Pages- Custom domain，填入个性域名即可。

Git用户信息

现在已经可以通过SSH这种形式将本地和远程的Github联系起来啦，还需要给Git配置好你的Github用户信息：

$ git.config --global username "githubname"
$ git.config --global useremail "githubemail"

Hexo配置

网站配置文件修改

Hexo支持多种部署，我们选择的是Git，因此去之前提到的hexo安装目录打开_config.yml文件，我用的是sublime_text 软件（能打开多种格式），在空白处加入如下代码：

deploy:
  type: git
  repository: http://github.com/yourgithubname/yourname.github.io.git #github新建的repository地址
  branch: master

找到网站配置文件中的主题theme部分，可以修改主题，本站使用了NexT主题，本主题功能全面且有详细帮助文档（先下载主题放入Hexo安装目录的themes文件夹下）：

theme: next

其他的站点名称、描述等参考Hexo官方文件非常容易修改。

本地预览

Hexo支持本地预览：

$ hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

如果复制路径后浏览器依然不能预览则有可能端口4000被占用，可尝试一下修改为其他端口，这里修改为4001：

$ hexo s -p 4001
INFO  Start processing
INFO  Hexo is running at http://localhost:4001/. Press Ctrl+C to stop.

分类与标签

Hexo默认不产生分类与标签文件，但是在一般的博客中这两个功能（或者说索引）还是非常重要的，以NexT主题网为例，这里就需要去Heox安装目录中，找到source 文件夹，新建categories 和tags 页面文件。

$ cd your-hexo-site
$ hexo new page categories

编辑所建页面：

---
title: 分类
date: 2014-12-22 12:39:04
type: "categories"
---

同理建立tages标签页面。

Markdown

Mardown是一种专注于写作的格式，非常便于学习，特色是专注于写作可以转换为不同格式，不再担心排版问题。默认的是.md 格式，可以转换为PDF、Word、HTML、LaTeX等等。我推荐使用Typora 这款软件，在Mac上有很多优秀的同类软件，但是Typora 为全平台软件，在Windows上表现出众，重要的事情说三遍：

颜值高
颜值高
颜值高。

这里小抄下Markdown常用语法：

命令	解释
#	一级标题
##	二级标题
*something*	加粗
>something	引用
‘something’	单个代码插入
- something	无序列表
1. something	有序列表

Typora 交互友好，记不熟命令时，还可以在菜单栏、右键选项里等地方快速点选实现，加上熟悉后也可以用快捷键进行命令输入，实在是非常容易上手，也是效率利器。

由于是要通过Hexo来进行渲染发布，在每篇.md格式博文正式开始写之前，需要加入以下表格信息作为YAML 头供Hexo渲染生成静态文件:

---
title: your article name
date: time
categories:
 - something 1
 - something 2
tags:
 - something 1
 - spmething 2
---

小结：日常使用流程

我只是借助这样一个流程来进行博客的搭建以及博文的发布，大致逻辑为：

以Markdown为写作工具，Hexo进行静态网页生成发布，Github进行网站数据存储。

所以，平时想写东西直接开一个.md，把标题、日期、分类或者标签等填上，正式开写。然后将文档保存到到Hexo目录下的source/_posts 路径。最后打开Git bash，进入Hexo文件目录执行以下命令：

hexo g -d

搞定。