github

1. 在github中新建仓库并命名为 github用户名.github.io的仓库

1

2.新增token

2
3
4

保存好生成的 token,后面用于配置 travis-ci

3.新建一个hexo分支用于存储后面的项目(分支可以自定义,后面配置中保持一致即可)

安装node.js

mac下载地址:https://nodejs.org/en/
其他系统,请自行寻找,如不本地调试,node.js也可以不装

node.js我使用的12.21.0版本,最新版的node.js在hexo构建后会报错

1
2
3
4
5
6
7
(node:25044) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
(node:25044) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:25044) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
(node:25044) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(node:25044) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:25044) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency

全局安装hexo

1
npm install -g hexo-cli

添加环境变量

1
echo 'PATH="$PATH:./node_modules/.bin"' >> ~/.profile

运行

1
2
3
$ hexo init ashin33 
$ cd ashin33
$ npm install

在指定目录下(上面为我的文件夹,请根据个人实际情况修改)生成hexo项目

运行以下命令就可以预览你的博客了

1
2
3
4
hexo clean ## 用于清除已构建的文件  
hexo generate ##或者 hexo g 构建项目
hexo server ##或者 hexo s
##也可以`hexo s -g` 一步更比两步强

安装hexo主题

1
git submodule add https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
  • 此处选择了butterfly主题,更多主题请移步 https://hexo.io/themes/
  • 此处使用了git submodule 子模块加载命令,用于后续我们主项目推送时,将主题可以一起推到项目里,否则后面travis-ci自动构建会报错,找不到标签等错误

安装pug和stylus渲染器,用于渲染主题

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

hexo博客发布与butterfly主题的具体使用,参考各自文档

hexo文档:https://hexo.io/zh-cn/docs/
butterfly文档:https://butterfly.js.org/posts/21cfbf15/

hexo配置

修改项目根目录下的_config.yml文件

1
2
3
4
5
6
7
8
title: 神的孩子都在跳舞  
subtitle: ''
description: 神的孩子都在跳舞
keywords:
author: Alon
language: zh-CN
timezone: Asia/Shanghai
url: https://ashin33.github.io/ ##github分配的静态页面地址

5.jpg

1
2
3
4
5
theme: butterfly  ##themes目录下的主题目录
deploy:
type: git
repo: https://github.com/ashin33/ashin33.github.io.git ##仓库地址
branch: hexo ##代码要推送的分支

6

butterfly配置

  • 复制themes/butterfly下的_config.yml文件到项目根目录下并重命名为_config.butterfly.yml
  • hexo构建时会合并_config.yml和_config.butterfly.yml的配置
  • 在此修改butterfly的配置,在后面更新主题是就不会影响配置了

配置travis-ci用于自动构建

  • 不使用travis-ci手动构建也是可以的,可以直接使用
    hexo deploy -g 或者 hexo d -g,此命令会根据第9步中配置的deploy的参数直接构建并推送

1. 在travis-ci官网用github账号登录 ,并激活,如图

7
8

2. 进入travis-ci中的自己的项目中进入setting中,按下图进行设置

9

10

3.在项目根目录新增travis-ci的配置文件.travis.yml,并写入以下内容

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
# 指定语言环境
language: node_js
# 指定需要sudo权限
sudo: required
# 指定node_js版本,版本过低的话构建时travis会报错Uncaught SyntaxError: Unexpected token....
node_js:
- 12.21.0
# 指定缓存模块,可选。缓存可加快编译速度。
cache:
directories:
- node_modules

# 指定博客源码分支,因人而异。hexo博客源码托管在独立repo则不用设置此项
branches:
only:
- hexo

before_install:
- npm install -g hexo-cli

# Start: Build Lifecycle
install:
- npm install
- npm install hexo-deployer-git --save
# 执行清缓存,生成网页操作
script:
- hexo clean
- hexo generate

# user.name替换为自己的github用户名
# user.email替换为自己的github邮箱
# ${travis_ci}中的travis替换为自己github中的token名
# 这样每次推送代码,travis会自动在master分支中构建hexo
after_script:
- cd ./public
- git init
- git config user.name "ashin33"
- git config user.email "ashin_33@163.com"
- git add .
- git commit -m "Travis ci push"
- git push --force --quiet "https://${travis_ci}@${gh_repo}" master:master
env:
global:
- gh_repo: github.com/ashin33/ashin33.github.io.git
# End: Build LifeCycle

5.推送干净的项目代码(hexo clean过的项目代码)到hexo分支

6.代码推送后,进入travis中可以看到构建过程,等待构建成功,访问https://ashin33.github.io 即可,网址中的ashin33.github.io替换为你的仓库名即可