关于此博客的构建

788 字

4 分钟

关于此博客的构建

2025-05-10

2025-06-19

How-to

Blog

/

Astro

1 相关环境依赖构建 (在 windwos 下的开发调试)#

下载 Git
Node.js
通过 Node.js 在 windwos 环境下安装 pnpm
npm install -g pnpm(全局安装 pnpm)
默认情况下，npm 和 pnpm 的全局依赖会安装在 C:\Users\你的用户名\AppData\Roaming\npm，我们可以修改到 D 盘。
npm config set prefix "D:\npm-global"

验证 npm config get prefix # 应该返回 D:\npm-global

pnpm config set store-dir "D:\.pnpm-store"

验证 pnpm config set store-dir “D:.pnpm-store”

pnpm install
pnpm add sharp

至此，你成功在本地部署此项目

2 部署构建静态网页#

CF官网
使用 Cloudflare 的 Pages 或 Workers 构建
也可以使用 github 静态网页托管

2.1 方式一、Cloudflare(Pages,Workers 二选一)#

Pages 部署
1. 计算下的 Pages,打开上传到 github 的博客仓库,选择你要部署的分支
2. 填写构建命令和构建输出目录 (就是 astro 输出的静态网页文件)
3. 保存并部署即可,最好绑定自己的域名
Workers 部署(目前没有迁移需求,后续再更新啦)

(CF 官方建议将 Pages 项目迁移至 Workers)

2.2 方式二、Github 静态网页托管 (通过 Github Action 自动部署 dist 文件)#

在 github 创建一个主文件 MyBlog-Main-astro 和专门存放显示静态页面的仓库***(github 账户名).github.io
前往 Setttings -> Developer Settings -> Personal access tokens，创建一个 token(classic)

createToken1

token 选择永不过期，并勾选 repo 和 workflow 选项

createToken2

为保证安全，将生成的 token，保存在仓库的变量中，前往 Settings -> Secrets and variables -> Actions 中设置

createToken3

setToken1

在主文件创建一个自动化部署脚本 (主文件输出的 dist 文件部署到***.github.io)
在.github/workflows/下新建一个 astro_auto_deploy.yaml 文件，将以下内容复制进去，想具体了解更多，可查看【Github Action文档】

1
name: astro_auto_deploy
2

3
# 代码提交到main分支时触发github action
4
on:
5
  push:
6
    branches:
7
      - main
8

9
jobs:
10
  deploy:
11
    runs-on: ubuntu-latest
12
    permissions:
13
      contents: write
14
    steps:
15
      - name: Checkout
16
        uses: actions/checkout@v4
17
        with:
18
          fetch-depth: 0
19

20
      - name: Setup Node.js
21
        uses: actions/setup-node@v4
22
        with:
23
          node-version: '20'
24

25
      - name: Setup pnpm
26
        uses: pnpm/action-setup@v2
27
        with:
28
          version: 8
29
          run_install: false
30

31
      - name: Install dependencies
32
        run: pnpm install
33

34
      - name: Build site
35
        run: pnpm build
36

37
      - name: Deploy to GitHub Pages
38
        uses: peaceiris/actions-gh-pages@v4
39
        with:
40
          PERSONAL_TOKEN: ${{ secrets.TOKEN }}
41
          EXTERNAL_REPOSITORY: 你的github名/你的仓库名
42
          PUBLISH_BRANCH: main
43
          PUBLISH_DIR: ./dist
44
          force_orphan: true
45
          commit_message: auto deploy

在主文件修改 .gitignore，来避免提交不必要的文件

1
# build output
2
dist/
3

4
# generated types
5
.astro/
6

7
# dependencies
8
node_modules/
9

10
# logs
11
npm-debug.log*
12
yarn-debug.log*
13
yarn-error.log*
14
pnpm-debug.log*
15

16
# environment variables
17
.env
18
.env.production
19

20
# macOS-specific files
21
.DS_Store
22

23
.vercel
24

25
package-lock.json
26
bun.lockb
27
yarn.lock
28

29
.~* //不提交~形式的备份文件