二叉树树

Things You Need to Prepare#

1. A brilliant mind that supports parallel processing of at least two or more events. When encountering problems, think first; if you can't figure it out, search for it; if you can't find it, flirt with AI; don't just come and ask, ask, ask.

2. Git - Downloads (git-scm.com): The most powerful version control system, used here to operate on GitHub. Of course, you can also try using GitHub Desktop | Simple collaboration from your desktop, but in my opinion, this thing is harder to use.

3. Node.js — Run JavaScript Everywhere (nodejs.org): Fuwari is based on Node.js, and you need to install this to set up your blog.

4. A GitHub account: Used to create a code repository to store Fuwari files.

5. A Cloudflare account: Used to create a Pages and bind a domain name to support access.

6. MarkText: This is a visual Markdown editor. Since every article/page in Fuwari is Markdown, you need a good editor.

7. You need to know how to use Markdown syntax to write articles. If you don't know how, you can refer to: Markdown Basic Syntax | Markdown Official Tutorial

Flowchart#

Locally deploy Fuwari, write articles -> Push changes to remote GitHub repository -> Cloudflare Pages detects repository updates and automatically builds new website static files -> Website successfully updated.

Let's Get Started!#

First, let's locally deploy Fuwari#

1. Fork the repository:

2. Then clone the repository to your local machine: git clone <your repository URL> (SSH is recommended, so you don't need magic to push changes).

3. First, globally install pnpm: npm install -g pnpm (if npm pulls too slowly in China, try cnpm: npmmirror 镜像站)

4. Then install dependencies in the project root directory: pnpm install and pnpm add sharp.

5. At this point, you have successfully deployed Fuwari locally.

Rewrite Fuwari's Basic Information and Clean Up Unnecessary Files#

The newly created Fuwari may come with some example blogger names, ICONs, URLs, introductions, and sample articles. To let users know this is your blog, we need to rewrite them one by one.

1. In the src folder at the root directory, you can find config.ts. Let's start rewriting it.

   • title: Your blog's main title.

   • subtitle: Your blog's subtitle. Optional, will be displayed on the homepage as "Main Title - Subtitle".

   • lang: The display language of the blog. Comments have listed some common values, such as: en, zh_CN, zh_TW, ja, ko.

   • themeColor: The hue value is your blog's theme color, which you can determine by the color you like from the palette icon in the upper right corner of your blog.
     

   • banner: src: the banner image, supports http/https URL.

   • favicon: src: the website icon, supports http/https URL.

   • links: friendly links, these links appear in the navigation bar.

   • avatar: your avatar.

   • name: your name.

   • bio: your personal signature, displayed below the avatar and name.

   • NavBarConfig sets the hyperlinks for the navigation bar. ProfileConfig sets your user's hyperlinks, as shown in the image.
     

   • icon: You need to go to Font Awesome to search for the icon you want. For example, for QQ, fill in fa6-brands:qq, as shown in the image. Fuwari supports these types: fa6-brands, fa6-regular, fa6-solid, material-symbols.
     

   • Here I attach my config.ts.

   • Copy

     import type {
       LicenseConfig,
       NavBarConfig,
       ProfileConfig,
       SiteConfig,
     } from './types/config'
     import { LinkPreset } from './types/config'
     
     export const siteConfig: SiteConfig = {
       title: 'Binary Tree Blog',
       subtitle: 'Love what you love!',
       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: 'Random Images',
           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: 'Binary Tree',
       bio: 'Protect What You Love./Love what you love!',
       links: [
         {
           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: 'Email',
           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. Clean up unnecessary files. In the src/content/posts folder at the root directory, there will be some sample articles that introduce some Markdown syntax and techniques, which can help you get started with Fuwari faster. We can save them elsewhere.

3. At this point, you can start writing articles.

Let's Start Writing!#

1. First, execute in the project root directory: pnpm new-post <enter your article title here>.

2. Then, in the src/content/posts folder at the root directory, a new xxx.md file will appear.

3. We use MarkText to open this file, and you can see some basic information. We only need to focus on a few important pieces of information.

4. Copy

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

   • title: Article title.

   • published: Article creation date.

   • description: Article description, normally displayed below the article title.

   • image: Article cover image (in the same directory, you need to write ./, e.g., ./assets/images/2024-10-14-11-33-28-image.webp).

   • tags: Article tags.

   • category: Article category.

5. We also need to change the astro.config.mjs in the root directory. Change site: on line 34 to your site URL, e.g., site: "https://onani.cn",.

6. Hey? Some people might ask, Markdown is great, but how do I handle image insertion?

7. This is also very simple. Thanks to the MarkText software, we can directly use Ctrl+C and Ctrl+V to insert images into Markdown syntax, but we need to make some small settings:

   • Click in order: the three lines in the upper left corner of the MarkText software -> File -> Preferences -> Image category on the left -> set as shown in the image -> Note to change the first option to the one starting with Copy, turn on the Prefer switch, and fill in the absolute path in one text box and the relative path in the other.

• This way, when inserting an image, a copy will be made to the assets/images folder, and then it will be written into the Markdown file as ![1](assets/images/1.webp). This way, the website can successfully read the image. You just need to use Ctrl+C and Ctrl+V, and MarkText will handle the rest automatically.

8. At this point, you can write Markdown syntax blog posts using MarkText.

Local Preview, Then Publish to GitHub#

1. When you think your article is almost done and want to see the effect, please execute in the project root directory: pnpm dev. After a moment, you can preview your blog locally.
   

2. Great! Next, we need to use Git to publish the changes we made to GitHub.

   • First, you need to let Git know who you are: git config --global user.name "Your GitHub Username" and git config --global user.email "your GitHub email@example.com".

   • Then, set the remote repository: git remote add origin <remote repository URL>.

   • Next, let's commit all files: git add ..

   • After that, let's make a local commit: git commit -m "Project initialization".

   • Finally, let's push the local changes to the remote repository: git push.

3. At this point, your GitHub repository should have a new commit (😂 I'm back again).
   

Let Cloudflare Connect to GitHub and Use Pages Service to Display Your Blog (FREE!)#

1. Go to the Cloudflare Workers and Pages page, and create a new Pages.
   

2. Then choose to connect to the Git repository, connect your GitHub, then set the build command: pnpm build, and set the build output directory: dist, as shown in the image.
   

3. Bind a custom domain, and you can access your blog via the custom domain!

4. After that, you just need to write articles locally and use Git to push changes to the remote repository, and Cloudflare will automatically deploy and update your blog!