Hexo搭建个人博客+切换主题+Github托管+自动构建全流程记录
warning:
这篇文章距离上次修改已过1786天,其中的内容可能已经有所变动。
最近一直在折腾用Hexo搭建博客,目前暂告一段落。
正好把这一段时间的心得记录一下,希望可以帮助到有需要的小伙伴们。
本文主要记录了Hexo个人博客搭建、主题切换、Github托管、自动构建。
首先成果先嘚瑟一下。

Hexo个人博客搭建
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
安装环境
- git: 安装git | Git 设置代理 加快clone速度
- Node.js(v8.10+):官方下载页面 | 淘宝镜像页面
安装 hexo
# 基础环境安装完毕,
# 使用下面的命令安装 hexo 。
npm install -g hexo-cli
初始化 hexo
# 初始化 hexo 目录
hexo init <hexo目录>
# 进入 hexo 目录
cd <hexo目录>
# 安装依赖
npm install


hexo 目录说明
hexo #hexo 初始化目录
├── node_modules # Node.js 依赖安装目录
├── public # 生成的静态文件存放目录
├── scaffolds # 模板文件目录
| ├── draft.md # 默认模板
| ├── page.md # 页面模板
| └── post.md # 文章模板
├── source # 资源目录,用来存放文章源文件
| ├── _drafts # 默认页面存放目录
| └── _posts # 文章存放目录
├── themes # 主题目录,存放用来生成静态页面的主题
├── _config.yml # hexo的配置文件
├── package.json # hexo的依赖和插件信息
└── package-lock.json # npm已安装依赖的记录(具体来源和版本信息)
info:目前,您只需要简单了解即可,后面会详细说明的。
修改全局配置文件
新建页面(文章)
# 新建页面
hexo new page <页面名>
# 新建文章
hexo new post <文章名> #post可以省略


- title:文章标题(自动生成)
- date:文章创建时间(自动生成)
- categories:分类(手动添加)
- tags:标签(手动添加)
Error:注意:categories(分类)下表示分类层级,而不是文章属于多个分类。详细请参阅此处:分类和标签
生成&预览
# 生成静态网站
hexo generate
# 也可以简写成
hexo g
# 启动内置服务器,来预览网站,默认访问地址 http://localhost:4000/
hexo server
# 也可以简写为
hexo s


warning:hexo 常用命令总结:传送门
更换 hexo 主题
首先,去挑一个自己心仪的主题:Hexo 官方主题分享页

然后,将其放到主题目录中。

在根据主题说明,安装所需插件,配置主题信息。

最后,在配置文件中启用主题

Github托管
相关文章:使用阿里云OSS部署静态网站
添加公钥到自己的gitbub账户中
密钥生成,请参考:Linux SSH密钥登录 - 生成密钥

新建静态网站托管仓库
Error:注意:仓库名必须为 <你GitHub登陆名>.github.io ,每个账号仅能拥有一个静态网站托管仓库

配置 hexo 自动部署
info:当然,您可以直接将 public 目录下生成的静态文件提交到仓库。
不过,我们可以通过插件自动完成网站生成部署。(笑
不过,我们可以通过插件自动完成网站生成部署。(笑
安装 git 自动部署插件
npm install hexo-deployer-git --save
修改配置文件
# Deployment
## Docs: https://hexo.io/docs/deployment.html
#部署部分的设置
deploy:
type: 'git'
repo: https://github.com/dingzd1995/dingzd1995.github.io.git #github仓库地址
branch: master # github分支
message: '' #自定义提交信息
生成&部署
# 生成&部署
hexo g -d

自定义域名
info:GitHub Pages 自定义域名通过
CNAME
文件绑定,应存放在仓库根目录下。(仓库设置也可以配置)此处,在 source 目录下新建此文件,是因为在 hexo 生成静态文件时,会自动生成此文件到网站根目录下
在 source 目录下新建 CNAME文件。在CNAME文件中添加自定义的域名(无需加https://
)。


启用 HTTPS


自动构建
这里使用的是 Travis CI 提供的自动构建服务。
将静态站托管仓库克隆回本地
# clone静态托管仓库到本地
git clone https://github.com/dingzd1995/dingzd1995.github.io.git
新建分支并切换
# 新建并切换分支
git checkout -b source
清理文件
删除hexo自动生成的静态文件(注意保留.git目录)。

添加hexo源码
将整个hexo目录下的文件复制到此处。(注意删除原来的.git目录)。

同步代码到github
git add -A
git commit -m '初始化自动部署分支'
git push --set-upstream origin source

新建 Personal access tokens

Error:注意:token只显示这一次,请妥善保管!
配置 Travis CI
首先访问 Travis CI ,使用github登陆,并授权读取仓库。

在 source 分支添加自动构建配置文件
新建 .travis.yml
文件
language: node_js
node_js: stable
before_install:
- export TZ='Asia/Shanghai' # 更改时区
install:
- npm install
script:
- hexo g
after_script:
- cd ./public
- git init
- git config user.name "dingzd1995" #你的名字
- git config user.email "dingzd1995@foxmail.com" #你的邮箱
- git add .
- git commit -m "Travis CI Auto Builder at `date +"%Y-%m-%d %H:%M"` GMT +8:00 ."
- git push --force --quiet "https://${travis}@${GH_REF}" master:master
branches:
only:
- source #监测的分支
env:
global:
- GH_REF: github.com/dingzd1995/dingzd1995.github.io.git #提交的地址
享受成果吧
