个人博客搭建

使用模板创建GitHub仓库

模板地址：https://github.com/EveSunMaple/Frosti↗ 仓库名：<用户名>.github.io

使用

1. 克隆仓库

2. 安装依赖

   BASH

   npm i -g pnpm # 如果未安装 pnpm
   cd <仓库文件夹>
   pnpm install # 安装依赖
   pnpm run search:index # 生成搜索索引
   pnpm run dev # 启动本地开发服务器

3. 每次修改文章后，运行以下命令生成静态文件：

   BASH

   pnpm run build

4. 在生成的dist/目录下新建 .nojekyll 文件 该文件用于告诉 GitHub Pages 不使用 Jekyll 处理静态文件。

5. 将生成的dist/目录推送至ph-pages分支

6. 访问网站 访问 https://<用户名>.github.io/<仓库名>/ 即可查看网站。

设置GitHub Actions自动部署

• 进入 GitHub → Settings → Developer settings → Personal access tokens， 创建一个新的 令牌 (classic)，至少勾选 repo 范围以获取写权限， 把新令牌存为仓库的 Settings → Secrets and variables → Actions 下的 GH_PAGES_TOKEN。
• 在项目根目录下，创建路径 .github/workflows/deploy.yml，并填入以下内容：

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      # 1. 拉取代码
      - name: Checkout code
        uses: actions/checkout@v3
        with:
          fetch-depth: 0

      # 2. 安装 Node.js + PNPM
      - name: Setup Node.js & PNPM
        uses: pnpm/action-setup@v2
        with:
          node-version: 18
          pnpm-version: 8

      # 3. 安装依赖并构建
      - name: Install dependencies
        run: pnpm install

      - name: Build site
        run: pnpm run build

      # 4. 发布到 gh-pages
      - name: Deploy to gh-pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GH_PAGES_TOKEN }}
          publish_dir: ./dist
          publish_branch: gh-pages
          disable_nojekyll: false

• 推送 deploy.yml 到 main：

git add .github/workflows/deploy.yml
git commit -m "Add GitHub Actions for auto deploy"
git push origin main

• Github Action 会自动运行

• 在仓库页面，依次进入 Settings → Pages

• 在 Source 中选择： ­ ­ • 分支：gh-pages ­ ­ • 目录：/

• 保存后稍等 5–10 分钟，让 GitHub 刷新 CDN。

Frosti配置

• 在frosti.config.yaml中中配置网站的基本信息、导航栏、页脚等
• 图标设置：Frosti使用Iconify作为其图标库。您可以在他们的网站上搜索您喜欢的图标，然后将图标代码复制到配置文件中的svg字段中。
• 自动更新脚本：bash frosti.update.sh

文章上传

• 将文章放在src/content/blog目录下，文件名为<YYYY-MM-DD-文章标题>.md

• 在文章中使用YAML格式的头部信息来设置文章的元数据，例如标题、日期、作者等。

  YAML

  ---
  title: "Windows体验优化指北"
  description: A comprehensive guide on how to integrate the Waline comment system into your Frosti blog
  pubDate: 2025 07 27
  image: /assets/blog/2025-07-27-Windows体验优化指北/post.png  #封面图片路径
  categories:
    - 教程
  tags:
    - Windows
  ---

• 将图片放置于public/assets/blog/<YYYY-MM-DD-文章标题>目录下，而在frontmatter里的路径只需写为/assets/blog/<YYYY-MM-DD-文章标题>/post.png即可。（在Astro项目中，public目录就是网站的根目录） 构建后，图片将位于dist/assets/blog/<YYYY-MM-DD-文章标题>目录下。

  这里摸索了好久🥲，感谢Copilot指点

• 使用pnpm run build命令生成静态文件，生成的html文件位于dist/blog/<YYYY-MM-DD-文章标题>目录下。

• 将dist/目录下的文件推送到gh-pages分支。