二叉树树

二叉树树

瞎几吧写
主页归档

带你搭建基于Astro的Fuwari静态博客

#Fuwari#Cloudflare8
AI 生成的摘要
你需要准备以下内容来搭建Fuwari博客： 1. **思维能力**：能并行处理多个事件，遇到问题先思考，再搜索或与AI交流。 2. **Git**：用于版本控制，推荐使用Git命令行。 3. **Node.js**：Fuwari基于此，需要安装。 4. **GitHub账号**：用于存放Fuwari文件的代码仓库。 5. **Cloudflare账号**：用于创建Pages并绑定域名。 6. **MarkText**：可视化Markdown编辑器，用于撰写文章。 **流程**： - 本地部署Fuwari，编写文章，推送到GitHub，Cloudflare Pages自动构建新网站。 **步骤**： 1. Fork Fuwari仓库并克隆到本地。 2. 安装pnpm并项目依赖。 3. 修改Fuwari的基本信息，清理示例文件。 在`src/config.ts`中修改博客标题、语言、主题色、图标等信息，确保用户能识别你的博客。

你需要准备的东西#

  1. 一个牛逼的脑子，支持并行运算至少两个单位以上的事件。遇到问题先思考，想不通就搜索，搜索不到就去和 AI 调情，不要上来就问问问

  2. Git - Downloads (git-scm.com)：最牛逼的版本控制器，这里用于对 Github 进行操作，当然，你也可以尝试使用GitHub Desktop | Simple collaboration from your desktop但就我而言，这玩意更难用

  3. Node.js — Run JavaScript Everywhere (nodejs.org)：Fuwari 基于 Node.js，你需要安装这个来搭建博客

  4. 一个Github账号：用于创建一个代码仓库存放 Fuwari 文件

  5. 一个Cloudflare账号：用于创建一个 Pages 并且绑定域名支持访问

  6. MarkText：这是一个可视化 MarkDown 编辑器，因为 Fuwari 的每一篇文章 / 页面都是 MarkDown，所以需要一个好用的编辑器

  7. 你得会用 MarkDown 语法来编写文章，如果你不会可以参见：Markdown 基本语法 | Markdown 官方教程

流程图#

本地部署 Fuwari，编写文章 -> 推送更改到远程 Github 仓库 -> Cloudflare Pages 检测到仓库更新自动构建新的网站静态文件 -> 网站成功更改

让我们开搞吧！#

首先，我们来本地部署 Fuwari#

  1. Fork 仓库：
saicaca/fuwari

✨A static blog template built with Astro.

Astro1575355

  1. 然后将仓库克隆到本地：git clone <你的仓库URL>（推荐使用 SSH，可以不用魔法来推送更改）

  2. 首先，全局安装 pnpm：npm install -g pnpm（如果 npm 国内拉取过慢，请尝试 cnpm：npmmirror 镜像站

  3. 然后在项目根目录安装依赖：pnpm install 和 pnpm add sharp

  4. 至此，你成功在本地部署了 Fuwari

Tip

你也可以使用创建一个新的空仓库然后手动上传文件，并且可以将仓库可见性设为：Private

改写 Fuwari 的基本信息并且清理多余文件#

刚创建的 Fuwari 可能带有一些示例的博主名，ICON，URL，介绍和示例文章，为了让用户知道这是你的博客，我们需要一一改写

  1. 在根目录下的 src 文件夹中，你可以找到 config.ts 我们来开始改写

    • title：你的博客主标题

    • subtitle：你的博客副标题。可选，在首页会显示为 “主标题 - 副标题”

    • lang：博客显示语言。注释已经列出了一些常用的值，如：en, zh_CN, zh_TW, ja, ko

    • themeColor：hue 值则是你的博客主题色，可以在你的博客右上角的画板图标确定喜欢的颜色再填写
      7563ab0f25ffb372407c68990502f094

    • banner：src：即 banner 图片，支持 http/https URL

    • favicon：src：即网站图标，支持 http/https URL

    • links：即友情链接，这些链接在导航栏上

    • avatar：即你的头像

    • name：即你的名字

    • bio：即个性签名，会显示在头像和名字下面

    • NavBarConfig 为导航栏设置的超链接。ProfileConfig 为你的用户的超链接，分别如图
      b7b10f8a67366e31a2dccfe2b11394ad

    • icon：你需要前往Font Awesome去搜索你想要的图标，比如 QQ，则填写 fa6-brands:qq ，如图。Fuwari 支持这几种类型：fa6-brands, fa6-regular, fa6-solid, material-symbols
      c3d43f1ccb58398fb070102259a33b57

    • 这里我附上我的 config.ts

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

export const siteConfig: SiteConfig = {
  title: '二叉树树的博客',
  subtitle: '爱你所爱！',
  lang: 'zh_CN',         // 'en', 'zh_CN', 'zh_TW', 'ja', 'ko'
  themeColor: {
    hue: 355,         // Default hue for the theme color, from 0 to 360. e.g. red: 0, teal: 200, cyan: 250, pink: 345
    fixed: false,     // Hide the theme color picker for visitors
  },
  banner: {
    enable: true,
    src: 'assets/images/222.webp',   // Relative to the /src directory. Relative to the /public directory if it starts with '/'
    position: 'center',      // Equivalent to object-position, only supports 'top', 'center', 'bottom'. 'center' by default
    credit: {
      enable: false,         // Display the credit text of the banner image
      text: '',              // Credit text to be displayed
      url: ''                // (Optional) URL link to the original artwork or artist's page
    }
  },
  favicon: [    // Leave this array empty to use the default favicon
     {
       src: 'https://q2.qlogo.cn/headimg_dl?dst_uin=2973517380&spec=5',    // 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: '128x128',              // (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,
    {
      name: '随机图',
      url: 'https://pic.onani.cn',     // 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
    },
    {
      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 = {
  avatar: 'assets/images/111.webp',  // Relative to the /src directory. Relative to the /public directory if it starts with '/'
  name: '二叉树树',
  bio: 'Protect What You Love./爱你所爱！',
  links: [
    // {
      // 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/afoim',
    },
    {
      name: 'QQ',
      icon: 'fa6-brands:qq',
      url: 'https://qm.qq.com/q/Uy9kmDXHYO',
    },
    {
      name: 'QQ',
      icon: 'fa6-solid:envelope',
      url: 'mailto:acofork@foxmail.com',
    },
  ],
}

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

  2. 清理多余文件。在根目录下的 src/content/posts 文件夹中会有一些示例文章，这些文章介绍了一些 MarkDown 语法和技巧，可以让你更快上手 Fuwari 和 fuwari，我们可以将其保存到别处

  3. 至此，你已经可以开始撰写文章了

让我们开始写作！#

  1. 首先，在项目根目录执行：pnpm new-post <这里填写你的文章标题>

  2. 然后，在根目录下的 src/content/posts 文件夹中会多出一个 xxx.md文件

  3. 我们使用 MarkText 打开这个文件，你可以看到一些基本信息，我们只需要关注几个重要的信息

  4. title: xxx
published: 2024-10-14
description: ''
image: ''
tags: []
category: ''
draft: false 
lang: ''

    • title：文章标题

    • published：文章创建时间

    • description：文章描述，正常会显示在文章标题下面

    • image：文章封面图（同目录需要写 ./ 如：./assets/images/2024-10-14-11-33-28-image.webp）

    • tag：文章标签

    • category：文章分类

  5. 我们还需要更改根目录下的 astro.config.mjs 。在第 34 行更改 stie: 为你的站点 URL，如： site: "https://onani.cn",

  6. 欸？有的人就会问了，MarkDown 固然好，但是我要如何处理图片的置入呢

  7. 这也很简单，多亏了 MarkText 这款软件，我们也可以像编辑 Typecho 一样直接使用 Ctrl+CV 来在 MarkDown 语法中置入图片，但是我们需要一些小设置：

    • 依次点击：MarkText 软件的左上角的三条杠 -> File -> Perferences -> 左侧的 Image 分类 -> 如图设置 -> 注意更改第一个选项为 Copy 开头的选项，将 Perfer 开关打开，然后上下两个文本框一个填写绝对路径一个填写相对路径

194fa762931bd63cbcf115019741b090

  • 这样，当置入图片时，会往 assets/images 文件夹复制一份，然后通过![1](assets/images/1.webp)写入 MarkDown 文件。这样网站就能成功读取到图片啦。而你只需要 Ctrl+CV，其他操作 MarkText 都会自动处理
  1. 至此，你已经会用 MarkText 编写 MarkDown 语法的博文了

本地预览，然后发布到 Github#

  1. 当你认为你的文章已经写得差不多时，想要看看效果？请到项目根目录执行：pnpm dev，稍等片刻，你就可以本地预览你的博客啦
    72ba111d431a57b329bded410d9ff24c

  2. 好！接下来我们需要使用 Git 将我们所做的更改发布到 Github

    • 首先，你需要让 Git 知道你是谁：git config --global user.name "你的Github用户名"和git config --global user.email "你的Github邮箱@example.com"

    • 然后，设置远程仓库：git remote add origin <远程仓库的URL>

    • 随后，让我们提交所有文件：git add .

    • 之后，让我们发布一个本地提交：git commit -m "项目初始化"

    • 最后，让我们将本地更改提交到远程仓库：git push

  3. 此时，你的 Github 仓库应该已经有了新的提交（😂我又回来了）
    f622deef5cb0ba96a86dbec389cb54a4

让 Cloudflare 连接上 Github，使用 Pages 服务展示你的博客（FREE！）#

  1. 前往 Cloudflare 的 Workers 和 Pages 页面，创建一个新 Pages
    2888424c90d2a4142a669b9b069a9f33

  2. 然后选择连接 Git 存储库，连接你的 Github，随后设置构建命令：pnpm build ，然后设置构建输出目录：dist ，如图
    e8731dd67783e8e095f31ac26509f08d

6978ff499a1fe3f38a92d85015223613

  1. 绑定自定义域，访问自定义域即可访问你的博客！

  2. 随后，你只需要在本地编写文章，然后使用 Git 将更改推送到远程仓库，Cloudflare 就会自动部署，更新你的博客！

加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。