HsuBlog 💕🏡

中文文档

HsuBlog is a beautiful, customized, personal blog theme for Astro 🌟🖥️. This theme actually borrows a lot from hexo-butterfly and HeoBlog

This theme inherently followes best practices and assures accessibility as a fundamental feature 📜✅. Both light and dark modes are natively supported. Additionally, it offers superior customization options, allowing users to tailor their experience to their unique needs and preferences.

Live Demo 😎🌐

https://hsublog.pages.dev

Why HsuBlog 🤪❓

• super fast performance 🚀⚡
• dark mode 🌒✨
• fuzzy search 🔎💡
• pagination 📄📌
• tags and categories 🏷️📚
• sitemap & rss feed 🗺️🔔
• highly customizable 🛠️🎨
• "Local FontAwesome Icons" 🖼️💎
• SEO-friendly 🕷️🔗
• followed best practices ✅🥇
• markdown gfm, KaTex/Mathjax and some other unique extension syntax (in progress) 📝🔧
• i18n supported
• responsive (mobile ~ desktops)

PS: About the performance, It depends on how you use it. In my tests, lighthouses' performance scores averaged over 85. It can even reach 97 points without using large size pictures. Why not give it a try 😁.

Project Structure 🤐📂

├── public # Files placed here will be copied to the website root directory as-is.
│  ├── locales # Contains translation fields; theme comes with Chinese and English by default.
│  │  ├── en
│  │  │  └── translation.json
│  │  └── zh
│  │     └── translation.json
│  ├── robots.txt
│  └── scripts # Contains required js and json files.
└── src
   ├── components # Theme components; typically unmodified.
   ├── layouts # Theme layout files; typically unmodified.
   ├── utils # Contains ts functions; typically unmodified.
   ├── styles # Contains theme style files in .scss format.
   │  └── custom.scss # Custom styles can be written here.
   ├── pages # Contains pages.
   ├── content # Contains blog files in .md format; all blog content is stored here.
   │  ├── blog
   │  │  ├── en
   │  │  │  └── default # Contains the default sample English blog.
   │  │  └── zh
   │  │     └── default # Contains the default sample Chinese blog.
   │  └── config.ts
   ├── env.d.ts # Type definitions; typically unmodified.
   ├── exMarkdown # Contains functions related to Markdown compilation.
   │  └── markdownThemes
   │     ├── darkTheme.json # Code block night mode style in VsCode format.
   │     └── lightTheme.json # Code block daytime mode style in VsCode format.
   ├── theme_config.ts # HsuBlog theme configuration file.
   └── site_config.ts # HsuBlog site configuration file.

Astro turns .astro or .md files in the src/pages/ directory into website routes, using their file path.

Any static resource should be placed in the public/ directory.

All blog posts are stored in src/content/blog directory.

This theme provides a CLI for quickly creating these contents.

Documentation 📄👓

You can find all you want (in the future) in the Demo

I will complete the documentation as soon as possible

Tech Stack🏗️🛠️

Framework : Astro & Vue
Type : TypeScript
Styling : Scss
Search : FuseJS
Icons : FontAwesome & IconPark
I18n : astro-i18next

Getting Started🚀🏁

1. Clone the repo 📥📝

You just need to run this code from your command line (pick one).

# git - Recommended for the convenience of subsequent updates
git clone https://github.com/KraHsu/HsuBlog.git
# or 
# npm 6.x
npm create astro@latest --template KraHsu/HsuBlog
# or 
# npm 7+, extra double-dash is needed:
npm create astro@latest -- --template KraHsu/HsuBlog
# or 
# yarn
yarn create astro --template KraHsu/HsuBlog

2. Install Dependencies🧰⚙️

npm install
# or
yarn install
# or 
pnpm install

3. Start development Server🖥️⚡

npm run dev
# or
yarn dev
# or
pnpm dev

Preview & Build🏗️👀

npm run preview
npm run build
# or
yarn preview
yarn build
# or
pnpm preview
pnpm build

Other Commands🎛️🔧

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

Command	Action
yarn run sync	Generates TypeScript types. Learn more.
yarn run new <title>	Create a new post with the title
yarn run newpage <title>	Create a new page with the title
yarn run abbr	Add a permalink to markdown files title
yarn run i18n	Create basic internationalized pages (excluding already created Markdown files)

use yarn run -h for help

To Do

...

Contribution 💡💬

If you encounter any issues or have any suggestions, feel free to create Issues or submit Pull Requests.

You can also contact me through my email or QQ (1191393280).

License📃🔏

Licensed under the MIT License, Copyright © 2023

---

Hope you enjoy it! ❤️🎉

Design & Build with ❤ by 枢衡KraHsu