Astro Dracula Blog

🔥 Features

• 🚀 Fast & High Performance
• ⭐ Simple & Clean Design
• 📱 Responsive Design
• 🧛‍♂️ Dracula Theme
• ⚡ Animations created with Framer Motion
• 🔍 Fuzzy Search built with fuse.js
• 🗺️ Sitemap & RSS Feed
• 🕸️ SEO-Friendly
• 🌏 I18n-Supported (zh & en)
• 📐 Mathjax Supported
• GitHub Alerts
• 📖 TOC

✅ Lighthouse Score

🚀 How To Use

File structure:

.
├── astro.config.mjs
├── package.json
├── public/
├── src/
│   ├── assets/
│   │   └── avatar.png
│   ├── components/
│   ├── config.ts
│   ├── content/
│   │   ├── config.ts
│   │   ├── 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:

1. Edit src/config.ts to configure the basic information for your site. You can also configure your umami analytics and search engine verifications here.
2. Replace src/assets/avatar.png with your own avatar.
3. Rewrite your own about page text in src/content/info/en/about.md & src/info/zh/about.md.
4. Delete my posts in src/content/posts and 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 the en and zh directories and use the same filename.

To start writing a new post, follow these steps:

1. Create a file in src/content/posts/en if you are writing the English version of a post, say hello-world.md.
2. Edit the file src/content/posts/en/hello-world.md like 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!

To customize the color scheme of this theme, edit the following files:

• src/components/prose.astro
• src/styles/global.css
• src/styles/rehype-github-alerts.css
• tailwind.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";

Useful commands:

# install dependencies
pnpm install

# start the dev server
pnpm dev

# build the project
pnpm build

# preview (after the build)
pnpm preview

📚 The Story

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 Framer Motion.

🔗 References

• Dracula Theme
• overreacted.io - Dan's blog
• bearblog.dev
• Astro Docs