hexo + fexo 搭建 GitHub-Pages 静态博客

发表于 | 分类于

hexo 介绍

hexo 是一个使用 markdown 解析生成静态网页的框架，这样的框架还有 jekyll，前者基于 nodejs，后者基于 Ruby。但都使用 .yml 作为配置文件。之前用过 jekyll 搭建静态博客，但是在入门难易程度，包管理器生态环境和速度方面，貌似 hexo 更好一些。

hexo 默认使用 ejs 作为解析模板，默认 markdown 解析也与 GitHub 最为相似。书写，本地预览和部署到 GitHub repo 都非常方便。

准备工作

安装 Git-Bash

  • Win - download
  • Linux - sudo apt-get install git

在 Linux 上配置 Git 参考这里.

安装 Node

  • Win - download
  • Linux - sudo apt-get install nodejs or install nvm

查看 nodejs 和 npm 版本

1
2
node -v
npm -v

安装 hexo

1
2
cd my-hexo-blog
npm install hexo --save

由于网络环境的原因，现在 npm 安装也非常慢，可以使用淘宝的 npm 镜像 - cnpm 来更快地安装包。参考这里.

1
2
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install hexo

测试运行 hexo

设置 hexo 运行脚本

本人不太喜欢全局安装 npm 包，所以想要使用局部安装的 hexo，需要运行 ./node_modules/.bin/hexo，但是这样很麻烦，可以在项目根目录中写相应的脚本来更好的使用 hexo 命令。

BAT

在项目根目录下创建 hexo.bat 文件，内容如下：

1
2
3
4
5
6
7
8
9
@ECHO off
SET PARAM=
:LOOP
    IF [%1]==[] GOTO END
    SET PARAM=%PARAM% "%1"
    shift
    GOTO LOOP
:END
node_modules\.bin\hexo %PARAM%

BASH

在项目根目录下创建 hexo 文件，内容如下：

1
"node/node" "./node_modules/.bin/hexo" "$@"

这样就可以在项目根目录下使用局部 hexo 命令了。

初始化项目

1
hexo init

初始化完成后，会形成下面的 hexo 项目结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
./
├─ public/ - 生成静态页面存放目录
├─ source/ - md/css 等其他源文件
│   ├─ _drafts/ - 草稿 hexo new draft <title>
│   ├─ _post/ - 文章 hexo new <title>
│   └─ .../
├─ scaffolds/ - 脚手架，即新建文章（或其他类型）时初始化的模板
├─ themes/
│   ├─ landscape/ - 3.2.2 默认主题
│   └─ .../
├─ node_modules/
├─ .deploy_git/ - 部署临时文件夹 hexo deploy
├─ db.json - 本地 web 服务器使用的临时文件
├─ _config.yml - hexo 配置文件
└─ package.json - npm 包依赖描述文件

生成静态页面

其中 public 目录存放 hexo 生成的静态页面。运行

1
hexo generate

会创建 public 目录并生成所有静态页面。

为了在本地预览，hexo 还提供了一个本地 web 服务器环境。运行

1
hexo server

运行成功后，通过访问 localhost:4000 即可预览。

使用 fexo 主题

安装 fexo 主题

1
2
cd my-hexo-blog/themes/
git clone https://github.com/forsigner/fexo.git

修改配置文件

修改博客根目录下的 _config.yml 中的 theme 为 fexo.

配置 themes/fexo/_config.yml 参考这里.

安装插件

1
2
3
4
5
6
# rss 支持
npm install hexo-generator-feed --save
# sitemap 支持
npm install hexo-generator-sitemap --save
# search 支持
npm install hexo-generator-search --save

在 fexo 中自定义样式

fexo 的自定义样式由其配置文件 fexo/_config.yml 中的 personal_style: 设置。对应值的路径相对与 my-hexo-blog/source/，如设置 personal_style: /css/custom.css，则应该创建 my-hexo-blog/source/css/custom.css 文件，并在其中设置样式。

其他不错的主题

第三方服务

使用百度统计

在百度统计申请账号，拿到自己的 token，并将其填入 fexo/_config.yml 中的 baidu_analytics: 属性值。

使用 Disqus 评论

在DISQUS注册，并申请自己的二级域名。在个人账户页面，Setting -> Add Disqus To Site -> GET STARTED，然后填写相应信息。将自己申请的 Disqus 二级域名填如 fexo/_config.yml 中的 disqus_shortname: 属性值。

也可以使用多说评论，修改 duoshuo_shortname: 并注释 Disqus 即可。

使用 GitHub Pages 部署网站

GitHub 提供免费的 300M 网站空间，使得开发者可以静态展示自己的项目或网站。要使用 GitHub Pages 功能，首先申请 GitHub 账号，然后创建一个公开项目 [yourname].github.io。

修改 my-hexo-blog/_config.yml 中的 deploy 属性；

1
2
3
4
5
deploy:
  type: git
  repo: https://github.com/[yourname]/[yourname].github.io.git
  branch: master
  message: 'update blog'

设置好后，在根目录运行

1
hexo deploy

如果没有配置 ssh-key，需要输入 GitHub 的账号密码。

若不想使用 hexo deploy 命令，还可以自己 push public/ 中的静态页面到 [yourname].github.io.git 代码仓库。可以先 clone 仓库到本地，然后拷贝其中的 .git 文件夹到 my-hexo-blog/public/ 中，再使用 git 同步到远端库。

1
2
3
git add -A
git commit -m "update my blog"
git push

性能优化

gulp 压缩

安装 gulp 相关依赖包

1
2
3
4
5
6
npm install gulp --save
npm install gulp-htmlclean --save
npm install gulp-htmlmin --save
npm install gulp-imagemin --save
npm install gulp-minify-css --save
npm install gulp-uglify --save

编写 gulpfile.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
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin')
// 压缩 css
gulp.task('minify-css', function() {
   return gulp.src('./public/**/*.css')
       .pipe(minifycss())
       .pipe(gulp.dest('./public'));
});
// 压缩 html
gulp.task('minify-html', function() {
 return gulp.src('./public/**/*.html')
   .pipe(htmlclean())
   .pipe(htmlmin({
        removeComments: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
   }))
   .pipe(gulp.dest('./public'))
});
// 压缩 js
gulp.task('minify-js', function() {
   return gulp.src('./public/**/*.js')
       .pipe(uglify())
       .pipe(gulp.dest('./public'));
});
// 压缩图片
gulp.task('images', function () {
   gulp.src('./public/images/*.*')
       .pipe(imagemin({
           progressive: true
       }))
       .pipe(gulp.dest('./public'))
});
// 执行 gulp 命令时执行的任务
gulp.task('default', [
   'minify-html','minify-css','minify-js','images'
]);

新建 gulp.bat

1
2
3
4
5
6
7
8
9
@ECHO off
SET PARAM=
:LOOP
    IF [%1]==[] GOTO END
    SET PARAM=%PARAM% "%1"
    shift
    GOTO LOOP
:END
node_modules\.bin\gulp %PARAM%

压缩 public/ 下的静态页面

1
gulp <task>

p.s. 之前一直用 Grunt 做压缩，花了较长时间学习，积累经验，但是感觉理解还是不够，这次折腾发现 gulp 更容易上手和使用，gulpfile.js 可读性很高，简直相见恨晚。

CDN 优化

GitHub 提供的 web 服务是很好的，但是国内的网络环境使得访问 GitHub Pages 的速度惨不忍睹，提高访问速度的方法无外乎压缩源码、使用 CDN 等手段。上节试了压缩源码，但是性能提升十分有限。如果能把所需的所有 js/css/image 等文件以 CDN 方法部署，就能大大提高访问速度。hexo 目前还没有集成的方案，这方面还需要学习和研究，使用 CDN 优化网站访问速度。

SEO 优化

GitHub Pages 在 SEO 方面先天不足，由于百度不对其做索引，导致网站流量仅能通过有限的渠道被访问，也导致搭在 GitHub 上的博客大都无人问津。应该从两方面来提高网站流量，最主要的是提高内容质量，再一方面做好 SEO 优化。hexo 可以就有 seo 插件，生成 sitemap。

1
2
3
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
npm install hexo-generator-seo-friendly-sitemap --save

参考链接

打赏