登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 业界 ›基于Astro开发的Fuwari静态博客模版配置CICD流程 ...

基于Astro开发的Fuwari静态博客模版配置CICD流程

滥眩 昨天 11:40
基于Astro开发的Fuwari静态博客模版配置CICD流程

前言

同往常一样，上班摸鱼的时候，就喜欢逛逛随机逛逛别人的博客，然后有一个博客的主题让我有点心动。
我自己也是部署了博客的，我目前的博客网站是：ZY的博客，已经安稳运行了800多天。不过我的博客有个缺点就是加载很慢，主要原因呢是因为静态资源的关系，虽然有一小部分我使用了七牛云的cdn服务，但还是无法解决访问慢的问题。加上本身的服务器带宽也不大，只有3M的带宽。种种原因导致我的博客访问很慢，然后就遇到了今天要说的这个博客，这是一个静态博客，访问起来速度会快很多。
这个博客是基于Astro开发的一个博客主题模版，GitHub上叫fuwari。
先来放一张博客的图片，我觉得这个主题还是很好看的。
1.png

在线访问

目前我的新博客也已经部署到服务器上了，地址为：

  • ZYBlog https://blog.pljzy.top/
欢迎大家访问我的新博客！
博客的不足

如果拿这个博客和我目前的博客对比，我认为的不足点有以下几点：

  • 评论功能还未完成；（已集成）
  • 没有友情链接功能；
fuwari的开发者不知道什么时候会更新评论功能，不过我在翻阅Pull requests时，发现有一个关于评论的合并请求：https://github.com/saicaca/fuwari/pull/406。
我也是花了时间去实验了一下，发现我还得重新注册个域名，总的来说还是比较麻烦的。后面发现他这种办法是针对于没有服务器的博主，我有自己的服务器完全可以找一个开源的评论系统集成到fuwari中去就行了。
后续我在博客集成了Twikoo评论系统，后面我再单独出一篇文章讲如何集成评论系统。
总之我觉得Astro的自由度很高，支持很多语言如：React、Preact、Svelte、Vue、Solid等，可扩展性很高，完全可以根据自己的想法去修改博客的内容。
如何部署

下面来讲一讲如何部署一个这个博客，Astro的文档很详细，这里就拿部署到GitHub上来作为例子。
部署文档：部署你的 Astro 站点至 GitHub Pages | Docs https://docs.astro.build/zh-cn/guides/deploy/github/
部署文档里面说的很清楚，我这里就不再复述了，如果只是单纯的部署到GitHub Pages上，跟着官方文档去做，一般不会出现问题。
使用自己的域名

总所周知，Github Pages部署后会给你一个Github.io域名，如果想使用自己的域名则需要做一点修改。
首先修改代码中的astro.config.mjs文件，将site指向你的域名，要注意的是不要为 base 设置值。
  1. import { defineConfig } from 'astro/config'
  3. export default defineConfig({
  4.   site: 'https://example.com',
  5. })
复制代码
域名解析

代码改完之后，需要为你的域名添加域名解析，以阿里云域名为例。
顶级域名：需要添加A类解析，将你的顶级域名指向Github.io域名的ip地址，获取ip地址，本地控制台ping一下github.io域名即可。
2.png

如果是二级域名，比如我的blog.pljzy.top,那么则需要添加的是CNAME类型的解析，将blog.pljzy.top域名直接解析到Github.io上去就行了。
Github配置

如图所示：
Source选择GitHub Actions，Custom domian填入自己的域名，然后强制HTTPS打开。
3.png

如何创建文章

部署完成后，如果上传文章呢，我之前的博客是在后台管理系统中上传文章，这个静态博客当然是不存在后台管理系统的，所以上传文章就需要手动去讲文章放到posts目录下。
注意分为带展示图的文章和不带展示图的文章。
posts指代Src->Content->posts
带展示图

在posts目录下创建文章目录guide，cover.jpeg就是首图，index.md就是文章。
  1. guide/
  2. ├── index.md
  3. └── cover.jpeg
复制代码
不带展示图

不带展示图的文章就只需要在posts下创建md文件即可。
  1. posts/
  2. └── index.md
复制代码
注意

需要注意的是，md文件需要再开头添加上标识，用于展示文章的标题、时间、首图、分类、标签等信息。
  1. ---
  2. title: My First Blog Post
  3. published: 2023-09-09
  4. description: This is the first post of my new Astro blog.
  5. image: ./cover.jpg
  6. tags: [Foo, Bar]
  7. category: Front-end
  8. draft: false
  9. lang: jp      # Set only if the post's language differs from the site's language in `config.ts`
  10. ---、
复制代码
步入正题CICD

CICD简述

CI/CD（持续集成/持续交付或持续部署）是一种自动化软件开发和交付流程。

  • 持续集成（CI）：开发者提交代码后，自动触发构建和测试（单元测试、代码扫描等）。
  • 持续交付（CD）：生成可部署的产物（如Docker镜像），等待人工确认发布。
简言之，CI/CD通过自动化实现从代码提交到发布的快速、可靠流程。
deploy.yml

上面扯了很多，还没有开始讲CICD。部署到GitHub Pages时，Astro官方文档给了一个通用的Github Action模版。
使用这个模版就可以完成简单的CICD流程，我们只需要在本地的Src->Content->posts中创建文章，或者把文章目录移入该目录下，然后commit提交，push推送，GitHub Action会自动帮我们完成打包+部署。
  1. name: Deploy to GitHub Pages
  3. on:
  4.   # 每次推送到 `main` 分支时触发这个“工作流程”
  5.   # 如果你使用了别的分支名，请按需将 `main` 替换成你的分支名
  6.   push:
  7.     branches: [ main ]
  8.   # 允许你在 GitHub 上的 Actions 标签中手动触发此“工作流程”
  9.   workflow_dispatch:
  11. # 允许 job 克隆 repo 并创建一个 page deployment
  12. permissions:
  13.   contents: read
  14.   pages: write
  15.   id-token: write
  17. jobs:
  18.   build:
  19.     runs-on: ubuntu-latest
  20.     steps:
  21.       - name: Checkout your repository using git
  22.         uses: actions/checkout@v4
  23.       - name: Install, build, and upload your site
  24.         uses: withastro/action@v3
  25.         # with:
  26.           # path: . # 存储库中 Astro 项目的根位置。（可选）
  27.           # node-version: 20 # 用于构建站点的特定 Node.js 版本，默认为 20。（可选）
  28.           # package-manager: pnpm@latest # 应使用哪个 Node.js 包管理器来安装依赖项和构建站点。会根据存储库中的 lockfile 自动检测。（可选）
  30.   deploy:
  31.     needs: build
  32.     runs-on: ubuntu-latest
  33.     environment:
  34.       name: github-pages
  35.       url: ${{ steps.deployment.outputs.page_url }}
  36.     steps:
  37.       - name: Deploy to GitHub Pages
  38.         id: deployment
  39.         uses: actions/deploy-pages@v4
复制代码
使用自己的服务器

考虑到Github Pages的访问速度时好时坏，非常的不稳定,想部署到自己的服务器上。部署的方式有很多种，直接将打包后的文件丢入Nginx中，或者使用Docker构建容器去部署。
这样做都行，但是我每次添加文章，都要重新去build代码，然后上传到服务器，很麻烦。
聪明的网友已经发现解决办法了，上面我们是不是讲过GitHub Action流程可以完成简单的CICD，即本地编写文章-push代码-GitHub自动构建打包部署。
那我们只需要稍微修改一下deploy.yml文件，然后在Github配置一下连接服务器的ssh私钥即可。

  • SERVER_IP：服务器外网ip地址
  • SSH_USERNAME：登录用户名
  • SSH_PRIVATE_KEY：ssh私钥
4.png

打包后的文件直接丢进服务器的Nginx目录下

使用这份deploy.yml文件就行了，根据自己的实际情况修改挂载目录和端口。
  1. name: Deploy with Volume Mount
  3. on:
  4.   push:
  5.     branches: [main]
  6.   workflow_dispatch:
  8. jobs:
  9.   deploy:
  10.     runs-on: ubuntu-latest
  11.     steps:
  12.       - name: Checkout
  13.         uses: actions/checkout@v4
  15.       - name: Install and Build (Astro)
  16.         uses: withastro/action@v3
  18.       - name: Upload Files to Server
  19.         uses: appleboy/scp-action@v0.1.6
  20.         with:
  21.           host: ${{ secrets.SERVER_IP }}
  22.           username: ${{ secrets.SSH_USERNAME }}
  23.           key: ${{ secrets.SSH_PRIVATE_KEY }}
  24.           source: "dist/*"
  25.           target: "/www/wwwroot/default/newblog"  # 直接上传到挂载目录
  27.       - name: Start/Restart Container
  28.         uses: appleboy/ssh-action@v1
  29.         with:
  30.           host: ${{ secrets.SERVER_IP }}
  31.           username: ${{ secrets.SSH_USERNAME }}
  32.           key: ${{ secrets.SSH_PRIVATE_KEY }}
  33.           script: |
  34.             # 直接运行Nginx容器并挂载目录
  35.             docker stop astro-app || true
  36.             docker rm astro-app || true
  37.             docker run -d \
  38.               --name astro-app \
  39.               -p 4321:80 \
  40.               -v /www/wwwroot/default/newblog:/usr/share/nginx/html:ro \
  41.               nginx:alpine
复制代码
使用Docker部署到服务器

使用Docker相对来说麻烦一点，使用这份deploy.yml文件就行了，然后需要常见DockerFile、docker-compose.yml、default.conf这3个文件，博主就是采用的这种方式。同样注意根据自己服务器的实际情况修改目录和端口。
deploy.yml
  1. name: Docker Compose Deploy
  3. on:
  4.   push:
  5.     branches: [main]
  6.   workflow_dispatch:
  8. jobs:
  9.   deploy:
  10.     runs-on: ubuntu-latest
  11.     steps:
  12.       - name: Checkout
  13.         uses: actions/checkout@v4
  15.       - name: Install and Build (Astro)
  16.         uses: withastro/action@v3
  17.         
  18.       - name: Debug file existence
  19.         run: |
  20.           ls -la
  21.           ls -la dist/ || echo "dist/ not found"
  22.           ls -la docker/ || echo "docker/ not found"
  23.           test -f docker-compose.yml && echo "docker-compose.yml exists" || echo "docker-compose.yml missing"
  25.       - name: Upload Files to Server
  26.         uses: appleboy/scp-action@v0.1.6
  27.         with:
  28.           host: ${{ secrets.SERVER_IP }}
  29.           username: ${{ secrets.SSH_USERNAME }}
  30.           key: ${{ secrets.SSH_PRIVATE_KEY }}
  31.           source: "dist/*,docker/*,docker-compose.yml"
  32.           target: "/www/wwwroot/default/newblog"
  34.       - name: Deploy with Docker Compose
  35.         uses: appleboy/ssh-action@v1
  36.         with:
  37.           host: ${{ secrets.SERVER_IP }}
  38.           username: ${{ secrets.SSH_USERNAME }}
  39.           key: ${{ secrets.SSH_PRIVATE_KEY }}
  40.           script: |
  41.             cd /www/wwwroot/default/newblog
  42.             docker-compose down
  43.             docker-compose up -d --build
  44.             docker system prune -f
复制代码
DockerFile
  1. FROM nginx:alpine
  3. # 删除默认配置
  4. RUN rm /etc/nginx/conf.d/default.conf
  6. # 复制自定义配置
  7. COPY ./nginx/default.conf /etc/nginx/conf.d/
  9. # 复制构建好的静态文件（由CI/CD流程完成）
  10. WORKDIR /usr/share/nginx/html
  12. # 暴露端口
  13. EXPOSE 4321
复制代码
docker-compose.yml
  1. version: '3.8'
  2. services:
  3.   web:
  4.     build: ./docker
  5.     ports:
  6.       - "4321:4321"
  7.     volumes:
  8.       - /www/wwwroot/default/newblog/dist:/usr/share/nginx/html:ro
  9.     restart: unless-stopped
复制代码
default.conf
  1. server {
  2.     listen       4321;# 配置端口
  3.     server_name  0.0.0.0; # 修改为docker服务宿主机的ip
  5.     location / {
  6.         root   /usr/share/nginx/html;
  7.         index  index.html index.htm;
  8.         try_files $uri $uri/ /index.html =404;
  9.     }
  11.     error_page   500 502 503 504  /50x.html;
  12.     location = /50x.html {
  13.         root   html;
  14.     }
  15. }
复制代码
无论采用上述那种方式，我们只需要在本地创建文章然后提交到git上就能自动上传到服务器完成构建并运行重新项目。
吐槽一下

Github Action调试起来还是挺费劲的，博主整整调试了10几次才完成CICD，有各种原因会导致部署失败。
5.png

效果演示

修改代码后直接提交git，就能完成构建部署。
6.png

在Github Action页面可以看到有3个流程，分别是代码检查、构建检查、以及最后的推送到服务器构建，代码检查和构建检查是fuwari模版自带的无需修改。
7.png

相关链接


  • 部署你的Astro站点 https://docs.astro.build/zh-cn/guides/deploy/
  • 快速上手Twikoo   https://twikoo.js.org/quick-start.html
  • fuwari博客主题模版 https://github.com/saicaca/fuwari/blob/main/docs/README.zh-CN.md
  • ZyPLJ/fuwai_zy https://github.com/ZyPLJ/fuwai_zy

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

使用道具 举报
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
滥眩
昨天 11:40

0

粉丝关注

13

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫