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