前言

本片文章主要用来记录搭建Hexo静态博客的过程，用于以后搭建博客更加方便。

主要内容：

  1. 列出博客搭建环境+所需工具；
  2. 环境的配置与工具的安装简述，以及简单的使用教程，安装Git、Node.js环境以及Hexo框架；
  3. 创建Hexo项目，并本地运行查看效果
  4. 修改项目配置文件（根目录下的_config.yml文件）
  5. 安装Hexo框架主题（推荐：Next或yelee主题，本人用的yelee），对主题进行配置，主要是修改theme目录下的_config.yml文件
  6. 将本地设置好的Hexo项目发布到Github Pages上（包括绑定自己的域名）（这里会介绍如何写文章）
  7. 总结

准备工作

在搭建博客时，你需要做以下准备：

  1. 确定自己的系统为Windows;(因为博主用的系统是Windows10，为了避免浪费您的时间，如果不是Windows系统就不要看了。)
  2. Git下载，node.js下载。

本文所使用的环境：

  • Windows 10
  • Git version 2.11.1.windows.1
  • node.js v6.9.5 LTS
  • hexo

开始搭建博客

Git下载安装及简单实用

为什么要在电脑上安装Git呢？我相信大多计算机专业的同学对Git的应该不陌生了，Git可以说是现如今最好用的、最先进的分布式版本控制系统（没有之一）。Git在接下来的环境部署及部署博客到github Pages时都是需要的。大家如果有兴趣可以阅读我的博客（Git的简单使用），对Git进行简单的了解。如果了解Git也没有关系，只要你按照教程一步一步来也可以。

下载Git

我们可以在Git的官网下载我们所需要的git，我选择的是最新版的Git Windows X64 版本。

安装Git

Git的安装也很简单，就像安装我们平时所需要的软件一样，教程参考：Git的安装。

Git的简单实用

初始化一个Git仓库，使用git init命令。

添加文件到Git仓库，分两步：

第一步，使用命令git add <file>，注意，可反复多次使用，添加多个文件；

第二步，使用命令git commit，完成。

我们在这里不太需要git的命令操作，一般只需要git的的shell窗口进行一些操作。

node.js的下载安装

下载

打开 Nodejs 下载页面，选择合适你当前系统版本的安装包（建议使用 LTS 版本的）。

安装

双击安装文件 -> 下一步 -> 下一步…

【具体操作请参考网上的一篇文章：Node.js安装及环境配置之Windows篇】

Hexo框架的安装

首先我们可以看一下hexo的官网，了解一下hexo。

Windows中的安装

  1. 打开命令行

    Win+R或者点击开始按钮–>运行–>输入“cmd”;

    用 Git Bash

  2. 输入命令

    npm install hexo-cli -g

输入完命令后就开始了hexo的安装，这里可能需要等待一段时间，时间不确定，只要不报错就可以了。

创建Hexo本地博客

接下来我们在一个本地盘自定义路径中创建一个文件夹作为我的项目文件，我在这里选择了在G盘下新建了一个名为TerryBlog的文件夹，作为我的项目文件，路径为【G:\TerryBlog】.在G盘下，点击鼠标右键–>Git Bash，打开命令输入框。输入命令如下：

hexo init TerryBlog //hexo init +你的项目名称，如我的为TerryBlog

执行完上述命令后，我们就创建了TerryBlog文件夹，进入刚创建的TerryBlog项目目录，命令操作如下：

cd TerryBlog //进入TerryBlog目录

或者直接在TerryBlog文件夹下，再点击鼠标右键–>Git Bash，打开命令输入框。再输入以下命令：

npm install

安装完成之后，【G:\TerryBlog】目录结构是这样的：

到此为止，一个博客就已经搭建好了，现在我们启动 hexo 本地服务，看下默认的博客是怎样的，命令如下：

hexo s

在浏览器中输入：http://localhost:4000/进行访问，效果图如下：

** 如果要停止 hexo 服务：在 Git Bash 下按 Ctrl + C即可**

到这里我们简单的hexo博客基本就完成一部分了！是不是很开心，如果不进行主题美化的话，我们马上就可以有一个自己的博客了。

修改项目配置文件

在这里我们修改的是【G:\TerryBlog】路径下的 _config.yml 站点主题配置文件，我的配置如下：

注意：修改之前最好备份一下。

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

# Site 这一块区域主要是设置博客的主要说明，需要注意的是：每个冒号后面都是有一个空格，然后再书写自己的内容的


title: Terry_Tian Code #网站标题
subtitle: 行是知之始   知是行之成  #网站副标题
description: 在山的这边，海的那边，有一只程序猿。。。  #描述
author: Terry Tian   #博主名字
avatar: http://olg3gwtbm.bkt.clouddn.com/head.jpg  #博主头像
email: 1015236187@qq.com   #邮箱
language: zh-Hans  #语言
timezone:   #网站时区。Hexo默认使用电脑时区

# URL,这一块一般可以设置的是 url 这个参数，比如我要设置绑定域名的，这里就需要填写我的域名信息
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://mutouspace.cn/
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

 # Extensions
 ## Plugins: https://hexo.io/plugins/
 ## Themes: https://hexo.io/themes/
 theme: yelee

 # Deployment
 ## Docs: https://hexo.io/docs/deployment.html
 deploy:
   type: git
   repo: git@github.com:MuTouTQ/MuTouTQ.github.io.git
   branch: master
  
 search:
   path: search.xml
   field: post

做完这一些之后再在Git Bash 命令框中，输入 hexo s 重新启动服务，在浏览器中输入：http://localhost:4000/进行访问,查看一下效果。

安装Hexo框架主题

在上一步完成后，你会发现虽然改了一部分配置，但页面还是很吃藕，接下来，咱们就要给咱们的博客美美容了。hexo的主题有很多，大家可以去这里选一下，hexo-theme：https://hexo.io/themes/.

我选择的是yelee主题：yelee

还是让 Git Bash 保持在【G:\TerryBlog】目录下，然后输入命令：

git clone https://github.com/MOxFIVE/hexo-theme-yelee.git themes/yelee

这样就在 【G:\TerryBlog\themes】目录下生成了一个 yelee 文件夹，里面有我们刚刚 clone 下来的主题内容。

我们现在要修改【G:\TerryBlog】目录下的项目配置文件：_config.yml，把对应的主题目录名改下，主要是将配置中的 theme: yelee修改。

注意：该配置文件中的键值之间一定要有空格，否则轻则没有作用，重则报错，无法启动。

更改主题目录名后，我们还要重新生成主题静态内容，继续在 Git Bash 中输入命令输入如下命令：

hexo g //重新生成静态博客的所有内容

hexo s //重启 hexo 本地服务

重新访问：http://localhost:4000/，看一下效果.

修改Hexo框架主题

上一步完成后，看到的是yelee的默认主题，这里我们可以再次配置一下，修改的是【G:\TerryBlog\themes\yelee】路径下的 _config.yml文件。这里我们可以跟着Yelee 主题使用说明来修改。

发布到Github Pages上

创建Github Pages并SSH授权

现在假设你已经有一个 Gtihub 账号，你还需要一个特别的仓库，特别在仓库名就是你的 Github 账号登录名，比如我的用户名是：MuouTQ，那我要创建的仓库名字完整滴填写是：MuouTQ.github.io，具体效果如下图：

仔细的人可能看到，你的仓库名根本不和你的用户名一样，由于我之前已经创建了一个这样特别的仓库，再创建一个就会提示错误，为了演示方便，所以删了一个T。

创建好仓库之后，要本地生成 SSH 秘钥，方便电脑上的 git 软件好提交内容到 Github 上。

【具体可以参考网上的一篇文章：Git安装及SSH Key管理之Windows篇】

现在用记事本打开公钥，复制文件中的所有内容。访问：https://github.com/settings/ssh，

Title：自己随便取

Key：把刚刚复制的都粘贴进来

把本地的博客内容同步到 Github 上

要把本地的静态博客同步到 Github，我们还需要先安装两个跟部署相关的 hexo 插件：

cd G:\TerryBlog //进入TerryBlog项目目录

上一步，我们可以到 G:\TerryBlog 路径下 Git Bash 一下；

npm/cnpm install hexo-server --save //创建

npm/cnpm install hexo-deployer-git --save //安装自动部署发布工具

编辑TerryBlog的项目配置文件：_config.yml

官网对此配置的介绍：https://hexo.io/zh-cn/docs/configuration.html

主要改这里（一般在最后面）：

 # Deployment
## 这里是重点，这里是修改发布地址，因为我们前面已经加了 SSH 密钥信息在 Github 设置里面了，所以只要我们电脑里面持有那两个密钥文件就可以无需密码地跟 Github 做同步。
## 需要注意的是这里的 repo 采用的是 ssh 的地址，而不是 https 的。分支我们默认采用 master 分支，以后你翅膀硬了要换其他也无所谓。
## Docs: https://hexo.io/docs/deployment.html
  deploy:
  type: git
  repo: git@github.com:MuTouTQ/MuTouTQ.github.io.git
  branch: master

编辑完项目配置文件后我们需要重新部署：

cd G:\TerryBlog              //进入TerryBlog项目目录

上一步，我们可以到 G:\TerryBlog 路径下 Git Bash 一下；
hexo clean//先清除掉已经生成的旧文件
hexo g //再生成一次静态文件
hexo s   //在本地预览下
hexo d   //本地没问题之后，Ctrl + C 停掉本地预览，使用部署命令部署到 Github 上

访问服务器地址进行检查：http://MuTouTQ.github.io/，该访问地址是之前在github上的创建的仓库名称，输入你的github用户名 + .github.io

绑定域名

  • 创建CNAME文件 我们要一个 CNAME 文件（文件名叫 CNAME，文件没有后缀，里面的内容为你购买的域名，不要以http以及www等前缀，只需域名本身即可，如：mutouspace.cn。这个CNAME可以你先建一个txt文件，把后缀名去掉），把该文件放在 G:\TerryBlog 目录下。
  • 获取Github的ip地址 实际获取的是你github上博客项目的ip（即：MuTouTQ.github.io），打开命令窗口，输入【ping MuTouTQ.github.io】来查看ip地址，并记录下来
  • 添加DNS Service记录 我的域名是腾讯云上买的，用的腾讯云的域名解析，将ip地址和你买的域名绑定就好了，域名解析后需要等待几分钟才能被访问

补充：

如果你做完域名解析后，还是没法用你的域名访问，可以这项修改下：

打开你的Git Hub下的MuTouTQ.github.io仓库，找到Settings，点进去

点进去后，找到这里，填入你的域名：mutouspace.cn 点击：SAVE 等一会就可以访问了。

到此为止，我们的博客就成功配置完了！

发表一篇文章

  1. 在G:\TerryBlog 路径下Git Bash执行命令： hexo new "my new post"

  2. 在G:\TerryBlog\source_post中打开my-new-post.md，打开方式使用记事本或notepad++（推荐：MarkdownPad）。

    hexo中写文章使用的是Markdown，没接触过的可以看下Markdown语法说明.

    title: my new post #可以改成中文的，如“新文章”
    date: 2015-04-08 22:56:29 #发表日期，一般不改动
    categories: blog #文章文类
    tags: [博客，文章] #文章标签，多于一项时用这种格式，只有一项时使用tags: blog

    #这里是正文，用markdown写，你可以选择写一段显示在首页的简介后，加上

    #在之前的内容会显示在首页，之后的内容会被隐藏，当游客点击Read more才能看到。

  3. 写完文章后，你可以使用1. hexo g生成静态文件。2. hexo s在本地预览效果。3.hexo d同步到github，然后使用mutouspace.cn进行访问。

HEXO插入图片

第一步：安装插件，在 hexo 根目录打开 Git Bash ,执行
npm install hexo-asset-image --save
第二步：打开 hexo 的配置文件_config.yml
找到 post_asset_folder，把这个选项从false改成true
第三步：打开/node_modules/hexo-asset-image/index.js
将内容更换为下面的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
'use strict';
var cheerio = require('cheerio');
// http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string
function getPosition(str, m, i) {
  return str.split(m, i).join(m).length;
}
var version = String(hexo.version).split('.');
hexo.extend.filter.register('after_post_render', function(data){
  var config = hexo.config;
  if(config.post_asset_folder){
        var link = data.permalink;
    if(version.length > 0 && Number(version[0]) == 3)
       var beginPos = getPosition(link, '/', 1) + 1;
    else
       var beginPos = getPosition(link, '/', 3) + 1;
    // In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
    var endPos = link.lastIndexOf('/') + 1;
    link = link.substring(beginPos, endPos);
    var toprocess = ['excerpt', 'more', 'content'];
    for(var i = 0; i < toprocess.length; i++){
      var key = toprocess[i];
 
      var $ = cheerio.load(data[key], {
        ignoreWhitespace: false,
        xmlMode: false,
        lowerCaseTags: false,
        decodeEntities: false
      });
      $('img').each(function(){
        if ($(this).attr('src')){
            // For windows style path, we replace '\' to '/'.
            var src = $(this).attr('src').replace('\\', '/');
            if(!/http[s]*.*|\/\/.*/.test(src) &&
               !/^\s*\//.test(src)) {
              // For "about" page, the first part of "src" can't be removed.
              // In addition, to support multi-level local directory.
              var linkArray = link.split('/').filter(function(elem){
                return elem != '';
              });
              var srcArray = src.split('/').filter(function(elem){
                return elem != '' && elem != '.';
              });
              if(srcArray.length > 1)
                srcArray.shift();
              src = srcArray.join('/');
              $(this).attr('src', config.root + link + src);
              console.info&&console.info("update link as:-->"+config.root + link + src);
            }
        }else{
            console.info&&console.info("no src attr, skipped...");
            console.info&&console.info($(this));
        }
      });
      data[key] = $.html();
    }
  }
});

第四步：现在就可以插入图片了，比如 hexo new post test 之后
就在source/_posts生成teest.md文件和test文件夹，我们把要插入的图片复制到test文件夹内，
在test.md文件里面按markdown的标准写,（我的文件名是test.jpeg）比如

1
![这是代替图片的文字，随便写](test.jpeg)

总结

常用hexo命令

常见命令

hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo new post "pageName" #新建文章与文件夹
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #部署到GitHub
hexo help  # 查看帮助
hexo version  #查看Hexo的版本

缩写：

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

组合命令：

hexo s -g #生成并本地预览
hexo d -g #生成并上传

最终效果

可以访问我的git博客来查看效果： https://tiantsing.github.io/

参考

基于Hexo+Github Pages的博客搭建

使用Hexo搭建个人博客(基于hexo3.0)

使用hexo+github搭建免费个人博客详细教程