Hexo + coding 博客的搭建和优化

Posted by Abin's blog on March 27, 2016

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 也安装好之后执行以下命令来搭建本地博客:

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

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

.
├── _config.yml	// 博客的配置文件
├── package.json
├── scaffolds
├── scripts
├── source			// 博客的内容
|   ├── _drafts
|   └── _posts
└── themes			// 博客的主题

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

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

// 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,作者等。在主题目录下多是配置主题样式相关,关于主题,下面再讲。

# 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

为博客安装插件

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 错误

{ [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, 注释其中内容:

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,具体使用请另行百度。 其他方式:

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