GITBOOK/HEXO TRAVIS GITHUB-PAGES 博客搭建

时间 2019-12-07

标签 gitbook hexo travis github pages 博客搭建栏目 Git 繁體版

原文原文链接

简介

这年头要是没有个博客都很差意思给别人说你是程序员，我用XX笔记呀，不行吗？不行，这玩意儿要么不能公开分享，要么公开分享要会员，如今处处都是开源，本身学到了东西都不能分享给须要帮助的人，真是伤心呀。那么今天就来聊聊当你用Hexo搭建了博客，怎么自动更新呢，你们都知道Hexo是须要手动生成HTML静态网页的，虽然命令不多，可是每次写完博客先得推送到git而后在生成静态文件，再推送到服务器，想一想我这个心也是醉了，不过看到知乎上还有人带着U盘，我只能呵呵了~，大家耐心真好~css

那咱们今天就来讲说怎么使用Travis CI来自动构建你的博客html

什么是Travis CI

Travis CI 是目前新兴的开源持续集成构建项目，它与jenkins，GO的很明显的特别在于采用yaml格式，同时他是在在线的服务，不像jenkins须要你本地打架服务器，简洁清新独树一帜。目前大多数的github项目都已经移入到Travis CI的构建队列中，听说Travis CI天天运行超过4000次完整构建。对于作开源项目或者github的使用者，若是你的项目尚未加入Travis CI构建队列，那么我真的想对你说out了。node

个人博客架构

也算是一个框架吧python

首先个人博客是使用GITBOOK来搭建的，托管到Github提供的Gitpage服务上的linux

每次写完博客git push到github，而后Travis自动构建，构建完成后自动推送到Gitpage服务上git

生成后的HTML文件和博客的源文件我是放到一个仓库的，只是使用了不一样的分支程序员

master：博客的静态文件，也就是hexo生成后的HTML文件，由于要使用Gitpage服务，因此他规定的网页文件必须是在master分支github

save：是博客的源代码web

启用要构建的项目

首先若是你要使用Travis CI，你必需要GIthub帐号（好像Travis CI只支持构建github的项目）和一个项目npm

使用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目录，只要对里面的四个文件进行更改。

{
    "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"
            }
        }
    }
}

book.json

这是书的样式，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文件的修改介绍，以及插件使用参考http://www.javashuo.com/article/p-rlozfjjk-hw.html

# 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)

SUMMARY

这是目录，会帮你自动建立，注意目录的父子关系

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.YML

这是与TRAVIS CI配合的文件，TRAVIS会根据这个文件自动构建

#!/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

DEPLOY.SH

这是在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 启动日记记录，使用覆盖记录格式

# 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

_CONFIG.YML

还有一个主题须要改在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