A static blog template built with Astro.
🌏 README in 中文 / 日本語 / 한국어 / Español / ไทย / Tiếng Việt / Bahasa Indonesia (Provided by the community and may not always be up-to-date)
- Built with Astro and Tailwind CSS
- Smooth animations and page transitions
- Light / dark mode
- Customizable theme colors & banner
- Responsive design
- Search functionality with Pagefind
- Markdown extended features
- Table of contents
- RSS feed
- Create your blog repository:
- Generate a new repository from this template or fork this repository.
- Or run one of the following commands:
npm create fuwari@latest yarn create fuwari pnpm create fuwari@latest bun create fuwari@latest deno run -A npm:create-fuwari@latest
- To edit your blog locally, clone your repository, run
pnpm installto install dependencies.- Install pnpm
npm install -g pnpmif you haven't.
- Install pnpm
- Edit the config file
src/config.tsto customize your blog. - Run
pnpm new-post <filename>to create a new post and edit it insrc/content/posts/. - Deploy your blog to Vercel, Netlify, GitHub Pages, etc. following the guides. You need to edit the site configuration in
astro.config.mjsbefore deployment.
---
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`
---In addition to Astro's default support for GitHub Flavored Markdown, several extra Markdown features are included:
- Admonitions (Preview and Usage)
- GitHub repository cards (Preview and Usage)
- Enhanced code blocks with Expressive Code (Preview / Docs)
All commands are run from the root of the project, from a terminal:
| Command | Action |
|---|---|
pnpm install |
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 preview:local |
Build + serve dist/ + open browser |
pnpm preview:dist |
Serve existing dist/ + open browser |
pnpm check |
Run checks for errors in your code |
pnpm format |
Format your code using Biome |
pnpm new-post <filename> |
Create a new post |
pnpm sync-notes |
Import changed notes/**/*.md recursively and build |
pnpm sync-notes:gui |
Same as above, with a category picker GUI |
pnpm edit-site-info |
Open GUI editor for title/avatar/author/GitHub/about |
pnpm astro ... |
Run CLI commands like astro add, astro check |
pnpm astro --help |
Get help using the Astro CLI |
- You can preview locally without GitHub Pages.
- Do not open
dist/index.htmldirectly withfile://for this project; built files use root paths like/_astro/...and/pagefind/.... - Use one of these:
pnpm dev(development preview)pnpm preview:local(production-like preview, auto-build)scripts\preview-local.bat(Windows double-click flow)
- Put new markdown notes into
notes/(new folders are supported). - Run one of:
pnpm sync-notespnpm sync-notes:guiscripts\sync-notes.bat(Windows double-click flow)
- The script will:
- recursively scan all
notes/**/*.md - generate/update
src/content/posts/<slug>.mdorsrc/content/posts/<slug>/index.md - keep a local sync cache in
.notes-sync-state.json - run
pnpm buildsodist/is updated for deployment
- recursively scan all
scripts/notes-sync.py also supports --dry-run, --force-all, and custom --inbox.
- Run
pnpm edit-site-infoor double-clickscripts\edit-site-info.bat. - The GUI centralizes quick edits for:
- site title/subtitle/language
- homepage avatar path
- author name and bio
- GitHub links (profile and navbar)
src/content/spec/about.mdmarkdown content
- Buttons include
Save,Save + Build, andStart Preview.
Check out the Contributing Guide for details on how to contribute to this project.
This project is licensed under the MIT License.
