基于Astro開發的Fuwari靜態博客模版配置CICD流程
基于Astro開發的Fuwari靜態博客模版配置CICD流程
前言
同往常一樣(yang)，上班摸魚的時(shi)候(hou)，就喜歡逛逛隨(sui)機逛逛別人的博客，然后有一個(ge)博客的主題讓我有點心(xin)動。
我自己也是部署了博客的，我目前的博客網站是：，已經安穩運行了800多天。不過我的博客有個缺點就是加載很慢，主要原因呢是因為靜態資源的關系，雖然有一小部分我使用了七牛云的cdn服務，但還是無法解決訪問慢的問題。加上本身的服務器帶寬也不大，只有3M的帶(dai)寬。種種原因導致我的博(bo)客訪問很慢，然后就遇(yu)到了今天要說(shuo)的這個博(bo)客，這是一個靜態博(bo)客，訪問起來速度(du)會快很多。
這個博客(ke)是基(ji)于開發的一(yi)個博客(ke)主題模版，GitHub上叫。
先來(lai)放(fang)一張博客的圖片(pian)，我(wo)覺得這個主題還是很好看(kan)的。
在線訪問
目(mu)前我的(de)新博客也已經部署(shu)到服務器上(shang)了，地址為(wei)：
歡迎大家訪(fang)問(wen)我的新(xin)博客！
博客的不足
如果(guo)拿這個博(bo)客和我(wo)目前的博(bo)客對比，我(wo)認(ren)為的不足點(dian)有(you)以(yi)下幾點(dian)：
的開發者不知道什么時候會更新評論功能，不過我在翻閱Pull requests時(shi)，發現有一個(ge)關于評論(lun)的合(he)并請求：
我(wo)(wo)也是花了時間去實驗(yan)了一下(xia)，發現我(wo)(wo)還得(de)重新注冊個域名，總的來說還是比較麻煩的。后面(mian)發現他這(zhe)種辦(ban)法是針對于沒有服務器的博(bo)主，我(wo)(wo)有自己的服務器完全(quan)可以找一個開(kai)源的評論系統集成到中去就行了。
后續(xu)我(wo)在博客集成了(le)評(ping)論系統，后面(mian)我(wo)再(zai)單獨(du)出一篇(pian)文章講如何集成評(ping)論系統。
總之我覺得的自由度很高，支持很多語言如：React、Preact、Svelte、Vue、Solid等(deng)，可擴(kuo)展性很高，完全(quan)可以根據自(zi)己的(de)想法去修改博(bo)客(ke)的(de)內容(rong)。
如何部署
下面來講一講如何部署一個這個博客，的文檔很詳細，這里就拿部署到GitHub上來作為例子。
部署文檔：
部署文檔里面說的很清楚，我這里就不再復述了，如果只是單純的部署到GitHub Pages上，跟著(zhu)官方文檔(dang)去做(zuo)，一般不(bu)會出現問題。
使用自己的域名
總所周知，Github Pages部署后會給你一個Github.io域名，如(ru)果想使用自(zi)己的域名則需要做一點修改。
首先修改代碼中的astro.config.mjs文件，將site指向你的域名，要注意的是不要為 base 設置值。
import { defineConfig } from 'astro/config'
export default defineConfig({
site: '//example.com',
})
域名解析
代碼(ma)改完之后，需要(yao)為(wei)你的(de)域(yu)名添加域(yu)名解析，以阿里云域(yu)名為(wei)例。
頂級域名：需要添加A類解析，將你的頂級域名指向Github.io域名的ip地址，獲取ip地址，本地控制臺ping一下github.io域名即可。
如果是二級域名，比如我的blog.pljzy.top,那么則需要添加的是CNAME類型的解析，將blog.pljzy.top域名直接解析到Github.io上去就行了。
Github配置
如圖所示：
Source選擇GitHub Actions，Custom domian填入自己的域名，然后強制HTTPS打開。
如何創建文章
部署完成后，如果上傳文章呢，我之前的博客是在后臺管理系統中上傳文章，這個靜態博客當然是不存在后臺管理系統的，所以上傳文章就需要手動去講文章放到posts目錄下。
注意分(fen)為帶(dai)(dai)展示(shi)圖的(de)(de)文章(zhang)和不帶(dai)(dai)展示(shi)圖的(de)(de)文章(zhang)。
posts指代Src->Content->posts
帶展示圖
在posts目錄下創建文章目錄guide，cover.jpeg就是首圖，index.md就是文章。
guide/
├── index.md
└── cover.jpeg
不帶展示圖
不帶展示圖的文章就只需要在posts下(xia)創建(jian)md文件即可(ke)。
posts/
└── index.md
注意
需要(yao)注(zhu)意(yi)的(de)是，md文件(jian)需要(yao)再開頭添(tian)加上標識，用于(yu)展(zhan)示(shi)文章的(de)標題、時間、首圖、分類、標簽等信息。
---
title: My First Blog Post
published: 2023-09-09
description: This is the first post of my new Astro blog.
image: ./cover.jpg
tags: [Foo, Bar]
category: Front-end
draft: false
lang: jp # Set only if the post's language differs from the site's language in `config.ts`
---、
步入正題CICD
CICD簡述
CI/CD（持續(xu)集成/持續(xu)交付(fu)或持續(xu)部(bu)署）是一種自動化(hua)軟(ruan)件開(kai)發和交付(fu)流程。
- 持續集成（CI）：開發者提交代碼后，自動觸發構建和測試（單元測試、代碼掃描等）。
- 持續交付（CD）：生成可部署的產物（如Docker鏡像），等待人工確認發布。
簡言之，CI/CD通(tong)過自動化實現從(cong)代碼提交到(dao)發(fa)布(bu)的快速、可靠流程。
deploy.yml
上面扯了很多，還沒有開始講CICD。部署到GitHub Pages時，Astro官方文檔給了一個通用的Github Action模版。
使用這個模版就可以完成簡單的CICD流程，我們只需要在本地的Src->Content->posts中創建文章，或者把文章目錄移入該目錄下，然后commit提交，push推送，GitHub Action會自動幫我們完成打包+部署(shu)。
name: Deploy to GitHub Pages
on:
# 每次推送到 `main` 分支時觸發這個“工作流程”
# 如果你使用了別的分支名，請按需將 `main` 替換成你的分支名
push:
branches: [ main ]
# 允許你在 GitHub 上的 Actions 標簽中手動觸發此“工作流程”
workflow_dispatch:
# 允許 job 克隆 repo 并創建一個 page deployment
permissions:
contents: read
pages: write
id-token: write
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout your repository using git
uses: actions/checkout@v4
- name: Install, build, and upload your site
uses: withastro/action@v3
# with:
# path: . # 存儲庫中 Astro 項目的根位置。（可選）
# node-version: 20 # 用于構建站點的特定 Node.js 版本，默認為 20。（可選）
# package-manager: pnpm@latest # 應使用哪個 Node.js 包管理器來安裝依賴項和構建站點。會根據存儲庫中的 lockfile 自動檢測。（可選）
deploy:
needs: build
runs-on: ubuntu-latest
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
使用自己的服務器
考慮到Github Pages的訪問速度時好時壞，非常的不穩定,想部署到自己的服務器上。部署的方式有很多種，直接將打包后的文件丟入Nginx中，或者使用Docker構建容器去部署。
這樣做都行，但是我每次添加文章，都要重新去build代碼，然后(hou)上傳到服(fu)務(wu)器，很麻煩。
聰明的網友已經發現解決辦法了，上面我們是不是講過GitHub Action流程可以完成簡單的CICD，即本地編寫文章-push代碼-GitHub自動構建打包部署。
那我們只需要稍微修改一下deploy.yml文件(jian)，然后(hou)在Github配置一下連(lian)接服(fu)務器(qi)的ssh私鑰即可。
- SERVER_IP：服務器外網ip地址
- SSH_USERNAME：登錄用戶名
- SSH_PRIVATE_KEY：ssh私鑰
打包后的文件直接丟進服務器的Nginx目錄下
使用這份deploy.yml文件就行(xing)了，根(gen)據(ju)自己的實際情況修改掛載目錄(lu)和端(duan)口(kou)。
name: Deploy with Volume Mount
on:
push:
branches: [main]
workflow_dispatch:
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Install and Build (Astro)
uses: withastro/action@v3
- name: Upload Files to Server
uses: appleboy/scp-action@v0.1.6
with:
host: ${{ secrets.SERVER_IP }}
username: ${{ secrets.SSH_USERNAME }}
key: ${{ secrets.SSH_PRIVATE_KEY }}
source: "dist/*"
target: "/www/wwwroot/default/newblog" # 直接上傳到掛載目錄
- name: Start/Restart Container
uses: appleboy/ssh-action@v1
with:
host: ${{ secrets.SERVER_IP }}
username: ${{ secrets.SSH_USERNAME }}
key: ${{ secrets.SSH_PRIVATE_KEY }}
script: |
# 直接運行Nginx容器并掛載目錄
docker stop astro-app || true
docker rm astro-app || true
docker run -d \
--name astro-app \
-p 4321:80 \
-v /www/wwwroot/default/newblog:/usr/share/nginx/html:ro \
nginx:alpine
使用Docker部署到服務器
使用Docker相對來說麻煩一點，使用這份deploy.yml文件就行了，然后需要創建DockerFile、docker-compose.yml、default.conf這(zhe)(zhe)3個文件，博主就是(shi)采用的這(zhe)(zhe)種(zhong)方(fang)式。同樣注意根據自己(ji)服(fu)務器的實際(ji)情況修改目錄和端口。
deploy.yml
name: Docker Compose Deploy
on:
push:
branches: [main]
workflow_dispatch:
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Install and Build (Astro)
uses: withastro/action@v3
- name: Debug file existence
run: |
ls -la
ls -la dist/ || echo "dist/ not found"
ls -la docker/ || echo "docker/ not found"
test -f docker-compose.yml && echo "docker-compose.yml exists" || echo "docker-compose.yml missing"
- name: Upload Files to Server
uses: appleboy/scp-action@v0.1.6
with:
host: ${{ secrets.SERVER_IP }}
username: ${{ secrets.SSH_USERNAME }}
key: ${{ secrets.SSH_PRIVATE_KEY }}
source: "dist/*,docker/*,docker-compose.yml"
target: "/www/wwwroot/default/newblog"
- name: Deploy with Docker Compose
uses: appleboy/ssh-action@v1
with:
host: ${{ secrets.SERVER_IP }}
username: ${{ secrets.SSH_USERNAME }}
key: ${{ secrets.SSH_PRIVATE_KEY }}
script: |
cd /www/wwwroot/default/newblog
docker-compose down
docker-compose up -d --build
docker system prune -f
DockerFile
FROM nginx:alpine
# 刪除默認配置
RUN rm /etc/nginx/conf.d/default.conf
# 復制自定義配置
COPY ./nginx/default.conf /etc/nginx/conf.d/
# 復制構建好的靜態文件（由CI/CD流程完成）
WORKDIR /usr/share/nginx/html
# 暴露端口
EXPOSE 4321
docker-compose.yml
version: '3.8'
services:
web:
build: ./docker
ports:
- "4321:4321"
volumes:
- /www/wwwroot/default/newblog/dist:/usr/share/nginx/html:ro
restart: unless-stopped
default.conf
server {
listen 4321;# 配置端口
server_name 0.0.0.0; # 修改為docker服務宿主機的ip
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
無論采用上(shang)述那種方式，我們只需要在本地創建文章然后提交(jiao)到git上(shang)就能自動(dong)上(shang)傳(chuan)到服務器完成構建并運行重新項目。
吐槽一下
Github Action調試起(qi)來還是挺費勁的，博主整整調試了10幾次才完成CICD，有各(ge)種原(yuan)因會導致(zhi)部(bu)署失敗(bai)。
效果演示
修(xiu)改代(dai)碼(ma)后直(zhi)接(jie)提交git，就能完(wan)成構(gou)建(jian)部署。
在Github Action頁面可以看(kan)到有(you)3個(ge)流程，分別是代碼(ma)檢查(cha)、構(gou)建檢查(cha)、以及最后的推送到服(fu)務器構(gou)建，代碼(ma)檢查(cha)和構(gou)建檢查(cha)是模(mo)版自(zi)帶的無需修(xiu)改。
