使用Hexo搭建博客步骤详解

简介

hexo —— 简单、快速、强大的Node.js静态博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

特性

风一般的速度
Hexo基于Node.js，支持多进程，几百篇文章也可以秒生成。
流畅的撰写
支持GitHub Flavored Markdown和所有Octopress的插件。
扩展性
Hexo支持EJS、Swig和Stylus。通过插件支持Haml、Jade和Less.

基本配置和使用的工具

操作系统：Windows 7

使用的工具：Git和Node.js

Git用于把部署在GitHub的内容获取至本地，Node.js用于安装Hexo。

基本步骤

安装Git

安装 Git,目前支持 Linux/Unix、Solaris、Mac和 Windows 平台上运行

安装Node.js

下载安装文件，nodejs官网，我这里下载的是node-v6.11.2-x64.msi.
安装nodejs

双击”node-v6.11.2-x64.msi”，开始安装nodejs，自定义安装在D:\dev\nodejs下面。

在cmd控制台输入：node -v，控制台将打印出：v6.11.2，出现版本提示表示安装成功。

该引导步骤会将node.exe文件安装到D:\dev\nodejs\目录下，并将该目录添加进PATH环境变量。
安装相关环境
```
npm install express -g
npm install jade -g
npm install mysql -g
npm install coffee-script -g
```
所有命令都是-g进行全局安装的，这样安装的安装包都在当前用户下，在磁盘的所有其他地方都可以访问到，比较方面。否则安装在当前目录下，只能在当前目录下使用。

默认情况下上述组件都是安装在D:\dev\nodejs\node_modules文件夹下，这也是nodejs相关组件的自动查找路径。确认安装的命令：coffee -v，出现版本号表示成功安装。

以上环境基本就配置完成

安装Hexo

这一步的前提是必须先安装 Node.js和Git
1
npm install hexo -g
升级，更新hexo到最新版（升级仅需一步就把 Hexo 本体和所有相依套件安装完毕）
1
npm update hexo -g
安装hexo-deployer-git，用于将博客的内容部署到git上
1
npm install hexo-developer-git --save
初始化如果指定 <folder>，便会在目前的资料夹建立一个名为<folder>的新资料夹；否则会在目前资料夹初始化。在Git命令行窗口中输入（指定的方法是）：
```
cd [需要指定的文件夹路径]
```
跳转到对应的文件夹目录下后，进行初始化：
```
hexo init
```
初始化后对应的资料夹中有一下文件（_config.yml, theme/, source/, scaffolds/, package.json, .gitignore）;文件作用：

_config.yml：整个站点的配置，包括基本介绍，所使用的主题，关联的仓库等；

theme/：所用的主题以及主题的配置；

source/：目前所写的所有文章以及404页面等；

scaffolds/：Hexo所提供的模板文件；

package.json：说明站点使用了哪些包；

gitignore：放置在git端时忽略的文件；

安装Markdown编辑器

简介：Markdown是一种可以使用普通文本编辑器编写的标记语言，通过类似HTML的标记语法，它可以使普通文本内容具有一定的格式。git上上传的文本一般都是用Markdown编辑的，而且它的语法也很简单，所以这很实用。
安装，下载地址，下载得到 markdownpad2-setup.exe，双击并完成安装。
作用：由于使用Hexo写博客，其中博客文章的格式就是.md格式，需要使用Markdown编辑器完成编辑，将纯文本转化为html，在浏览器上显示出来。
Markdown语法说明

安装主题

可以到Hexo官网主题页去搜寻自己喜欢的theme。我安装的是hexo-theme-next。

next主题使用文档：http://theme-next.iissnan.com/

hexo的next主题个性化教程:打造炫酷网站

发布文章

1）新建文章

在对应的博客文件夹下的git-bash命令行中运行以下命令

$ hexo new "filename"        #新建文章

新建文章之后，在博客对应的文件夹source\_posts中找到对应的.md文件，然后用Markdown编辑器打开，对文章内容进行编辑。

2）本地服务器上测试

保存文章后，在git-bash命令行中输入以下命令

# 清除Hexo的缓存，包括 (db.json) 和已生成的静态文件 (public)
$ hexo clean

$ hexo new "Hello World"       # 创建新博客

$ hexo generate                # 生成静态网站，或者hexo g命令
$ hexo s                     # 打开本地服务器

伺服器会跑在 http://localhost:port （port 预设为 4000，可在 _config.yml 设定），可在本地访问：http://localhost:4000

3）关联远程GitHub

修改_config.yml配置文科，终端cd到blog（这个是本地存放博客的文件夹，如beatriceblog）文件夹下，打开_config.yml，找到文件的最后两行，修改成下边的样子：
1
2
3
4
deploy:
type: git
repository: https://github.com/jeasonstudio/jeasonstudio.github.io.git
branch: master

> 非常重要：在配置所有的_config.yml文件时（包括theme中的），在所有的冒号:后边都要加一个空格，否则执行hexo命令会报错> 出现下列错误的解决方案

# 生成网页时，出现错误：ERROR Local hexo not found in ~/blog   
npm install hexo --save     

# 若执行命令hexo deploy仍然报错：无法连接git，则执行如下命令来安装hexo-deployer-git：
npm install hexo-developer-git --save

关联GitHub账号及仓库
- 根据已有的GitHub账号，配置本地Git（其实就是建立本地Git与服务器上GitHub账号的关联）
  - 在本地创建ssh key：在本地的git bash命令窗口输入下列命令，`your_email@youremail.com为你在github上注册的邮箱，如beatrice.qq.com`
    1
    $ ssh-keygen -t rsa -C [your_email@youremail.com]
  - 复制ssh key：，输入上面的命令后，会要求确认路径和输入密码，我们这使用默认的一路回车就行。成功的话会在C:\Users\[本机的用户名]下生成.ssh文件夹，进去，打开id_rsa.pub，所有的文件内容就是ssh key，复制下来。
  - 添加ssh key到Github：回到github网页上，进入 Account Settings（账户配置），左边选择SSH Keys，Add SSH Key，title随便填，粘贴电脑上生成的key，完成后就是下面的状态。
  - 验证是否成功，在git bash下输入：
    1
    $ ssh -T git@github.com

    > 如果是第一次生成ssh key的会提示是否continue，输入yes就会显示已成功连上github。- 本地仓库关联github- **设置username和email**，因为github每次commit都会记录他们

1
2

$ git config --global user.name [your name]
      $ git config --global user.email [your_email@youremail.com]

 - **关联远程GitHub仓库**，进入要上传的本地仓库所在目录，右键打开git bash窗口，添加远程地址：

$ git remote add origin git@github.com:yourName/yourRepo.git

# 例如，连接自己的博客远程仓库
git remote add origin git@github.com:dby124/dby124.github.io.git

 > yourName和yourRepo表示你在github的用户名和刚才新建的仓库，加完之后进入.git，打开config，这里会多出一个remote "origin"内容，这就是刚才添加的远程地址，也可以直接修改config来配置远程地址。 - **创建新本地git仓库**：进入要上传的本地仓库所在目录，然后执行 `git init` 以创建新的 git 仓库。

$ git init

参考GitHub简明教程

4）部署到对应的网站上去

本地测试没有问题后，执行下面命令

1 2	$ hexo g # 生成静态网页 $ hexo d #上传到GitHub对应的仓库中

自动备份Hexo博客源文件

安装shelljs模块
1
npm install --save shelljs
模块安装完成，在blog根目录的scripts文件夹（如果没有就新建一个）下新建一个js文件，文件名随意取

修改脚本内容中，hexo的根目录路径

1	cd('D:/nodejs/beatriceblog'); //此处修改为Hexo根目录路径

这样，每次更新博文并deploy到服务器上之后，备份就会自动启动并完成备份。

参考：hexo个人博客搭建教程

【Hexo+Github】域名和github绑定的问题

本地端

在/blog/themes/landscape/source目录下新建文件名为：CNAME文件，注意没有后缀名！直接将自己的域名如：jeasonstudio.com写入。

终端cd到blog目录下执行如下命令重新部署：
1
2
3
$ hexo clean
$ hexo g
$ hexo d
域名解析
- 如果将域名指向一个域名，实现与被指向域名相同的访问效果，需要增加CNAME记录。
- 登录你注册域名的网站，比如万网，在你购买的域名后边点击：解析 –> 添加解析
- 记录类型：CNAME
- 主机记录：将域名解析为example.com（不带www），填写@或者不填写
- 记录值：yourname.github.io. (不要忘记最后的，yourname改为你自己的用户名)，点击保存即可。