1574 字
8 分钟
Astro静态博客系统+Fuwari主题部署留档

1. 安装与配置#

点击查看原教程

文本为省流极速版:

Terminal window
pnpm create fuwari@latest

然后找到在项目中找到/src/config.ts,将下面改改复制进去覆盖即可。

注意版本分支为6d39b0d,如果发生变动,请务必注意该文件是否被作者改动过结构。

import type {
ExpressiveCodeConfig,
LicenseConfig,
NavBarConfig,
ProfileConfig,
SiteConfig,
} from "./types/config";
import { LinkPreset } from "./types/config";
export const siteConfig: SiteConfig = {
title: "你博客的名字",
subtitle: "你博客的副标题",
lang: "zh_CN", // 语言code, e.g. 'en', 'zh_CN', 'ja', etc.
themeColor: {
hue: 250, // 默认主题hue颜色, 从 0 到 360. e.g. 红: 0, 蓝绿: 200, 青色: 250, 粉红: 345
fixed: false, // 是否对游客隐藏主题颜色调整
},
banner: {
enable: false,
src: "assets/images/demo-banner.png", // 博客banner图片,与 /src 相关联. 如果以 '/' 为开始则关联 /public 文件夹
position: "center", // 等同于object-position,默认只支持 'top', 'center', 'bottom'. 'center'
credit: {
enable: false, // 对banner图片展示credit
text: "", // 展示的credit值
url: "", // (可选项) 点击图片可以引导去画家的主页的链接
},
},
toc: {
enable: true, // Display the table of contents on the right side of the post
depth: 2, // Maximum heading depth to show in the table, from 1 to 3
},
favicon: [
// 这里是自定义网站tab页那边的图标,就不多赘述
// Leave this array empty to use the default favicon
// {
// src: '/favicon/icon.png', // Path of the favicon, relative to the /public directory
// theme: 'light', // (Optional) Either 'light' or 'dark', set only if you have different favicons for light and dark mode
// sizes: '32x32', // (Optional) Size of the favicon, set only if you have favicons of different sizes
// }
],
};
export const navBarConfig: NavBarConfig = {
links: [
LinkPreset.Home,
LinkPreset.Archive,
LinkPreset.About,
{
// 这里为关联你github的主页,作为external存在(简单的来说在nav栏会有个小箭头)
name: "GitHub",
url: "https://github.com/saicaca/fuwari", // Internal links should not include the base path, as it is automatically added
external: true, // Show an external link icon and will open in a new tab
},
],
};
export const profileConfig: ProfileConfig = {
// 你头像的图片,可以是任意格式,比如说.gif
avatar: "assets/images/demo-avatar.png", // Relative to the /src directory. Relative to the /public directory if it starts with '/'
// 你博客的博主名字
name: "Lorem Ipsum",
// 你博客的博主格言
bio: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
links: [
{
// 一般来说不会有twitter,你可以塞个微信的公众号(),没有这一行就删掉。
name: "Twitter",
icon: "fa6-brands:twitter", // Visit https://icones.js.org/ for icon codes
// You will need to install the corresponding icon set if it's not already included
// `pnpm add @iconify-json/<icon-set-name>`
url: "https://twitter.com",
},
{
name: "Steam",
icon: "fa6-brands:steam",
url: "https://store.steampowered.com",
},
{
name: "GitHub",
icon: "fa6-brands:github",
url: "https://github.com/saicaca/fuwari",
},
],
};
// 分享协议,CC BY-NC-SA 4.0 按人话来说就是支持个人转载但是不支持别人拿你内容商用。
export const licenseConfig: LicenseConfig = {
enable: true,
name: "CC BY-NC-SA 4.0",
url: "https://creativecommons.org/licenses/by-nc-sa/4.0/",
};
export const expressiveCodeConfig: ExpressiveCodeConfig = {
// Note: Some styles (such as background color) are being overridden, see the astro.config.mjs file.
// Please select a dark theme, as this blog theme currently only supports dark background color
theme: "github-dark",
};

2. 部署#

找到.github/workflows/build.yml,按下面的配置文件修改为符合你情况的。

name: Build and Check
# 这是一个自动化脚本
on:
push: #分支push时触发构建
branches: [ master ] # 调整为你实际的分支,博客一般直接master推就可以了,或者你选择自己新建一个分支推也行,反正调整为你推的那个分支即可。
pull_request: #分支pull_request时触发构建
branches: [ master ] # 调整为你实际的分支,博客一般直接master推就可以了,或者你选择自己新建一个分支推也行,反正调整为你推的那个分支即可。
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
cancel-in-progress: true
permissions:
contents: read
jobs:
#自动化部署失败报错你懒得弄的时候,可以把check下面的到build前面的内容删除。
#但温馨提示一句:它能检查出问题大概是真的有问题,不过很可能是因为版本的问题而导致的问题,所以你看下面作者锁了版本。
check:
strategy:
matrix:
node: [ 22 ]
runs-on: ubuntu-latest
name: Astro Check for Node.js ${{ matrix.node }}
steps:
- name: Setup Node.js
uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4.3.0
with:
node-version: ${{ matrix.node }} # Use LTS
- name: Checkout
uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
- name: Setup pnpm
uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
with:
run_install: false # Disable auto-install
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Run Astro Check
run: pnpm astro check
build:
needs: check # check阶段完成后才会构建,不会浪费构建资源,虽然这博客小到也称不上什么浪费资源。
strategy:
matrix:
node: [ 22 ]
runs-on: ubuntu-latest
name: Astro Build for Node.js ${{ matrix.node }} # Corrected job name
steps:
- name: Setup Node.js
uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4.3.0
with:
node-version: ${{ matrix.node }}
- name: Checkout
uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
- name: Setup pnpm
uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
with:
run_install: false # Disable auto-install
- name: Install dependencies
run: pnpm install --frozen-lockfile
# 构建博客网站
- name: Build site
run: pnpm build
#上传文章
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: ./dist
#部署到你的github pages的命令,可能会随着Astro版本的变动而变动,具体请参考https://docs.astro.build/en/guides/deploy/github/
#如果你不部署在github pages也行,打开https://docs.astro.build/en/guides/deploy/即可
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

2.1 更改Github Pages Build Source#

你博客对应的仓库-> Setting -> Pages

如果你不知道我在说什么,那建议你参考原文章的教程,这个仅仅是针对有前置知识朋友的一个节省时间的留档。

Github默认设置为Deploy from a branch,需要更改为Actions。

这个时候直接输入下面的git命令,推送完成后触发CI/CD,成功后就代表自动部署完成。

Terminal window
git add .
git commit -m 'init'
git push

3.域名服务(如需)#

你博客对应的仓库-> Setting -> Pages -> Custom domain

输入你购买的域名即可,点击save,Github会自动创建一个push,记得在你的项目中git pull先拉取修改。

其实就是在public文件夹下新建一个叫做CName的文件,里面有你的域名。

简单来说,你搞一个域名应用在上面,就相当于你博客被搜索引擎收录的排行/比重不会随着你仓库的变化/迁移而丢失。

一个便宜域名一年也就十块钱左右。

3.1 修改Astro主题中的网站site变量#

找到astro.config.mjs文件

site: "改为你的域名"

3.2 不知道怎么购买域名?#

查看我写的VPS购买文章中的域名及Cloudflare免费保护篇

Astro静态博客系统+Fuwari主题部署留档
https://blog.astro777.cfd/posts/guide/setting-up-your-blog/
作者
ASTRO
发布于
2025-12-30
许可协议
CC BY-NC-SA 4.0