1574 字
8 分钟
Astro静态博客系统+Fuwari主题部署留档
1. 安装与配置
文本为省流极速版:
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@v42.1 更改Github Pages Build Source
你博客对应的仓库-> Setting -> Pages
如果你不知道我在说什么,那建议你参考原文章的教程,这个仅仅是针对有前置知识朋友的一个节省时间的留档。
Github默认设置为Deploy from a branch,需要更改为Actions。
这个时候直接输入下面的git命令,推送完成后触发CI/CD,成功后就代表自动部署完成。
git add .git commit -m 'init'git push3.域名服务(如需)
你博客对应的仓库-> Setting -> Pages -> Custom domain
输入你购买的域名即可,点击save,Github会自动创建一个push,记得在你的项目中git pull先拉取修改。
其实就是在public文件夹下新建一个叫做CName的文件,里面有你的域名。
简单来说,你搞一个域名应用在上面,就相当于你博客被搜索引擎收录的排行/比重不会随着你仓库的变化/迁移而丢失。
一个便宜域名一年也就十块钱左右。
3.1 修改Astro主题中的网站site变量
找到astro.config.mjs文件
site: "改为你的域名"3.2 不知道怎么购买域名?
Astro静态博客系统+Fuwari主题部署留档
https://blog.astro777.cfd/posts/guide/setting-up-your-blog/