二叉树树

二叉树树

瞎几吧写
首頁封存

帶你搭建基於Astro的Fuwari靜態博客

#Fuwari#Cloudflare11
AI 翻譯
這篇文章透過AI由簡體中文翻譯成繁體中文。查看原文
AI 生成的摘要
你需要準備的東西包括：一個支持並行運算的腦子、Git、Node.js、GitHub帳號、Cloudflare帳號和MarkText編輯器。首先，Fork Fuwari的倉庫，然後將其克隆到本地，安裝pnpm和依賴。接著，修改Fuwari的基本信息，如標題、副標題、語言、主題顏色、橫幅、網站圖標和個人資料等。最後，配置導航欄和個人資料，完成本地部署。

你需要準備的東西#

  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 倉庫：

  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 就會自動部署，更新你的博客！

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。