Hexo 部署至 Nginx 設置 CI/CD 流程

除了 GitHub Pages 其實還有第二種選擇

Posted by Young on 2022-11-20
Estimated Reading Time 7 Minutes
Words 1.5k In Total
Viewed Times

Prerequisite

DNS、VPS,Shared Host,Server、Linux

本地端 hexo 設定

1
2
3
4
5
6
7
npm install hexo-cli -g
hexo init test-hexo
............
cd test-hexo/
npm install
...........
hexo g && hexo s

那中間主題的設置以及其他關於 hexo 的設定就不多加贅述,直接先來看看 hexo 在本地端是否有成功運作
localhost
看到有出現預設的 hexo 頁面或是你自己的主題即可

搭建 git server

在 Server 上搭建 git 服務,這邊能看到我的 shell 提示已是git@yang,表示當前的 user 是git,而目前所在於yang這台主機中。

1
2
3
git@yang:~$ sudo apt-get install git -y
git@yang:~$ git --version
git version 2.34.1

新增 git user

確定下載成功後,要創建一個 git user

1
2
git@yang:~$ sudo adduser git
adduser: 『git』使用者已存在。

由於我已經建好,因此顯示的是已存在,沒創建過的就簡單設定一下基本的密碼以及其他資訊

建立裸倉

1
2
3
4
5
6
git@yang:~$ su - git
git@yang:~$ ls -rlt
........
mkdir blog && chown -R git:git $_ # 靜態檔案存放位置
mkdir projects && chown -R git:git $_ && cd $_ # 建立項目目錄並設定權限
git init --bare hexo.git && chown -R git:git $_ # 創建hexo的裸倉並設定權限

建立免密 ssh 連線

在遠端主機上添加 ssh-key

1
2
git@yang:~/projects/hexo.git$ cd ~
git@yang:~$ mkdir .ssh

這時回到本機建立金鑰並複製到遠端主機上

1
2
ssh-keygen -t rsa
ssh-copy-id -i id_rsa.pub git@你的主機IP

測試連線

第一次連線會問你要不要新增 fingerprint,選擇 yes 後就會自動新增到遠端主機的~/.ssh/authorized_keys中了

1
2
3
4
5
6
7
8
9
10
ssh git@主機IP
Welcome to Ubuntu 22.04.1 LTS (GNU/Linux 5.15.0-56-generic x86_64)

* Documentation: https://help.ubuntu.com
* Management: https://landscape.canonical.com
* Support: https://ubuntu.com/advantage

0 updates can be applied immediately.
git@yang:~$ vim ~/.ssh/authorized_keys
ssh-rsa AAAAB3NzaC1yc2E...........

設置自動化流程

進入 hooks 資料夾後新增一個 post-receive 來撰寫每次部署到 git server 後要預先執行的動作

1
2
git@yang:~$ cd /home/git/projects/hexo.git/hooks
git@yang:~/projects/hexo.git/hooks$ sudo vim post-receive

按 i 進行插入模式貼上這行並修改權限讓他可執行

1
2
3
4
# post-receive 檔案
git --work-tree=/home/git/blog --git-dir=/home/git/projects/hexo.git checkout -f
------------------------------------
git@yang:~$ chmod a+x projects/hexo.git/hooks/post-receive # 修改權限至都能執行才能自動生成靜態檔

回到本機執行hexo clean && hexo g -d執行部署命令後去檢查剛剛新增的 blog 資料夾內是否有從本機部署過來的靜態檔

1
2
3
4
5
6
7
git@yang:~$ ll blog/
總用量 168
drwxrwxr-x 14 git git 4096 1月 1 09:52 ./
drwxr-x--- 9 git git 4096 1月 3 11:39 ../
-rw-rw-r-- 1 git git 31431 1月 1 09:52 404.html
drwxrwxr-x 2 git git 4096 1月 1 09:52 about/
drwxrwxr-x 2 git git 4096 1月 1 09:52 archive/

搭建 Nginx

我以自己的 Ubuntu 為例,透過 ssh 連進去後去設定 nginx

1
2
git@yang:~$ sudo apt-get update
git@yang:~$ sudo apt-install nginx -y

查看 nginx 是否安裝成功

1
2
git@yang:~$ nginx -v
nginx version: nginx/1.23.0

此時直接去網站輸入自己的 host 的 IP 應就能看到 nginx 初始的 Welcome to nginx 的頁面

nginx 配置

將 root 的部分改成自己靜態檔存放位置,並設定將域名設置為自行命名的網域,這邊注意只要後面有# managed by Certbot都是由 certbot 自動產生的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
server {
server_name akebee.com; # 域名
root /home/git/blog; # 生成public靜態檔案放的地方
index index.html;
location / {

# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri $uri/ =404;
}

listen [::]:443 ssl ipv6only=on; # managed by Certbot
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/akebee.com/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/akebee.com/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

server {
if ($host = akebee.com) {
return 301 https://$host$request_uri;
} # managed by Certbot

listen 80;
..............
}

SSL 憑證

獲取 SSL 憑證並配置給 nginx 底下多個網站

1
2
3
4
5
6
7
8
young@yang:~$ sudo certbot --nginx
Saving debug log to /var/log/letsencrypt/letsencrypt.log

Which names would you like to activate HTTPS for?
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1: akebee.com
2: yg.akebee.com
3: nutr......

新的要申請網域憑證 要接在 Certificate Name 顯示的主網域後面,並以,區隔每網域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
young@yang:~$ sudo certbot certificates
Saving debug log to /var/log/letsencrypt/letsencrypt.log

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Found the following certs:
Certificate Name: akebee.com
Serial Number: 41467b677b069b2fd1798caef470a00d5b6
Key Type: RSA
Domains: akebee.com yg.akebee.com
Expiry Date: 2023-03-30 01:29:11+00:00 (VALID: 85 days)
Certificate Path: /etc/letsencrypt/live/akebee.com/fullchain.pem
Private Key Path: /etc/letsencrypt/live/akebee.com/privkey.pem
........
young@yang:~$ sudo certbot --nginx --cert-name akebee.com -d akebee.com,yg.akebee.com
Saving debug log to /var/log/letsencrypt/letsencrypt.log

自動更新憑證

新增成功後可以再做個檢查查看憑證是否能自己自動更新,或是設定快到期時自動傳送 email 來通知我們去手動更新憑證

1
2
3
4
5
6
7
8
9
10
young@yang:~$ sudo systemctl status certbot.timer
● certbot.timer - Run certbot twice daily
Loaded: loaded (/lib/systemd/system/certbot.timer; enabled; vendor preset: enabled)
Active: active (waiting) since Thu 2022-12-29 18:06:49 CST; 4 days ago
Trigger: Tue 2023-01-03 21:12:00 CST; 7h left
Triggers: ● certbot.service

12月 29 18:06:49 yang systemd[1]: Started Run certbot twice daily.
..........................
young@yang:~$ sudo certbot update_account --email loyang0921@gmail.com

大功告成

終於可以不用每次要在 Server 更新網站內容還要經過繁瑣的重新部署流程嘍,此部落格原本也是用 github pages 去部署,但 github pages 的限制還蠻多的,例如:一小時內只能 deploy 十次,每個月流量頻寬 100GB 等

  • GitHub Pages source repositories have a recommended limit of 1GB.
  • Published GitHub Pages sites may be no larger than 1 GB.
  • GitHub Pages sites have a soft bandwidth limit of 100GB per month.
  • GitHub Pages sites have a soft limit of 10 builds per hour.

,所以才又另外研究了 CI/CD 部署到自己的 Server 的方法

注意事項

  • 查看 /blog 目錄若沒有資料就檢查步驟是否遺漏或權限設定
  • Certbot 驗證對於每個帳號每域名每小時 5 次的限制,若錯誤超過 5 次就只能一直等,不妨在測試的時候使用--dry-run測試環境去跑到可以在進正式環境執行
  • git init --bare產生的 repo 只用來儲存,大多情況不會用來開發,因此不應去手動編輯這資料夾的任何檔案

若您覺得這篇文章對您有幫助,歡迎分享出去讓更多人看到⊂◉‿◉つ~


留言版