🛑 Live Demo / 🖼️Gallery / 🌏 English / 🌏 简体中文
🌟 A fast and simple blog system with dracula theme built with Astro v5.
- 🚀 Fast & High Performance
- ⭐ Simple & Clean Design
- 📱 Responsive Design
- 🧛♂️ Dracula Theme
- ⚡ Animations created with Motion (the original Framer Motion)
- 🔍 Fuzzy Search built with fuse.js
- 🗺️ Sitemap & RSS Feed
- 🕸️ SEO-Friendly
- 🌏 I18n-Supported (
zh&en) - 📐 Mathjax
-
GitHub Alerts - 📖 TOC (Table of Contents)
- 🖼️ Dynamic Open Graph Generation for Posts
- ©️ Project under MIT License & Support License customization for each post
File structure:
.
├── astro.config.mjs
├── package.json
├── public/
├── src/
│ ├── assets/
│ │ └── avatar.webp
│ ├── components/
│ ├── config.ts
│ ├── content.config.ts
│ ├── content/
│ │ ├── drafts/
│ │ │ └── ...
│ │ ├── info/
│ │ │ ├── en/
│ │ │ │ └── about.md
│ │ │ └── zh/
│ │ │ └── about.md
│ │ └── posts/
│ │ ├── en/
│ │ │ └── example-post.md
│ │ └── zh/
│ │ └── example-post.md
│ ├── middleware.ts
│ ├── pages/
│ ├── schemas/
│ ├── styles/
│ └── utils/
├── tailwind.config.mjs
└── tsconfig.json
To use this theme, follow these steps:
- Edit
src/config.tsto configure the basic information for your site. You can also configure your umami analytics and search engine verifications here. - Replace
src/assets/avatar.webpwith your own avatar. - Rewrite your own about page text in
src/content/info/en/about.md&src/info/zh/about.md(📌Note: Please retain the license information contained therein and, if possible, the url for this project❤️.). - Delete my posts in
src/content/postsand write your own. Currently the theme supports both Chinese and English languages, for different language versions of the same post, you need to make sure they are located in theenandzhdirectories and use the same filename. - Remove
public/_redirectsand use your own Netlify redirect configuration. - Remove the icons in
publicand use your own. The commands below may be helpful:
# https://github.com/yy4382/yfi.moe/blob/main/app/blog/src/components/modules/head/Favicon.astro
mkdir magic
magick logo.png -resize 16 ./magic/favicon-16.png
magick logo.png -resize 32 ./magic/favicon-32.png
magick logo.png -resize 48 ./magic/icon-48.png
magick logo.png -resize 96 ./magic/icon-96.png
magick logo.png -resize 144 ./magic/icon-144.png
magick logo.png -resize 192 ./magic/icon-192.png
magick logo.png -resize 256 ./magic/icon-256.png
magick logo.png -resize 384 ./magic/icon-384.png
magick logo.png -resize 512 ./magic/icon-512.png
magick logo.png -resize 120 ./magic/apple-touch-icon-120.png
magick logo.png -resize 152 ./magic/apple-touch-icon-152.png
magick logo.png -resize 167 ./magic/apple-touch-icon-167.png
magick logo.png -resize 180 ./magic/apple-touch-icon-180.png
magick ./magic/favicon-32.png ./magic/favicon-16.png ./magic/favicon.icoTo start writing a new post, you can use the pnpm new command (see below), or follow these steps:
- Create a file in
src/content/posts/enif you are writing the English version of a post, sayhello-world.md. - Edit the file
src/content/posts/en/hello-world.mdlike this:
---
title: Hello World
tags:
- hello
- my-first-post
date: 2024-11-12 18:50:00
---
Hello! This is my first post!
<!--more-->
I'm writing my first post!
Currently, Frontmatter supports the following properties
title: the title of a posttags: the tags of a postdate: the published date of a postupdated: the updated date of a postlicense: the license of a post, set tononeto disable the license for a specific postlicenseLink: the license linkogImageUrl: specify an Open Graph image for a specific post
To customize default license, edit the src/config.ts file. To customize the license for a specific post, edit the license property in the Frontmatter of the post file.
To customize the color scheme of this theme, edit the following files:
src/components/style/prose.astrosrc/styles/global.csssrc/styles/rehype-github-alerts.csstailwind.config.mjs
Currently this theme supports both Chinese and English, and uses English as its default language.
To switch it to Chinese:
- Edit
src/utils/i18n.ts:
export const defaultLang : Lang = "zh";- Edit
public/_redirects(Make sure these are at the end of the file):
/ /en 302! Language=en
/ /zh 302!
# install dependencies
pnpm install
# start the dev server
pnpm dev
# build the project
pnpm build
# preview (after the build)
pnpm preview
# create a new post (or draft)
pnpm newMore detailed usage of pnpm new (The output of pnpm new --help):
Usage: pnpm new [options] <post-title>
Options:
-l, --lang <en|zh> Set the language (default: en)
-d, --draft Create a draft post (default: false)
-m, --mdx Use MDX format (default: false)
-h, --help Show this help message
Example:
pnpm new "Hello World"
pnpm new -l zh "你好，世界"
Caution
Due to the slug generation library used, an empty slug will be generated for a full Chinese title like “你好，世界”, which will result in a file called Untitled.md.
This is my fourth attempt at building a blog system. My journey began at the tender age of 14, when I first dabbled in creating a blog. I learned the basics of HTML in a junior high computer class, and furthered my knowledge through resources such as doyoudo. My first attempt at blogging was a simple static site created with HTML & CSS, no JavaScript, and hosted on GitHub Pages.
As I approached college, I experimented with Hexo and the Icarus theme for my second blog. For the third iteration, I continued using Hexo, but this time with the NexT theme. Using a framework like Hexo greatly streamlines the blogging process, allowing me to focus on content creation. However, I have always felt the "weight" of using a framework.
Determined to create a blog that was truly my own, I decided to build one from the ground up. And here it is!
The blog is mainly built with Astro with React components. I chose Astro because it is super fast. The color scheme is inspired by Dracula. I use Tailwind CSS for styling and Tailwind Typography for typography. And I do some animations with Motion (the original Framer Motion).