hexo-next-arao-edit

以后会持续更新的~

博客在于内容而不在于形式，反反复复折腾体验了几个主题。以后或许便会稳定不在折腾。

前段时间用Github上Pages服务配合Hexo搭建了自己的博客，后来整理下记录下过程。
后来将主题换为 next （最终是使用fexo），所以更新一下，方便后来人，也便于自己再用到来查看

从写博客到在网页上展示的过程是这样的，用MarkDown写下自己的博客内容，通过Hexo生成静态的HTML网页，然后push（git源代码管理工具提交）到 coding/Github 上你的代码仓库，再通过代码托管平台的Pages服务发布到网上。

博客搭建

博客搭建的准备工作

步骤：

  • 申请 Github/coding 账号，然后新建一个 github_username.github.io 的仓库，比如我的Github用户名是 sanyucz ，所以仓库名称就是 sanyucz.github.io ，这个名字是要严格遵守的，搭建完成后也是在浏览器中直接通过 https://sanyucz.github.io 来访问自己的博客。同样的 coding 上直接新建一个用户名的仓库，比如我的就是 sanyucz ，搭建完成之后可以通过 https://sanyucz.coding.me 来访问。
  • 在Github/coding中加入自己电脑的 ssh。
  • 安装 node.js
  • 安装 homebrew
  • 安装 Hexo，参考文档

开始搭建博客

当 Hexo 也安装好之后执行以下命令来搭建本地博客：

1
2
3
$ hexo init <folder>	// <folder> 是博客的本地路径
$ cd <folder> // cd 切换目录到博客的本地路径
$ npm install

当执行完之后，如果成功了的话，那么目录下的结构应该是这样的：

1
2
3
4
5
6
7
8
9
.
├── _config.yml	// 博客的配置文件
├── package.json
├── scaffolds
├── scripts
├── source			// 博客的内容
|   ├── _drafts
|   └── _posts
└── themes			// 博客的主题

继续在终端中输入 hexo s 会看到以下输出：

1
2
INFO  Start processing
INFO  Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

这时候在浏览器中输入 http://0.0.0.0:4000/ 就能看到自己的博客了，
停止服务摁下 Ctrl + C。

1
2
3
4
5
6
// Hexo 常用的命令
hexo s 	// hexo server 开启本地 Hexo 服务
hexo g 	// hexo generate 生成本地 html js
hexo d 	// hexo deploy 发布到远程仓库
hexo c 	// hexo clean 删除generate生成的文件和缓存
hexo n 	// hexo new,用于新建一篇文章 eg: hexo new "我的第一篇博客"

配置 Hexo

Hexo 的配置文件有两个，其中一个是在博客目录下的 _config.yml，另外一个在 blog/theme/your_theme/_config.yml ，从位置就可以看出来，在博客目录下的主要是配置博客站点信息，比如所博客的title，作者等。在主题目录下多是配置主题样式相关，关于主题，下面再讲。

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
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: 王修斌的技术博客	// 博客标题
subtitle: 与肝胆人共事，无字句处读书	// 博客子标题
description: 爱生活、爱编程，爱学习，爱折腾。	// 博客的描叙
author: sanyucz	// 作者
language: zh-CN	// 默认语言
timezone:
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://sanyucz.github.io/ // 博客的地址
root: /
permalink: :year/:month/:day/:title/ // 时间格式
permalink_defaults:
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10	// 博客列表每页显示博客的数量
pagination_dir: page
# Extensions
## Plugins: http://hexo.io/plugins/
#RSS订阅
plugin:
- hexo-generator-feed
- hexo-generator-baidu-sitemap
# Extensions
## Plugins: https://hexo.io/plugins/
# theme: hexo-theme-next
# theme: hexo-theme-material
theme: jacman	// 博客的主题
stylus:
  compress: true
// 博客评论 一般是多说和disqus，disqus是世界主流，在国内大多用多说，原因你懂得，这里两个都用了
duoshuo_shortname: sanyucz
disqus_shortname: sanyucz
# Deployment
## Docs: https://hexo.io/docs/deployment.html
// 远程仓库配置 这里我是推送到 coding 和 github 两个平台的仓库，所以配置了两个
deploy:
      type: git
      repo: 
          github: git@github.com:sanyucz/sanyucz.github.io.git,master
          coding: git@git.coding.net:sanyucz/sanyucz.git,master
      # branch: master
      # message: github

为博客安装插件

1
2
3
4
5
6
7
8
9
10
11
12
13
npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-category --save
npm install hexo-generator-tag --save
npm install hexo-server --save
npm install hexo-deployer-git --save
npm install hexo-deployer-heroku --save
npm install hexo-deployer-rsync --save
npm install hexo-deployer-openshift --save
npm install hexo-renderer-marked@0.2 --save
npm install hexo-renderer-stylus@0.2 --save
npm install hexo-generator-feed@1 --save
npm install hexo-generator-sitemap@1 --save

插件的作用各不相同，有的是用来生成RSS订阅，有的是压缩 js/CSS。
各种插件的安装推荐查看我所使用的 Jacman 主题的作者写的文章：如何使用 Jacman 主题

切换主题

Hexo 自带的主题太过于简单，这里推荐使用 Next。简洁，但不简单。
下载下来重命名为 next 并放到 blog/theme 下面，修改 站点配置文件 blog/_config.yml 中的 theme 字段： theme: next，注意冒号之后要有空格。

绑定域名

从万网（阿里域名）买了三年的top域名，三年也不过就一包烟钱而已，买过域名之后需要解析，解析是为了访问域名可以直接访问我们的博客。
在阿里域名注册并登陆之后，点击 控制台-域名-解析，解析如下：
![/images/aliyuming.png)

因为国内访问 Github 很慢，所以我默认访问的是coding上的博客。如果只在Github上面托管了博客，那么只需要解析一条默认的就好，需要注意的是域名后面有个 ‘ . ’。解析成功之后等待几分钟就可以通过域名来访问博客啦。

搭建中遇到的错误

DTraceProviderBindings 错误

1
2
3
{ [Error: Cannot find module './build/Release/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/default/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/Debug/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }

试过官网建议 npm install hexo --no-optional，不行。
网上说的删除插件~，什么鬼？

最后我直接把引起错误的代码给注释了，根据报错信息，定位到dtrace-provider.js，
注释其中内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var builds = ['Release', 'default', 'Debug'];
for (var i in builds) {
    try {
        var binding = require('./build/' + builds[i] + '/DTraceProviderBindings');
        DTraceProvider = binding.DTraceProvider;
        break;
    } catch (e) {
        // if the platform looks like it _should_ have DTrace
        // available, log a failure to load the bindings.
        if (process.platform == 'darwin' ||
            process.platform == 'sunos' ||
            process.platform == 'freebsd') {
            console.error(e);
        }
    }
}

OK，继续搞起！

博客的优化

虽然博客已经搭建起来，并且有了一个好看的主题，但是很多时候还是显得过于千篇一律。

访问速度优化

尝试了多种的优化方式，我觉得最简单、效果最好的就是，只在Github上托管的博客，最好在coding上也托管一份，毕竟coding是国内的，访问速度上要快很多。
另外再推荐一个压缩页面的插件：gulp，具体使用请另行百度。
其他方式：

访客、工具箱以及其他效果