bomo的开发随笔

记录工作学习点滴

0%

使用Hexo和github pages搭建博客

发表于 分类于

1. 简介

hexo是一个基于node.js的静态博客程序，可以方便的生成静态网页（纯html）支持多个平台（Windows/MAC/Linux），风格优雅，更适合写技术博客，与hexo类似的博客程序还有jekyll，jekyll被github着力推荐官方就提供了jekyll教程，但是jekyll是基于ruby写的，并且关于代码高亮没找到比较好的方案，就选择了用hexo

2. 配置环境

2.1 安装git

作者用的是mac，可以使用brew下面命令安装

1
$ brew install git

也可以直接上git官网下载安装

2.2 安装node.js

同样的，mac可以使用brew安装，新版的node.js已经包含npm工具，不需要再另外安装了

1
$ brew install node

可以通过下面命令检查是否已安装

1
2
$ node -v
$ npm -v

如果是windows用户可以通过官网下载 jode.js

2.3 Hexo安装

上面的安装完成后，接下来安装hexo

1
2
3
4
5
6
npm install hexo-cli -g   #-g表示全局安装, npm默认为当前项目安装
hexo init blog            #在当前目录下新建blog目录初始化博客
cd blog                   #进入blog目录
#npm install               
hexo generate             #根据当前配置生成静态页面
hexo server               #启动本地服务，默认为：[http://localhost:4000/](http://localhost:4000/)

接下来就可以通过http://localhost:4000/查看效果了
hello hexo

3. 配置github pages

每个github账户都可以有一个外部空间/Responsitory，可以直接通过用户名.github.io访问到该仓库的内容

  • 在github上新增一个responsitory，仓库名为 用户名.github.io 或 用户名.github.com
  • 创建完成后，github会自动将 用户名.github.io指向该仓库，默认访问根目录下的index.html页面
  • 可以进入Responsitory的Setting页查看

github会提供几个模板搭建站点，我们可以不用他提供的模板，可以在仓库里面，添加一个简单的index.html文件，如果能通过用户名.github.com访问，则表明创建成功了

4. 写博客

hexo的文章存放在source目录下

1
2
3
├── source  
|   ├── _posts    #存放文章  
|   └── _drafts   #存放草稿
1
$ hexo new post "postName"        # 在source/_posts 目录下创建postName.md文件

创建文件的命名格式可以在_config.yml文件配置

1
2
# Writing
new_post_name: :year-:month-:day-:title.md

文件创建完成后会自动生成以下格式（可以自己添加）

1
2
3
4
5
6
---
title: 使用Hexo和github pages搭建博客
date: 2016-04-18 19:50:26
categories: blog                  # 分类
tags: [blogs, hexo]               # 标签，格式：[标签, 标签2]
---

关与写作的各种参数可以参见：https://hexo.io/docs/writing.html

写完后预览的时候发现，文章在首页就全部显示出来了，如果不想全部显示，可以在文章中间添加下面标记，在首页列表就会出现Read More的标记

1
<!--more-->

Hexo支持使用Markdown语法写文章，我比较习惯用Atom写Markdown，Atom有个hexo插件

5. 主题

官方自带主题基本够用，有能力可以自己改造，当然，网上已经有很多人做了一些很好看的主题了，我们可以直接拿来用，下面是官方列出的一些主题，找到喜欢的可以直接用

https://github.com/hexojs/hexo/wiki/Themes
https://hexo.io/themes

在hexo上，主题放在themes目录下，我们只需要把别人做好的主题clone下来就好了，然后在_config.yml修改一下配置
例如：我们可以https://github.com/xiangming/landscape-plus这个主题clone下来

1
git clone git@github.com:xiangming/landscape-plus.git themes/landscape-plus

修改设置_config.yml

1
theme: landscape-plus

6. 添加多说评论插件

到多说官网注册和创建一个站点

修改配置
到themes/landscape-plus/_config.yml添加多说的配置，shortname即注册的站点名称

1
2
# Duoshuo
duoshuo_shortname: bomo

参见官方说明，替换评论相关的代码http://dev.duoshuo.com/threads/541d3b2b40b5abcd2e4df0e9

完成，如下图评论有了
评论

7. 部署到github上

修改配置_config.yml

1
2
3
4
deploy:
  type: git
  repository: https://github.com/zhengbomo/zhengbomo.github.io.git
  branch: master

安装 hexo-deployer-git

1
$ npm install hexo-deployer-git --save

部署hexo到git上

1
$ hexo deploy

部署过程需要输入账号密码，然后会push到github上，参考：https://hexo.io/docs/deployment.html

hexo部署时会把最终生成的博客文件（public目录下的文件）push到git远程仓库，而博客程序还是在本地，当我们切换电脑的时候，无法对博客进行重新编辑和发布，这个时候我们可以在git添加一个分支hexo用来存放博客程序和编写的内容，详情可以参见： git创建分支hexo存放博客程序

8. 域名绑定

通常域名在godaddy注册比较靠谱，这个是最大的域名提供商，而且不需要备案，支持支付宝付款，购买的时候可以使用优惠码会便宜一些，网上有很多优惠码，可以自行搜索，购买过程很简单，这里就不贴了

  1. 注册和配置DNS服务器
    Godaddy自带的域名解析服务器比较慢，在国内推荐使用DNSpod：快，免费，稳定。

  • 到DNSpod注册登陆，然后到用户中心，添加域名，例如我的域名为bomobox.org

  • 进入设置

    添加两个A记录指向github提供的ip，参见这里

    1
    2
    192.30.252.153
    192.30.252.154

    添加一个CNAME记录指向自己的github域名：username.github.io
    把其他的删除

  1. 注册域名和配置DNS

  • 到Godaddy购买域名完成后完成后进入MyAccount

  • 进入DNS Manager修改DNS服务器

    1
    2
    f1g1ns1.dnspod.net
    f1g1ns2.dnspod.net

  1. 到github仓库的根目录添加CNAME文件，文件内添加自己的域名，否则会出现404访问错误，也可以在hexo的source目录下添加，然后不熟到github

上面步骤设置完成后可能会有几个小时的延迟，才能生效，总的来说还是比较简单的

9. 问题

在使用别人的主题的时候可能会报错或者有些功能用不了，原因可能是部分插件没有安装，例如RSS用不了，那可能是hexo-generator-feed没安装，下面列举一些常用的插件，建议都安装，没有用到也没有关系，需要先到hexo程序目录下在执行命令，插件位于node_modules目录下

1
2
3
4
5
6
7
8
9
$ npm install hexo-generator-feed --save                  #支持RSS
$ npm install hexo-generator-sitemap --save               #生成站点地图
$ npm install hexo-generator-baidu-sitemap --save         #生成百度站点地图
$ npm install hexo-html-minifier --save                   #HTML 压缩
$ npm install hexo-uglify --save                          #JavaScript 压缩
$ npm install hexo-clean-css --save                       #CSS 压缩插件
$ npm install hexo-generator-seo-friendly-sitemap --save  #SEO优化
$ npm install hexo-deployer-git --save                    #git部署插件

并在博客配置文件_config.yml配置plugin

1
2
3
Plugins:
- hexo-generator-feed
- hexo-generator-sitemap

更多插件可以在https://hexo.io/plugins/找到

10. Atom插件

由于我编写md使用的是Atom，这里推荐几个Atom上的插件

11. 总结

使用hexo搭建博客环境还是非常方便的，基本上都是自动的，当然还有一些详细的配置，例如分页，分类，评论等，Hexo支持的插件也相当多的，接下来可以好好写博客了，以后再慢慢完善了，今天先到这里

12. 参考链接

https://hexo.io