作者個人網(wǎng)站：http://www.harddone.com

前篇提要

在上一篇中，我們主要介紹了服務(wù)器的環(huán)境安裝。在本文中，我們將就具體的操作步驟加以說明并截圖展示。

利用 Hugo 生成靜態(tài)網(wǎng)站

1. 創(chuàng)建項目目錄

在您本地合適的目錄下創(chuàng)建一個空文件夾，命名為BlogTest, 為了方便之后的命令行演示，我們假設(shè)剛才創(chuàng)建的目錄完整路徑為：

/xxx/xxx/xxx/BlogTest

2. 新建網(wǎng)站

打開終端執(zhí)行Hugo命令，新建一個網(wǎng)站：

hugo new site /xxx/xxx/xxx/BlogTest

然后進(jìn)入新建的網(wǎng)站目錄,準(zhǔn)備后續(xù)的命令操作。

cd /xxx/xxx/xxx/BlogTest

hugo_1_10.png

打開剛才創(chuàng)建的目錄，我們可以發(fā)現(xiàn)，hugo已經(jīng)自動幫我們生成了很多文件，這些就是跟創(chuàng)建網(wǎng)站相關(guān)的資源。執(zhí)行完hugo new site xxx命令其實是沒有public文件夾，該目錄是之后生成靜態(tài)網(wǎng)站資源用以發(fā)布時產(chǎn)生的。

hugo_1_11.png
接下來，依次執(zhí)行下列命令行，詳細(xì)解釋參考注釋。

# git 初始化
git init

# 將主題ananke作為外鏈加入的本地倉庫
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

# 修改hugo 配置文件，應(yīng)用剛才下載的博客主題
echo 'theme = "ananke"' >> config.toml

# 將public 作為外鏈加入到本地倉庫，請注意換成你自己在GitHub所持創(chuàng)建的倉庫地址
git submodule add -b master https://github.com/LazyBonesLZ/LazyBonesLZ.github.io.git public

# 本地倉庫跟你創(chuàng)建的網(wǎng)站源碼GitHub倉庫關(guān)聯(lián)
git remote add origin https://github.comazyBonesLZ/BlogTest.git

# 添加你的第一篇博客
hugo new post/firstblog.md
# 創(chuàng)建的第一篇博客在content/post目錄下，用熟悉的編輯工具打開該目錄下的firstblog.md
open content/post

編輯你的第一篇博客內(nèi)容，跟普通的markdown風(fēng)格文件操作一樣。需要注意的地方如示例截圖所示：

hugo_1_12.png
保存文本內(nèi)容后，然后執(zhí)行hugo提供的調(diào)試命令查看效果，檢查博客文檔效果是否生效：

hugo server -D

# 然后在瀏覽器訪問 
http://localhost:1313/

3.正式生成用以發(fā)布的網(wǎng)站文件

上一步中的 hugo server -D 是用以調(diào)試的命令，不會在public目錄下生成文件。要生成用以發(fā)布的文件，我們需要先配置好hugo 配置文件。

打開config.toml文件

# 如果已有域名，配置成指向服務(wù)器的域名，否則直接配置為服務(wù)器的IP
baseURL = "http://blog.harddone.com/"
languageCode = "en-us"
title = "My New Hugo Site"
#  設(shè)置博客主題，如果以后要更改，直接改變該值設(shè)置
theme = "ananke"

配置發(fā)布腳本
在完成Hugo網(wǎng)站配置文件后，直接執(zhí)行hugo命令就可以生成public 文件夾下的靜態(tài)網(wǎng)站資源內(nèi)容。直接發(fā)布到服務(wù)器就完成了一個靜態(tài)網(wǎng)站的部署。

記得我們在第一篇提到，public下的內(nèi)容會被push到GitHub做一個備份，然后服務(wù)器通過git 來抓取完成博客的更新。所以為了操作方便，我們把這一系列的操作寫成可執(zhí)行腳本，自動化。
```
# cd  到項目根目錄
cd xx/xx/BlogTest
# 新建腳本文件 deploy.sh
vim deploy.sh
```
保存以下腳本內(nèi)容：
```
   echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"

   # Build the project.
   hugo # if using a theme, replace with `hugo -t <YOURTHEME>`

   # Go To Public folder
   cd public
   # Add changes to git.
   git add .

   # Commit changes.
   msg="rebuilding site `date`"
   if [ $# -eq 1 ]
   then msg="$1"
   fi
   git commit -m "$msg"

   # Push source and build repos.
   git push origin master

   # Come Back up to the Project Root
   cd ..
```

然后在更新博客后，直接在終端執(zhí)行:

./deploy.sh "這里填寫提交git的log"

是不是感覺簡單明了了？到目前為止，我們還只是完成了將本地網(wǎng)站的源碼和要發(fā)布的網(wǎng)站資源自動push到GitHub倉庫。

接下來，服務(wù)器還需要一些配置，才能達(dá)到我們在第一篇文章中設(shè)置的目標(biāo)：自動化部署。

服務(wù)器配置

1. 網(wǎng)站根目錄

#  創(chuàng)建網(wǎng)站根目錄
mkdir blog2

# cd 到目錄blog2
cd blog2

# git 初始化
git init 
git remote add origin https://github.com/LazyBonesLZ/LazyBonesLZ.github.io.git

# 從 Github第一次抓取
git pull origin master

2.webhook服務(wù)

利用Github提供的webhook功能，我們需要在服務(wù)器端啟動一個webhook的服務(wù)，用以監(jiān)聽來自LazyBonesLZ.github.io倉庫的push event。每當(dāng)收到這樣的消息，我們就可以在服務(wù)器執(zhí)行腳本，從該倉庫抓取最新資源，達(dá)到博客內(nèi)容實時更新的目的。

2.1 創(chuàng)建webhook目錄,創(chuàng)建腳本git_pull.sh

#創(chuàng)建目錄
mkdir webhook
#進(jìn)入目錄
cd webhook
# 創(chuàng)建腳本
vim git_pull.sh

在腳本中保存以下內(nèi)容：

cd /root/blog2
git pull origin master
exit 0

2.2 github_webhook.js腳本

我們需要用到nodejs來監(jiān)聽來自GitHub的消息，需要用到中間件 github_webhook_handler, 我們使用npm 來安裝：

npm install github_webhook_handler

新建github_webhook.js腳本
該腳本主要參考https://www.xxxlbox.com/posts/2018/hugo-deployment-webhook/，但是我們用到是GitHub倉庫而非Gitlab,所以做了細(xì)微改動。
```
  vim github_webhook.js
```
寫入以下腳本內(nèi)容：
```
var http = require('http')
var exec = require('child_process').exec
var createHandler = require('github-webhook-handler')
var handler = createHandler({ path: '/webhook', secret: 'myxxxxx' })

http.createServer(function (req, res) {
handler(req, res, function (err) {
    res.statusCode = 404
    res.end('no such location')
  })
}).listen(7777)

handler.on('push', function (event) {
    let currentTime = new Date();
    console.log('\n--> ' + currentTime.toLocaleString());
    console.log('Received a push event for %s to %s', event.payload.repository.name, event.payload.ref);
    exec('sh ./webhook/git_pull.sh', function (error, stdout, stderr) {
        if(error) {
            console.error('error:\n' + error);
            return;
        }
        console.log('stdout:\n' + stdout);
        console.log('stderr:\n' + stderr);
    });
})
```
這個腳本利用的是Node.js的child_process模塊來執(zhí)行shell腳本。上面的path: '/webhook'你可以任意設(shè)置，secret_key驗證為myxxxxx。我們在購買服務(wù)器的時候，安全組配置時添加了7777端口，所以端口用的是7777，你可以隨意設(shè)置，總之不要過于明顯，但是要記得在阿里云控制臺安全組添加端口。這樣下來最終的監(jiān)聽地址就是http://0.0.0.0:7777/webhook了，0.0.0.0表示該http服務(wù)監(jiān)聽本機(jī)的所有ip上收到的請求，說白了就是0.0.0.0可以換成服務(wù)器的ip或者指向服務(wù)器的所有域名。拿我自己的服務(wù)器作例子就是http://blog.harddone.com:7777/webhook。
pm2啟動腳本

我們用pm2來啟動：pm2 start github-webhook.js，使用pm2 startup命令來設(shè)置腳本開機(jī)啟動。pm2的更多高級用法還請查看文檔。

3. Nginx配置更新

再次重申，本人菜鳥。對于nginx不甚了解。接下來給出所有的相關(guān)配置。更高級的玩兒法請自行深入。

default.conf

vim /etc/nginx/conf.d/default.conf

#
# The default server
#

server {
#    listen       80 default_server;
#   listen       [::]:80 default_server;
  listen       80;
  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 {
    }

}

blog.conf
新建blog.conf,重新指定nginx 根目錄，否則網(wǎng)站很可能出現(xiàn)404.

cd /etc/nginx/conf.d/
vim blog.conf

server {
#    listen       80 default_server;
#   listen       [::]:80 default_server;
    listen     80;
    server_name  blog.harddone.com;
    root         /root/blog2; # 重新指定根目錄

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

    location / {
       index index.html index.htm index.php;
       autoindex on;
    }

    # NodeJS 將 Web 服務(wù)跑在了 7777 端口，我們可以用 Nginx 反向代理到 80 端口
    location /webhook { 
      alias /root/webhook;
      proxy_pass http://127.0.0.1:7777;  
    }
    error_page 404 /404.html;
        location = /40x.html {
    }

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

}

403 Forbidden
由于我的啟動用戶和nginx工作用戶不一致。
解決方案：參考https://blog.csdn.net/reblue520/article/details/52799500

vim /etc/nginx/nginx.conf

#user nginx;  #將nginx改為root
user root;

重啟Nginx

/etc/init.d/nginx restart

然后在瀏覽器輸入http://blog.harddone.com驗證服務(wù)是否正常。如果可以看到我們的網(wǎng)站示例，
恭喜，服務(wù)器端驗證無誤。

4. Github配置

到目前為止，我們已經(jīng)完成了90%的工作。但是，我們還不能簡單的完成自動化部署。為啥呢？因為Github的webhook功能還沒激活呢。

登錄Github,進(jìn)入LazyBonesLZ.github.io倉庫，點擊Setting

hugo_1_13.png

hugo_1_14.png

注意事項：

第2步：'webhook'即 ‘github_webhook.js’ 中配置的path
第3步：必須選擇‘a(chǎn)pplication/json’,否則不起作用
第4步：‘Secret’即 ‘github_webhook.js’中配置的‘ secret_key’
一定要和腳本中設(shè)置一致，否則，你懂的！

好了，到目前為止，配置工作都已完成。
剩下的只是我們?nèi)粘５暮唵尾僮髁?，如果我們某天又心血來潮，想寫篇博客消遣消遣，該怎么做呢?br> 辛苦這么久的配置，就是為了這個時刻。

cd /xxx/xxx/BlogTest
hugo new post/MySecondBlog.md
# 呃～～編輯博客：想用什么編輯工具都可以， Markdown語法
# 編輯完了？嗯！
./deploy.sh
# 執(zhí)行完后，不出意外的話，服務(wù)器已經(jīng)已經(jīng)更新了！ 完美！

# ------------------ 
# 這樣就完了？ ～～
# nooooo~~
# 細(xì)心的你肯定已經(jīng)發(fā)現(xiàn)，我們的腳本只是把網(wǎng)站相關(guān)的東西push到了xxx.github.io這個倉庫
# 源碼還沒提交備份呢？?。?！
git add .
git commit -m '備注：要提交源碼啊！'
git push -u origin master
# ALL DONE, 這下服務(wù)器也更新了，github源碼也提交了，新更新的內(nèi)容也備份到另一個github倉庫。
#再也不怕了。

總結(jié)一下

你肯定發(fā)現(xiàn)，其實我們根本就不用這么麻煩的，人家github pages就可以搭建博客的啊。為啥還要費這勁？
～～，敲黑板！剛開始的時候就說了，這是一次沖動和閑來無事的蛋疼。。。就這！

后期計劃：

? 找個好看的網(wǎng)站主題吧？
？把新趕的幾篇稿子搬到自己的網(wǎng)站吧？
？加個廣告吧？！
？加個https吧？！
還是看時間吧?。?！

感謝：
https://gohugo.io/getting-started/quick-start/
https://www.xxxlbox.com/posts/2018/hugo-deployment-webhook/
https://www.lovelucy.info/auto-deploy-website-by-webhooks-of-github-and-gitlab.html
https://blog.csdn.net/hanshileiai/article/details/54571028
https://tecadmin.net/install-latest-nodejs-and-npm-on-centos/
https://blog.csdn.net/reblue520/article/details/52799500
https://github.com/SixQuant/gitlab-webhook-handler/blob/master/gitlab-webhook-handler.js
https://github.com/rvagg/github-webhook-handler

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Hugo+Nginx：利用webhook自動部署靜態(tài)網(wǎng)站到遠(yuǎn)程CentOS服務(wù)器（三）

Hugo+Nginx：利用webhook自動部署靜態(tài)網(wǎng)站到遠(yuǎn)程CentOS服務(wù)器（三）

前篇提要

利用 Hugo 生成靜態(tài)網(wǎng)站

1. 創(chuàng)建項目目錄

2. 新建網(wǎng)站

3.正式生成用以發(fā)布的網(wǎng)站文件

服務(wù)器配置

1. 網(wǎng)站根目錄

2.webhook服務(wù)

2.1 創(chuàng)建webhook目錄,創(chuàng)建腳本git_pull.sh

2.2 github_webhook.js腳本

pm2啟動腳本

3. Nginx配置更新

4. Github配置

總結(jié)一下

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Hugo+Nginx： 利用webhook自動部署靜態(tài)網(wǎng)站到遠(yuǎn)程CentOS服務(wù)器（三）

前篇提要

利用 Hugo 生成靜態(tài)網(wǎng)站

1. 創(chuàng)建項目目錄

2. 新建網(wǎng)站

3.正式生成用以發(fā)布的網(wǎng)站文件

服務(wù)器配置

1. 網(wǎng)站根目錄

2.webhook服務(wù)

2.1 創(chuàng)建webhook目錄,創(chuàng)建腳本git_pull.sh

2.2 github_webhook.js腳本

pm2啟動腳本

3. Nginx配置更新

4. Github配置

總結(jié)一下

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Hugo+Nginx：利用webhook自動部署靜態(tài)網(wǎng)站到遠(yuǎn)程CentOS服務(wù)器（三）