使用Hugo+Gitbook+Nginx 構建靜態博客網站

時間 2021-01-10

標籤 css html 前端 node linux nginx git github golang web 欄目 Git 简体版

原文原文鏈接

前言：以前我一直使用的是wordpress搭建的博客，因爲是在某雲搞活動時買的最低配置服務器，而wordpress又須要安裝不少組件，網站變得愈來愈慢。最近發現了Hugo 是 Go 編寫的靜態網站生成器，速度很快，依賴於 Markdown 文件，很是適合博客，索性就把以前的所有幹掉了。css

看了一些帖子，大部分是在本地編輯好，而後轉化爲html文件扔到Github，而後經過 Github Page的方式訪問，我也測了下感受訪問Github仍是太慢了，而且最近GIthub也不穩定，因此我就直接在我Linux服務器上部署了，使用我的域名訪問仍是挺快的。個人博客html

本問部署方式是使用Nginx做爲Web服務器，代理Hugo和Gitbook的靜態網頁，經過我的域名訪問。前端

1、部署hugo

在Github上下載Hugo的Release包上傳到Linux服務器node

$ yum -y install  git golang
$ mkdir -p /app/hugo_0.74.3
$ tar xf hugo_0.74.3_Linux-64bit.tar.gz -C /app/hugo_0.74.3
$ cp /app/hugo_0.74.3/hugo  /usr/local/bin/
$ hugo version
Hugo Static Site Generator v0.74.3-DA0437B4 linux/amd64 BuildDate: 2020-07-23T16:22:34Z

建立網站

$ hugo new site zhanminblog[名稱自定義]
$ ls
archetypes  config.toml  content  data  layouts  static  themes

選擇主題

在這裏hugo themes選擇你喜歡的主題並根據主題的REAMDE進行相應操做，好比我選擇的是Pure主題。linux

$ cd /app/zhanminlog
$ git clone https://github.com/xiaoheiAh/hugo-theme-pure themes/pure

由於每一個主題的樣式和功能不一樣，因此要根據主題的README介紹進行調試，將主題的配置和文章目錄複製到網站根目錄下nginx

$ rm -f /app/zhanminlog/config.toml
$ cp -r themes/pure/exampleSite/*  /app/zhanminblog/

根據本身的想法修改模板的配置文件進行調試，可參考主題的README文件，個人部分定義以下：git

$ cat  config.
baseURL: http://www.unmin.club
theme: pure
title: 前行
defaultContentLanguage: zh  # en/zh/...
footnoteReturnLinkContents: ↩
hasCJKLanguage: true
paginate: 7
enableEmoji: true
PygmentsCodeFences: false
googleAnalytics: ""      # UA-XXXXXXXX-X 
permalinks:
  posts: /:year/:month/:filename/
taxonomies:
------------------------

建立第一篇文章

根據主題的定義，文章須要放在posts目錄下，因爲上面咱們已經copy了主題模板的文件。因此咱們能夠直接新建文章，無需使用hugo new posts/xxx.md指令。github

$ cd /app/zhanminblog/content/posts
$ touch heelo.md
$ cat hello.md 
+++ #爲文章的定義，如標題，做者，目錄等。
author = "前行"
title = "第一篇文章"
date = "2020-07-29"
description = "這是我使用hugo建立的第一篇文章"
tags = [
    "hugo",

]
categories = [
    "hugoblog",
]
#series = ["系列"]
#aliases = ["別名"]
+++

# 1、Hugo介紹
Hugo是輕量級的靜態資源服務
```shell
$ hello hugo
--------

啓動服務預覽

因爲我使用的是Linux公有云服務器，須要開啓外機訪問，若是是windows本機調試，則直接使用hugo server啓動訪問4000端口便可golang

$  hugo server --bind="0.0.0.0" -v -w -b http://www.unmin.club

固然這種啓動方式也可直接使用到線上，直接修改或者建立md文件便可，無需使用build指令轉化爲html文件。web

若是你是本地調試則可使用hugo命令將文件轉化爲html格式，會生成名爲「public」的目錄，而後將這個目錄的內容放到Github或者Nginx上便可訪問。

因爲我還須要使用Gitbook來寫文章，並且打算將這兩個集成到一塊，因此我選擇的方式是直接在Linux上修改文章，經過啓動其餘端口號來預覽文章，而後在經過hugo 轉換爲html，複製到Nginx的html目錄下發布，最後經過nginx的80端口訪問。

指定端口號來預覽文章

$ hugo server --bind="0.0.0.0" -v -w -p 8080 -b http://www.unmin.club

發佈文章

預覽沒有問題則構建爲html文件，生成public目錄，注意使用hugo指令須要在網站的根目錄。

$ hugo 
$ ls public/
2020      about       about-us    categories  css     elk-book     fonts       index.xml  k8s-book  posts            searchindex.json  sitemap.xml
404.html  about-hugo  avatar.png  contact     donate  favicon.ico  index.html  js         page      prometheus-book  series            tags

2、部署Nginx做爲前端代理

使用nginx做爲前端，代理後面的hugo與gitbook服務

$ yum -y install  nginx

複製剛纔轉換生成的html文件到Nginx下，更新文章時能夠寫一個update.sh 腳本

$ rm -rf   /usr/share/nginx/html/*
$ cp -r  /app/zhanminblog/public/* /usr/share/nginx/html

啓動nginx

$ systemctl start nginx

訪問網站

3、部署gitbook

Hugo如今已經可使用了，咱們開始部署gitbook

部署node.js

$ wget https://nodejs.org/dist/v12.18.1/node-v12.18.1-linux-x64.tar.xz 
$ tar xf node-v12.18.1-linux-x64.tar.xz 
$ vim /etc/profil
$ export PATH=$PATH:/app/node-v12.18.1-linux-x64/bin
$ source /etc/profile
$ node -v
v12.18.1

安裝gitbook

$ npm install gitbook-cli -g
$  gitbook  -V
CLI version: 2.3.2
GitBook version: 3.2.3

建立書籍

$ mkdir /app/k8s-book
$ gitbook init
$ ls /app/k8s-book
 README.md  SUMMARY.md

建立書籍目錄

$ cat SUMMARY.md 
# Summary

* [前言](README.md)
* [Kubernetes基礎](Chapter1/README.md)
    * [基本概念與組件原理](Chapter1/jieshao.md)
    * [使用Kubeadm部署集羣](Chapter1/kubeadm.md)
    * [YAML文件語法](Chapter1/YAML.md)
    * [深刻理解Pod](Chapter1/Pod.md)
* [Kubernetesb編排控制器](Chapter2/README.md)
    * [Deployment](Chapter2/deployment.md)
    * [StatefulSet](Chapter2/StatefulSet.md)
    * [DaemonSet](Chapter2/DaemonSet.md)
* [Kubernets配置管理](Chapter3/README.md)
    * [ConfigMap](Chapter3/ConfigMap.md)
    * [Secret](Chapter3/Secret.md)
    * [ServiceAccount](Chapter3/ServiceAccount.md)
    * [RBAC](Chapter3/RBAC.md)
* [Kubernetes持久化存儲](Chapter4/README.md)
    * [PV](Chapter4/Pv.md)
    * [PVC](Chapter4/PVC.md)
    * [StorageClass](Chapter4/StorageClass.md)
    * [本地持久化存儲](Chapter4/LocalPv.md)
    * [網絡分佈式存儲](Chapter3/Ceph.md)
安裝功能插件

$ vim book.json
{
    "title": "前行",  
    "author": "前行", 
    "description": "kubernetes", 
    "language": "zh-hans", 
    "gitbook": "3.2.3",  
    "styles": {       
        "website": "./style/website.css"
    },
    "structure": {   
        "readme": "README.md"
    },
    "links": {      
        "sidebar": {
            "回到博客": "http://www.unmin.club"
        }
    },
    "plugins": [   
        "anchors",
        "auto-scroll-table", 
    "chapter-fold", 
    "expandable-chapters-small",
    "toggle-chapters",
        "advanced-emoji",  
        "code", 
        "favicon", 
        "fontsettings",                    
        "klipse",  
        "-livereload", 
        "-lunr", 
        "pageview-count",
        "page-toc-button", 
        "popup", 
        "sharing-plus",
        "-sharing", 
        "splitter", 
        "-search",
        "search-pro", 
        "tbfed-pagefooter",
        "todo", 
        "hide-element"
    ],
    "pluginsConfig": {   
        "hide-element": {
            "elements": [".gitbook-link"]
        },
        "theme-default": {
            "showLevel": true
        },
        "code": {
            "copyButtons": true
        },
        "tbfed-pagefooter": {
            "copyright": "Copyright © zhanmin 2020",
            "modify_label": "本書發佈時間：",
            "modify_format": "YYYY-MM-DD HH:mm:ss"
        },
        "page-toc-button": {
            "maxTocDepth": 2,
            "minTocSize": 2
        },
        "sharing": {
            "douban": false,
            "facebook": false,
            "google": false,
            "hatenaBookmark": false,
            "instapaper": false,
            "line": false,
            "linkedin": false,
            "messenger": false,
            "pocket": false,
            "qq": true,
            "qzone": true,
            "stumbleupon": false,
            "twitter": false,
            "viber": false,
            "vk": false,
            "weibo": true,
            "whatsapp": false,
            "all": [
                "weibo","qq", "qzone", "douban", "facebook","google",
                              "linkedin","twitter","whatsapp"
            ]
        },
        "anchor-navigation-ex": {
            "showLevel": true
        },
        "favicon":{
            "shortcut": "",
            "bookmark": ""
        }
    }
}

安裝文件中的插件

$ gitbook install

建立文章

$ mkdir /app/k8s-book/Chapter1 
$ vim /app/k8s-book/Chapter1/README.md
hello  gitbook

gitbook也是支持本地預覽的，使用gitbook serve指令便可

$ gitbook serve

沒問題咱們就和hugo同樣轉換爲html文件，會生成_book目錄，使用gitbook build指令便可更新文章。

$ gitbook build
$ ls /app/k8s-book
_book  Chapter1  Chapter2  Chapter3  Chapter4  Chapter5  Chapter6  Chapter7  README.md  SUMMARY.md  update.sh

配置Nginx

ok，如今咱們修改Nginx的配置文件，添加gitbook的目錄地址

$ vim /etc/nginx/nginx.conf
--------------------
    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

      location / {
       }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }

      location /k8s-book {   ## 新增長gitbook訪問路徑
           alias /app/k8s-gitbook/_book;  # 這個路徑是關鍵，就是GitBook工程下build出來的_book目錄，須要運行gitbook build命令自動生成
           index  index.html index.htm;
           autoindex on;
--------------------

平滑重啓