前言#

技术要点：fuwari+Github+Netlify+Cloudflare
项目地址

1.安装Node.js(已安装可跳过)#

Node.js官网
(可选)配置nodejs
如果是更新nodejs，直接下载安装包安装即可

1.5.安装pnpm(已安装可跳过)#

① 安装并配置

npm install -g pnpm

# 允许设置全局安装包的 bin 文件的目标目录。
pnpm config set global-bin-dir "D:\Environment\pnpm-store"
# 包元数据缓存的位置。
pnpm config set cache-dir "D:\Environment\pnpm-store\pnpm-cache"
# pnpm 创建的当前仅由更新检查器使用的 pnpm-state.json 文件的目录。
pnpm config set state-dir "D:\Environment\pnpm-store\pnpm-state"
# 指定储存全局依赖的目录。
pnpm config set global-dir "D:\Environment\pnpm-store\global"
# 所有包被保存在磁盘上的位置。
pnpm config set store-dir "D:\Environment\pnpm-store\pnpm-store"

② 配置系统环境变量(删除用户系统变量中的PNPM_HOME)，然后重启电脑

PNPM_HOME = D:\Environment\pnpm-store   
Path = %PNPM_HOME%

③ 检查配置路径

pnpm c list

④ 删除之前自动创建的文件及文件夹

D:\.pnpm-store
C:\Users\PC\AppData\Local\pnpm-cache
C:\Users\PC\AppData\Local\pnpm-state
C:\Users\PC\AppData\Local\pnpm\.tools
C:\Users\PC\AppData\Local\pnpm\store

2.将官方fuwari部署到本地并安装依赖#

如果你已经有自己的fuwari项目，那么只需要将你自己的项目拉取到本地就可以了

git clone https://github.com/saicaca/fuwari.git
pnpm install

2.5.主要操作内容#

src/config.ts文件 | src/content/posts文件夹 | src/content/spec文件夹

2.6.src/config.ts文件的使用说明#

import type {
  LicenseConfig,
  NavBarConfig,
  ProfileConfig,
  SiteConfig,
} from './types/config'
import { LinkPreset } from './types/config'

export const siteConfig: SiteConfig = {
  title: '米米的博客',	// 标题名称
  subtitle: 'Fuwari',	// 副标题
  lang: 'zh_CN',         // 'en', 'zh_CN', 'zh_TW', 'ja', 'ko', 'es', 'th'
  themeColor: {
    hue: 250,         // 主题颜色的默认色调，范围为 0 到 360。例如：红色: 0，青色: 200，蓝绿色: 250，粉色: 345
    fixed: false,     // 对访客隐藏主题颜色选择器
  },
  banner: {
    enable: true,	// 是否打开banner
    src: 'assets/images/demo-banner.png',   // 相对于 /src 目录的路径。如果以 '/' 开头，则相对于 /public 目录
    position: 'center',      // 等同于 object-position，仅支持 'top'、'center'、'bottom'。默认为 'center'
    credit: {
      enable: false,         // 显示横幅图片的版权信息
      text: '',              // 要显示的版权文本
      url: ''                // （可选）指向原始作品或艺术家页面的链接
    }
  },
  toc: {
    enable: true,           // 在文章右侧显示目录
    depth: 2                // 目录中显示的最大标题深度，范围为 1 到 3
  },
  favicon: [    // 将此数组留空以使用默认的 favicon
    // {
    //   src: '/favicon/icon.png',    // favicon 的路径，相对于 /public 目录
    //   theme: 'light',              // （可选）'light' 或 'dark'，仅在为浅色和深色模式设置了不同的 favicon 时使用
    //   sizes: '32x32',              // （可选）favicon 的尺寸，仅在设置了不同尺寸的 favicon 时使用
    // }
  ]
}

export const navBarConfig: NavBarConfig = {
  links: [
    LinkPreset.Home,
    LinkPreset.Archive,
    LinkPreset.About,
    {
      name: 'GitHub',
      url: 'https://github.com/saicaca/fuwari',     // 内部链接不应包含基础路径，因为它会自动添加
      external: true,                               // 显示外部链接图标，并在新标签页中打开
    },
  ],
}

export const profileConfig: ProfileConfig = {
  avatar: 'assets/images/demo-avatar.png',  // 相对于 /src 目录的路径。如果以 '/' 开头，则相对于 /public 目录
  name: 'Ctory-Nily',	// 个人名称
  bio: '内容介绍',	// 给自己的介绍
  links: [
    {
      name: 'Twitter',
      icon: 'fa6-brands:twitter',       // 访问 https://icones.js.org/ 获取图标代码
                                        // 如果未包含相应的图标集，则需要手动安装
                                        // 使用 `pnpm add @iconify-json/<图标集名称>` 安装
      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/Ctory-Nily',
    },
  ],
}

export const licenseConfig: LicenseConfig = {
  enable: true,
  name: 'CC BY-NC-SA 4.0',
  url: 'https://creativecommons.org/licenses/by-nc-sa/4.0/',
}

2.7.src/content/posts文件夹的使用说明#

这个文件夹是用来修改文章的，当使用 pnpm new-post <filename> 后会在这个文件夹内生成一个文章md，如果需要修改这篇文章的内容，就要在这里打开那个文件进行修改

文章开头格式：

---
title: My First Blog Post		# 文章标题
published: 2023-09-09		# 文章创建时间
description: This is the first post of my new Astro blog.		# 文章简介
image: ./cover.jpg		# 文章封面
tags: [Foo, Bar]		# 文章标签
category: Front-end
draft: false		# 是否为草稿，如果为true那么就不会显示
lang: jp		# 仅当文章语言与 `config.ts` 中的网站语言不同时需要设置
---

2.8.src/content/spec文件夹的使用说明#

在这个文件夹内修改的是About之类的其他页面的内容，页面同样以md文件为主

3.生成文章并测试生成#

pnpm new-post <filename> // 可以在src/content/posts/ 目录中编辑
pnpm build // 构建网站至 ./dist/
pnpm dev // 在 localhost:4321 启动本地开发服务器

4.安装git(已安装可跳过)#

Git官网

4.1.配置github公钥私钥#

① 安装完git后输入,生成公钥私钥
邮箱要与后面git配置的邮箱一致

ssh-keygen -t rsa -C “邮箱”

② 查看公钥并配置到github中
公私钥生成路径: C:\Users\用户名\.ssh
id_rsa: 私钥
id_rsa.pub: 公钥
查看公钥 > 打开Github > Setting > SSH and GPG keys > New SSH key > 输入名称 > 输入公钥内容 > Add SSH key

③ 验证配置

ssh git@github.com

4.5.在github上创建仓库并将本地项目上传到github上#

在这里如果你是从官方拉取的项目,那么需要先删除项目文件夹内的.git文件夹
第一次上传到github：

git config --global user.name “用户名”
git config --global user.email “邮箱”
git init
git add .
git 次提交 -m "第一次提交"
git remote add origin git@github.com:Ctory-Nily/fuwari-blog.git
git push -u origin main

更新本地仓库后上传：

git add .
git commit -m "更新信息"
git push -u origin main

第一次拉取最新的github仓库：

git clone git@github.com:Ctory-Nily/fuwari-blog.git
npm install

更新拉取最新的github仓库内容：

git pull origin main

5.将github项目托管到Netlify上#

部署参考
 Netlify官网

① 添加 Netlify 适配器

npx astro add netlify

② 根目录新建文件netlify.toml

[build]
  command = "pnpm build"
  publish = "dist"

③ 重新推送到仓库，此时Netlify的配置就部署好了

git add .
git commit -m "重新推送"
git push -u origin main

④ 在 Netlify 中选择新建项目，并选择此github项目, 然后就会自动部署了

6.购买域名#

…

7.使用Cloudflare对域名进行加速#

Cloudflare官网
…

8.本地自动更新脚本 “提交更新.bat”#

无论本地文件先修改还是后修改都可以同步上传上去,注意bat文件格式要为ANSI

@echo off
echo 正在同步github仓库
git pull origin main

echo 正在添加所有文件到暂存区
git add .

:: 格式化日期和时间
for /f "tokens=1-3 delims=/- " %%a in ("%date%") do (
    set year=%%a
    set month=%%b
    set day=%%c
)
for /f "tokens=1-3 delims=:.," %%a in ("%time%") do (
    set hour=%%a
    set minute=%%b
)

:: 去掉小时前面的空格（如果小时是单数）
set hour=%hour: =%

:: 组合成 "年 月 日 时 分" 格式
set formatted_time=%year%年%month%月%day%日%hour%时%minute%分

:: 询问是否自定义提交信息
:input_confirm
set /p confirm=是否自定义提交信息？(输入 y 或 n): 
if "%confirm%"=="" (
    echo 输入不能为空，请重新输入！
    goto input_confirm
)

if "%confirm%"=="y" (
    :input_msg
    set /p commit_msg=请输入提交信息: 
    if "%commit_msg%"=="" (
        echo 输入不能为空，请重新输入！
        goto input_msg
    )
    git commit -m "%commit_msg%"
) else (
    git commit -m "%formatted_time%"
)

echo 正在推送到远程仓库
git push -u origin main

echo 操作完成！
pause