🍥Fuwari

A static blog template built with Astro.

This is a fork modified to work with Cloudflare Pages.

🖥️ Live Demo (Vercel)   /    📦 Old Hexo Version   /    🌏 中文   /    🌏 日本語   /    🌏 한국어   /    🌏 Español   /    🌏 ไทย

README version: 2024-09-10

✨ Features

• Built with Astro and Tailwind CSS
• Smooth animations and page transitions
• Light / dark mode
• Customizable theme colors & banner
• Responsive design
• Comments
• Search
• TOC

Additional Features Added in This Repository

• Configuration for Cloudflare Pages
• Caching of GitHub API requests using Cloudflare Workers Cache and KV

🚀 How to Use

1. Generate a new repository from this template or fork this repository.
2. To edit your blog locally, clone your repository, run pnpm install AND pnpm add sharp to install dependencies.
   • Install pnpm npm install -g pnpm if you haven't.
3. Edit the config file src/config.ts to customize your blog.
4. Run pnpm new-post <filename> to create a new post and edit it in src/content/posts/.
5. Deploy your blog to Cloudflare Pages by following the steps in this guide.
   Don't forget to update the site configuration in the astro.config.mjs file, and add the required secrets under Variables and Secrets in your Cloudflare Pages settings before deploying the site.

Required Environment Variables

• SECRET_GITHUB_API_CACHE_PAT - A personal access token used by the Worker to send requests to api.github.com.
• SECRET_GITHUB_API_CACHE_SIG_KEY - A SHA-256 hex-encoded key used to sign the repository, verifying that the repo actually belongs to your blog.

astro.config.mjs

• Update kv_namespaces[0].id with the ID you get from creating a KV namespace in your Cloudflare account.

⚙️ Frontmatter of Posts

---
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
lang: jp      # Set only if the post's language differs from the site's language in `config.ts`
---

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command	Action
pnpm install AND pnpm add sharp	Installs dependencies
pnpm dev	Starts local dev server at localhost:4321
pnpm build	Build your production site to ./dist/
pnpm preview	Preview your build locally, before deploying
pnpm new-post <filename>	Create a new post
pnpm astro ...	Run CLI commands like astro add, astro check
pnpm astro --help	Get help using the Astro CLI