Astro框架Firefly主题博客部署到Github Actions方法

前言#

好久没玩博客了，前段时间了解到现在流行Astro框架搭建博客，反而是前几年的hexo更新滞后了，就花了些时间琢磨了一下这个框架怎么部署，还看了一些主题，最后决定用Firefly主题来部署我的新博客，期间踩了不少坑，下面分享我部署成功的步骤。

本地安装所需要的工具（Windows系统）#

1.nodejs
2.Git
注意：nodejs有三种安装方法，选择自己会的其中一种安装即可

git安装过程不再展示，一路下一步看到add path记得勾上就行

开始从Firefly的仓库部署到本地#

创建一个名为“blog”的文件夹（取别的名也行，自己记得住就好），并在文件夹里面点鼠标右键，选择“Open Git Bash here”

点击了“Open Git Bash here”将会出现这个页面：

安装pnpm管理包：在git的界面里粘贴以下指令并回车：

1
npx pnpm@latest-11 dlx @pnpm/exe@latest-11 setup

克隆仓库
1.克隆Firefly仓库

1
git clone https://github.com/CuteLeaf/Firefly.git
2
cd Firefly

克隆下载速度慢的话可以尝试找镜像网站解析，以下是我解析到的目前为止能用的链接，如果不能用了请自己找一个

1
git clone https://v4.gh-proxy.org/https://github.com/CuteLeaf/Firefly.git
2
cd Firefly

下载完成：

2.安装依赖

1
pnpm install

3.启动本地的开发服务器

1
pnpm dev

加载完成后将会提示“http://localhost:4321/”，复制到浏览器能直接打开的话本地部署的工作算是完成了。输入“pnpm buid”将会构建静态的可直接访问的html文件，会在Firefly文件夹里生成一个dist文件夹，最简单的是上传到服务器就能访问了.

如果你还想要部署成像我这样：本地写文章后输入指令让它自动上传部署到服务器，可以参考我以下的方法

修改文件#

因为国内访问github经常会失败，建议下面的操作先下载Watt Toolkit（这工具原本叫Steam++），来给github免费加速

在GitHub Actions上部署并发布到GitHub Pages上
把.github\workflows\deploy.yml里的文件内容全部改成：

1
name: Deploy to GitHub Pages
2

3
on:
4
  push:
5
    branches: [main]
6
  workflow_dispatch:
7

8
permissions:
9
  contents: read
10
  pages: write
11
  id-token: write
12

13
jobs:
14
  build:
15
    runs-on: ubuntu-latest
16
    steps:
17
      - name: Checkout
18
        uses: actions/checkout@v4
19

20
      - name: Setup pnpm
21
        uses: pnpm/action-setup@v4
22

23
      - name: Setup Node
24
        uses: actions/setup-node@v4
25
        with:
26
          node-version: 22
27
          cache: pnpm
28

29
      - name: Install dependencies
30
        run: pnpm install
31

32
      - name: Build
33
        run: pnpm build
34

35
      - name: Upload artifact
36
        uses: actions/upload-pages-artifact@v3
37
        with:
38
          path: dist
39

40
  deploy:
41
    needs: build
42
    runs-on: ubuntu-latest
43
    environment:
44
      name: github-pages
45
      url: ${{ steps.deployment.outputs.page_url }}
46
    steps:
47
      - name: Deploy to GitHub Pages
48
        id: deployment
49
        uses: actions/deploy-pages@v4

推送文件#

创建一个仓库，名字格式为：用户名/用户名.github.io

更改Git仓库里的关联链接和分支：

1
git remote set-url origin https://github.com/用户名/用户名.github.io.git
2
git branch -M main

倘若你写好了文章，就可以开始把整个本地仓库的内容开始推送到github你创建的仓库了：
先网页登录github的帐号，然后：

1
git add .
2
git commit -m“更新博客”
3
git push -u origin main

Git上选择关联github帐号：

推送成功界面：

打开github仓库的用户名/用户名.github.io，里面有和本地文件夹一样的文件就可以开始下一步了

设置GitHub Actions#

最后，每次更新文章或者修改博客任何内容，操作一遍就能自动推送上github

1
git add .
2
git commit -m“更新博客”
3
git push

推送之后GitHub Actions会自动构建并部署到GitHub Pages上，这里查看部署进度：

Actions部署完成可以输入github送的二级域名（用户名.github.io）查看你的网站啦

音乐

前言#

本地安装所需要的工具（Windows系统）#

开始从Firefly的仓库部署到本地#

修改文件#

推送文件#

设置GitHub Actions#

支持与分享

评论区

音乐

音乐

文章目录