Hexo建站比较简单,并提供了多种模板,方便快速开发个人博客。
在使用过程中,唯一让我感到麻烦的地方,就是每次修改完内容之后,都得重新编译,然后将编译完的静态文件重新上传到github仓库(或者自己的服务器)
再搜索过程中,发现使用Hexo的小伙伴都碰到过这种问题,并且已有合适的解决方案。
以下记录本站自动部署过程。
前期所需:
- Hexo 项目
- Github 账户
- Travis 账户(与GitHub关联的)
按照Hexo的教程,依次运行以下命令,建立新项目blog
$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install
$ hexo server
完成 hexo server
之后,正常情况 terminal/cmd
下会提示打开 localhost://4000
在浏览器打开该地址后,就打开了Hexo的原始页面,至此Hexo新项目建立完毕
Github Pages 是Github的亲儿子,所以只要有Github账户,就可以生成一个对应Github Pages 页面。
必须符合规则 以 username.github.io 作为仓库名,其中 username 是你 github 的用户名,这个名字不能出错。如果出错,那么需要你删掉这个仓库重来,更改仓库名是无效的。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cp9HKCfm-1620197735935)(http://img.ohh.ink//%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2/%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2%20Travis.png)]
注意Travis中,我将
key
设置为了github
,这个key
可以任意设置,但是要记住,后面要用的
注意Travis中,我将key
设置为了github
,这个key
可以任意设置,但是要记住,后面要用的
注意Travis中,我将key
设置为了github
,这个key
可以任意设置,但是要记住,后面要用的
详细操作可以查看此文章
blog
项目根目录下,创建.travis.yml
内容如下,可根据自己的环境进行修改
# 使用语言
language: node_js
# node版本
node_js: stable
# 设置只监听哪个分支
branches:
only:
- dev
# tarvis生命周期执行顺序详见官网文档
before_install:
- git config --global user.name "Oscar" # git username
- git config --global user.email "[email protected]" # git Email
- npm install -g hexo-cli
- npm i hexo-generator-json-content --save # 这个是我使用的Theme需要的,如果你使用的Theme不需要,可以删除
install:
- npm i
script:
- git submodule init # 这个是我使用的Theme需要的,如果你使用的Theme不需要,可以删除
- git submodule update # 这个是我使用的Theme需要的,如果你使用的Theme不需要,可以删除
- rm -rf ./themes/yilia/_config.yml # 这个是我使用的Theme需要的,如果你使用的Theme不需要,可以删除
- cp ./_config.yml.themes ./themes/yilia/_config.yml # 这个是我使用的Theme需要的,如果你使用的Theme不需要,可以删除
- hexo clean
- hexo generate
after_success:
- cd ./public
- git init
- git add --all .
- git commit -m "Travis CI Auto Builder"
# 这里的 $github 即之前在 travis 项目的环境变量里添加的
# 这里的 $github 即之前在 travis 项目的环境变量里添加的
# 这里的 $github 即之前在 travis 项目的环境变量里添加的
- git push --quiet --force https://[email protected]/username/username.github.io.git
master
- hexo d
在本地新建的blog
根目录下,运行
git init
git remote add origin https://github.com/username/username.github.io.git
# 创建新分支
git checkout -b dev
git add -A
git commit -m 'code'
git push origin dev
推送之后,去Travis查看一下(需要等5-10s左右),看有没有拉取分支并进行编译
图示情况即为成功。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vVYchKLg-1620197735938)(http://img.ohh.ink//%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2/Travis%E6%88%90%E5%8A%9F.png)]
至此,Travis自动部署,生成Github Pages 就完成了
我比较喜欢鹅厂前端工程师出品的Yilia,所以拿这个作为演示
在blog
根目录下生成.gitmodules
,内容如下
[submodule "themes/yilia"]
path = themes/yilia
url = https://github.com/litten/hexo-theme-yilia.git
上面是添加了git子目录
在根目录下运行,将Theme配置文件外置
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
cp ./themes/yilia/_config.yml ./_config.yml.themes
修改根目录下_config.yml
theme: yilia
deploy:
type: git
repository: https://github.com/ouhaohan8023/ouhaohan8023.github.io.git
branch: master # 将build后的静态网页发布到github仓库master分支
jsonContent:
meta: false
pages: false
posts:
title: true
date: true
path: true
text: false
raw: false
content: false
slug: false
updated: false
comments: false
link: false
permalink: false
excerpt: false
categories: false
tags: true
完整使用上面给出的.travis.yml
将以上修改加入git,并提交到github,观察自动部署状态