vornexx
318 words
2 minutes
Fuwari x FrontmatterCMS

What is Fuwari?#

Fuwari is a blog template that is built with Astro. For the things that are not mentioned in this guide, you may find the answers in the Astro Docs.

The features Fuwari offers :#

  • Built with Astro and Tailwind CSS
  • Smooth animations and page transitions built with Swup
  • Light / dark mode
  • Customizable theme colors & banner
  • Responsive design
  • Search with Pagefind
  • Tags
  • Categories

How do I use Fuwari?#

  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 Vercel, Netlify, GitHub Pages, etc. following the guides.

Deployment settings :#

  • Framework : Astro
  • Build command : npm run build
  • Build output directory: dist

What is the Fuwari Frontmatter of the posts?#

---
title: My First Blog Post
published: 2023-09-09 (YEAR-MONTH-DAY)
description: This is the first post of my new Astro blog.
image: /images/cover.jpg (can also be a direct link to an image)
tags: [Foo, Bar]
category: Front-end
draft: false
---

What are the terminal commands to run the project, install dependencies etc.?#

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

CommandAction
pnpm install AND pnpm add sharpInstalls dependencies
pnpm devStarts local dev server at localhost:4321
pnpm buildBuild your production site to ./dist/
pnpm previewPreview 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 --helpGet help using the Astro CLI

What is FrontMatterCMS?#

Well, FrontmatterCMS is the CMS that runs within Visual Studio Code, GitPod, and many more. It grants control over your static generator’s content by bringing in the CMS features from Front Matter.

How did I configure mine and how do I use it?#

Download the Extension from the VS Code store. (assuming you use VS Code) then, Configure it to your liking and enable Writing Settings.

Fuwari x FrontmatterCMS
https://blog.vornexx.is-a.dev/posts/setupblog/blogbreakdown/
Author
vornexx
Published at
2024-03-26