五步輕松搞定，將博客自動部署到服務(wù)器
準(zhǔn)備工作
1.生成密鑰對
在服務(wù)器或者其他電腦生成一堆ssh密鑰對，命令如下：
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"如果你不想覆蓋電腦本身的原始密鑰，可以使用這個命令自定義名稱：
ssh-keygen -t rsa -b 4096 -C "you_self@example.com" -f ~/.ssh/id_rsa_github后面新增了 -f 參數(shù)，這是指定密鑰對的名稱和路徑，一路回車，就會在指定位置生成密鑰對：公鑰id_rsa_github.pub、私鑰id_rsa_github，
總之你現(xiàn)在已經(jīng)得到一個私鑰一個公鑰。
接著你需要將公鑰放置在authorized_keys中，如果沒有該文件就創(chuàng)建一個。
vi authorized_keys按下i進(jìn)入編輯模式，復(fù)制之后，按下 esc，輸入:wq保存并推出。
2. 新增SSH Key
接著你需要進(jìn)入github對應(yīng)的博客倉庫，選擇Settings > Deploy keys > add deploy Key。
deploy key
將你的私鑰保存在這里，然后點(diǎn)擊保存。
3. 配置 action 變量
接著選擇當(dāng)前倉庫的Settings > Secrets and variables > actions > new repository secret
創(chuàng)建名為SERVER_USER的變量，值為你的服務(wù)器的登錄名稱。
創(chuàng)建名為SERVER_SSH_KEY的變量，值為剛才生成的私鑰。
如果需要創(chuàng)建名為SERVER_HOST的變量，值為你的主機(jī)地址或者域名。
保存之后進(jìn)行下一步。
注意: 變量名自定義即可，和后面保持一致即可。
4.配置 github action
我們已經(jīng)配置了github action，每次提交代碼之后自動部署最新的內(nèi)容。
現(xiàn)在我們需要在末尾加上下面的內(nèi)容，主要是將 action 打包的內(nèi)容通過scp功能上傳到服務(wù)器的指定文件夾。
- name:上傳文檔到服務(wù)器
uses:appleboy/scp-action@v0.1.1
with:
host:${{secrets.SERVER_HOST}}# 這個你可以寫死，也可以像我這樣
username:${{secrets.SERVER_USER}}
key:${{secrets.SERVER_SSH_KEY}}
source:./src/.vuepress/dist*# 上傳的源路徑
target:/home/blog/# 臨時上傳目錄完成的配置如下：
name: 部署文檔
on:
push:
branches:
# 確保這是你正在使用的分支名稱
-master
permissions:
contents:write
jobs:
deploy-gh-pages:
runs-on:ubuntu-latest
steps:
-name:Checkout
uses:actions/checkout@v3
with:
fetch-depth:0
# 如果你文檔需要 Git 子模塊，取消注釋下一行
# submodules: true
-name:設(shè)置Node.js
uses:actions/setup-node@v3
with:
node-version:18
-name:安裝依賴
run:npminstall--frozen-lockfile
-name:構(gòu)建文檔
env:
NODE_OPTIONS:--max_old_space_size=8192
run:|-
npm run docs:build
rm -rf .gitignore
> src/.vuepress/dist/.nojekyll
-name:部署文檔
uses:JamesIves/github-pages-deploy-action@v4
with:
# 這是文檔部署到的分支名稱
branch:gh-pages
folder:src/.vuepress/dist
-name:上傳文檔到服務(wù)器
uses:appleboy/scp-action@v0.1.1
with:
host:${{secrets.SERVER_HOST}}
username:${{secrets.SERVER_USER}}
key:${{secrets.SERVER_SSH_KEY}}
source:./src/.vuepress/dist*# 上傳的源路徑
target:/home/blog/ # 臨時上傳目錄5.配置服務(wù)器 nginx
完事之后，進(jìn)入自己的服務(wù)器，修改nginx.conf文件，查看配置文件路徑的命令如下：
nginx -t輸出：nginx: configuration file /etc/nginx/nginx.conf test is successful，里面的路徑即是配置文件路徑。
根據(jù)自己的公共路徑配置即可。由于這是我的第二個博客，加了blogs2作為標(biāo)識了，所以還需要添加靜態(tài)文件路徑的location，完成的配置如下，可以參考下。
server {
listen 80;
server_name blog.mmdctjj.top;
# 指定博客的根目錄
root /home/blog/src/.vuepress/dist;
index index.html;
# 主站根目錄的默認(rèn)處理
location / {
try_files $uri $uri/ /index.html;
}
# 處理 /blogs2/* 靜態(tài)資源請求
location /blogs2/ {
root /home/blog/src/.vuepress/dist; # 指定文件所在目錄
rewrite ^/blogs2(/.*)$ $1 break; # 去掉 /blogs2 前綴
try_files $uri $uri/ =404; # 找不到時返回 404 錯誤
}
# 錯誤頁面配置
error_page 404 /404.html;
location = /404.html {
root /home/blog/src/.vuepress/dist;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html; # 使用 Nginx 默認(rèn)的 50x 錯誤頁面
}
}配置完成后重啟nginx，命令如下：
nginx -s reload
