简介
这年头要是没有个博客都不好意思给别人说你是程序员,我用XX笔记呀,不行吗?不行,这玩意儿要么不能公开分享,要么公开分享要会员,现在到处都是开源,自己学到了东西都不能分享给需要帮助的人,真是伤心呀。那么今天就来聊聊当你用Hexo搭建了博客,怎么自动更新呢,大家都知道Hexo是需要手动生成HTML静态网页的,虽然命令很少,但是每次写完博客先得推送到git然后在生成静态文件,再推送到服务器,想想我这个心也是醉了,不过看到知乎上还有人带着U盘,我只能呵呵了~,你们耐心真好~
那我们今天就来说说怎么使用Travis CI来自动构建你的博客
什么是Travis CI
Travis CI 是目前新兴的开源持续集成构建项目,它与jenkins,GO的很明显的特别在于采用yaml格式,同时他是在在线的服务,不像jenkins需要你本地打架服务器,简洁清新独树一帜。目前大多数的github项目都已经移入到Travis CI的构建队列中,据说Travis CI每天运行超过4000次完整构建。对于做开源项目或者github的使用者,如果你的项目还没有加入Travis CI构建队列,那么我真的想对你说out了。
我的博客架构
也算是一个框架吧
首先我的博客是使用GITBOOK来搭建的,托管到Github提供的Gitpage服务上的
每次写完博客git push到github,然后Travis自动构建,构建完成后自动推送到Gitpage服务上
生成后的HTML文件和博客的源文件我是放到一个仓库的,只是使用了不同的分支
master:博客的静态文件,也就是hexo生成后的HTML文件,因为要使用Gitpage服务,所以他规定的网页文件必须是在master分支
save:是博客的源代码
启用要构建的项目
首先如果你要使用Travis CI,你必须要GIthub账号(好像Travis CI只支持构建github的项目)和一个项目
使用Github账号登录Travis CI官网
可以看到这个界面会显示当前github账号的所以项目,如果没有显示,点击右上角的“Sync account”按钮,就可以同步过来了
在Travis CI配置Github的Access Token
标题已经说得很明白了吧,我们需要在Travis上配置Access Token,这样我们就可以在他构建完后自动push到gitpgaes了,到这里肯定有人要问了,咋你把用户名密码直接写文件里呢,如果你真有这样的问题,那我只能说呵呵~,但我要告诉你的是写里面肯定是可以push成功的
在github上生成Access Token
首先我们来到github的设置界面,右边点击头像SETTINGS到Personal access tokens页面,点击右上角的Generate new token按钮会重新生成一个,点击后他会叫你输入密码,然后来到如下界面,给他去一个名字,下面是勾选一些权限
注意,下面的权限给repo就可以了(够用)
生成完后,你需要拷贝下来,只有这时候他才显示,下载进来为了安全他就不会显示了,如果忘了只能重新生成一个了,拷贝完以后我们需要到Travis CI网站配置下
在Travis CI配置
配置界面还是在项目的setting里面,如下图,GH_TOKEN必须叫这个名字
至于为什么我们要在这里配置,我想大家肯定应该明白了,写在程序里不安全,配置到这里相当于一个环境变量,我们在构建的时候就可以引用他。
目录结构修改
到这里我已经配置了要构建的仓库和要访问的Token,但是问题来了,他知道怎么构建,怎么生成静态文件吗,怎么push的gitpages,又push到那个仓库吗,所以这里我们还需要在源代码的仓库里创建一个.travis.yml配置文件,放到源代码的根目录
走到这里相当于Travis CI创建好了关系,我们开始对仓库内容进行编辑,可以将我的博客代码仓库克隆下来,进行文件更改即可 https://github.com/jokerbj/book,注意更改是更改我得SAVE分支,里面存放源码
开始git clone git@github.com:jokerbj/book.git ,你的目录下会出现BOOK目录,GIT BRANCH SAVE目录,只要对里面的四个文件进行更改。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
{ "title": "Joker's book", "author": "Joker", "description": "linux python", "language": "zh-hans", "gitbook": "3.2.3", "styles": { "website": "styles/website.css", "ebook": "styles/ebook.css", "pdf": "styles/pdf.css", "mobi": "styles/mobi.css", "epub": "styles/epub.css" }, "structure": { "readme": "README.md", "summary":"SUMMARY.md" }, "links": { "sidebar": { "CNBLOG博客地址": "https://www.cnblogs.com/jokerbj/" } }, "plugins": [ "highlight", "search", "-sharing", "fontsettings", "-livereload", "splitter", "anchor-navigation-ex", "github", "tbfed-pagefooter", "-multipart", "theme-comscore", "toggle-chapters", "advanced-emoji", "favicon", "emphasize" ], "pluginsConfig": { "theme-default": { "showLevel": false }, "github": { "url": "https://github.com/jokerbj/" }, "tbfed-pagefooter": { "copyright": "FROM JOKER", "modify_label": "该文件修订时间:", "modify_format": "YYYY-MM-DD HH:mm:ss" }, "sharing": { "google": null, "facebook": null, "twitter": null, "weibo": null, "all": null }, "favicon":{ "shortcut": "./gitbook/images/favicon.ico", "bookmark": "./gitbook/images/favicon.ico", "appleTouch": "./gitbook/images/apple-touch-icon.jpg", "appleTouchMore": { "120x120": "./gitbook/images/apple-touch-icon.jpg", "180x180": "./gitbook/images/apple-touch-icon.jpg" } } } }
这是书的样式,GitBook 默认带有5个插件:
- highlight 高亮代码
- search 搜索
- sharing 分享
- fontsettings 字体
- livereload 实时加载
插件主题名称格式
gitbook-plugin-X: 插件;
gitbook-theme-X: 主题。
如果要去除自带的插件,可以在插件名称前面加 -:可参考我得BOOK.JSON
安装插件
$ gitbook install
不要忘记这步,会根据BOOK.JSON插件来安装,根目录 node_modules 文件下能看到安装那些插件。
或单独安装插件:
$ npm install gitbook-plugin-anchor-navigation-ex --save 这是滚屏
$ https://www.webfx.com/tools/emoji-cheat-sheet/ 这是支持表情
关于BOOK.JSON文件的修改介绍,以及插件使用参考https://www.cnblogs.com/mingyue5826/p/10307051.html
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
# Summary * [introduction](README.md) ----- * [LINUX](./linux/README.md) * [第一章:基础](./linux/linux_basis/README.md) * [第1节:用户管理](./linux/linux_basis/用户管理.md) * [第二章:WEB](./linux/linux_web/README.md) * [第1节:NGINX配置](./linux/linux_web/NGINX配置文档.md) * [第三章:自动化](./linux/linux_automation/README.md) * [第1节:ANSIBLE配置](./linux/linux_automation/ANSIBLE配置文档.md) ----- * [PYTHON](./python/README.md) * [第一章:基础](./python/python_basis/README.md) * [第1节:Python介绍](./python/python_basis/Python介绍文档.md) * [第2节:Python变量](./python/python_basis/Python基础文档.md)
这是目录,会帮你自动创建,注意目录的父子关系
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
language: node_js # 设置语言 node_js: stable # 设置相应的版本 cache: apt: true directories: - node_modules # 缓存不经常更改的内容 before_install: - export TZ='Asia/Shanghai' # 更改时区 - npm install -g gitbook@3.2.3 - npm install -g gitbook-cli@2.3.2 install: - gitbook install # 安装插件 branches: only: - save # 只监测save分支,可根据自己情况设置 env: global: - GH_REF: github.com/jokerbj/book.git #设置GH_REF script: - gitbook init - gitbook build - bash deploy.sh
这是与TRAVIS CI配合的文件,TRAVIS会根据这个文件自动构建
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
#!/bin/bash # GIT全局配置 git config user.name "jokerbj" git config user.email "849185108@qq.com" # 进入通过GITBOOK BUILD构建的BOOK目录,存放着目录结构,文章,插件 cd _book # 初始化GIT git init # 添加所有文件 git add . # 提交 git commit -m "Travis CI Auto Builder at `date +"%Y-%m-%d %H:%M"`" git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master:master
这是在TRAVIS上你是如何在TRAVIS里面构建,然后推送到MASTER上
之后就是在当前目录创建你要写文章目录,记住每个目录都要有个README.MD文件,就是点击目录时候显示的内容,你要写文件,要修改SUMMARY的文件目录结构,然后在创建的目录下写文档,之后提交到SAVE,就可以了
源码产生
安装
https://nodejs.org/en/download/ 安装NODE.JS
$ npm install gitbook -g 安装GITBOOK
$ npm install gitbook-cli -g
初始化和编辑书籍
gitbook 的基本用法非常简单,基本上就只有两步:
使用 gitbook init 初始化书籍目录
使用 gitbook serve 编译书籍
下面将结合一个非常简单的实例,来介绍 gitbook 的基本用法。
gitbook init
首先,创建如下目录结构:
$ tree book/
book/
├── README.md
└── SUMMARY.md
0 directories, 2 files
README.md 和 SUMMARY.md 是两个必须文件,README.md 是对书籍的简单介绍:
$ cat book/README.md
# README
This is a book powered by [GitBook](https://github.com/GitbookIO/gitbook).
SUMMARY.md 是书籍的目录结构。内容如下:
$ cat book/SUMMARY.md
# SUMMARY
* [Chapter1](chapter1/README.md)
* [Section1.1](chapter1/section1.1.md)
* [Section1.2](chapter1/section1.2.md)
* [Chapter2](chapter2/README.md)
创建了这两个文件后,使用 gitbook init,它会为我们创建 SUMMARY.md 中的目录结构。
$ cd book
$ gitbook init
$ tree
.
├── README.md
├── SUMMARY.md
├── chapter1
│ ├── README.md
│ ├── section1.1.md
│ └── section1.2.md
└── chapter2
└── README.md
2 directories, 6 files
注意:在我的实验中,gitbook init 只支持两级目录!
$ gitbook build 构建静态文件
$ 书籍目录结构创建完成以后,就可以使用 gitbook serve 来编译和预览书籍了:
$ gitbook serve
Press CTRL+C to quit ...
Live reload server started on port: 35729
Starting build ...
Successfully built!
Starting server ...
Serving book on http://localhost:4000
gitbook serve 命令实际上会首先调用 gitbook build 编译书籍,完成以后会打开一个 web 服务器,监听在本地的 4000 端口。
现在,可以用浏览器打开 http://127.0.0.1:4000 查看书籍的效果
HEXO源码产生
https://nodejs.org/en/download/
-npm install -g hexo
-npm install -g hexo-cli
$ hexo init [folder]
新建一个网站。如果没有设置 folder ,Hexo 默认在目前的文件夹建立网站,运行一次就可以了
$ hexo clean
清除缓存文件 (db.json) 和已生成的静态文件 (public)。
在某些情况(尤其是更换主题后),如果发现您对站点的更改无论如何也不生效,您可能需要运行该命令。
$ hexo generate
生成静态文件。
选项 描述
-d, --deploy 文件生成后立即部署网站
-w, --watch 监视文件变动
该命令可以简写为 hexo g
$ hexo deploy
部署网站。
参数 描述
-g, --generate 部署之前预先生成静态文件
该命令可以简写为:hexo d
$ hexo server
启动服务器。默认情况下,访问网址为: http://localhost:4000/。
选项 描述
-p, --port 重设端口
-s, --static 只使用静态文件
-l, --log 启动日记记录,使用覆盖记录格式
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
# Hexo Configuration ## Docs: https://hexo.io/docs/configuration.html ## Source: https://github.com/hexojs/hexo/ # Site title: Joker's blog subtitle: Joker的博客小站(Github托管) description: Linux&Python入门群547409659 keywords: author: Joker language: zh-Hans timezone: Asia/Shanghai # URL ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' url: http://hexo.jplove.top/ root: / permalink: :year/:month/:day/:title/ permalink_defaults: # Directory source_dir: source public_dir: public tag_dir: tags archive_dir: archives category_dir: categories code_dir: downloads/code i18n_dir: :lang skip_render: - README.md # Writing new_post_name: :title.md # File name of new posts default_layout: post titlecase: false # Transform title into titlecase external_link: true # Open external links in new tab filename_case: 0 render_drafts: false post_asset_folder: false relative_link: false future: true highlight: enable: true line_number: true auto_detect: false tab_replace: # Home page setting # path: Root path for your blogs index page. (default = '') # per_page: Posts displayed per page. (0 = disable pagination) # order_by: Posts order. (Order by date descending by default) index_generator: path: '' per_page: 10 order_by: -date # Category & Tag default_category: uncategorized category_map: tag_map: # Date / Time format ## Hexo uses Moment.js to parse and display date ## You can customize the date format as defined in ## http://momentjs.com/docs/#/displaying/format/ date_format: YYYY-MM-DD time_format: HH:mm:ss # Pagination ## Set per_page to 0 to disable pagination per_page: 10 pagination_dir: page # Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: next # Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: git repo: git@github.com:jokerbj/blog.git branch: master
还有一个主题需要改在THEMES/下的NEXT/下的_CONFIG.YML,就需要你参考下面主题教程文档看下怎么修改
.
├── node_modules:#依赖包-安装插件及所需nodejs模块。
├── public #最终网页信息。即存放被解析markdown、html文件。
├── scaffolds #模板文件夹。即当您新建文章时,根据 scaffold生成文件。
├── source #资源文件夹。即存放用户资源。
└── _posts #博客文章目录。
└── themes #存放主题。Hexo根据主题生成静态页面。
├── _config.yml #网站的配置信息。标题、网站名称等。
├── db.json:#source解析所得到的缓存文件。
├── package.json # 应用程序信息。即配置Hexo运行需要js包。
HEXO博客教程https://hexo.io/zh-cn/docs/
HEXO NEXT主题教程http://theme-next.iissnan.com/getting-started.html