A clean, elegant, and fast static blog template! 🚀 Developed with Astro!
🖥️ Frosti Demo / 🌏 Chinese README（中文 README） / ❤️ My Blog
Note
It is recommended to check out the theme preview first -> https://frosti.saroprock.com
- Lightning-fast access speed and excellent SEO
- View transition animations (using Swup)
- Sidebar integration
- Define sidebar content in
consts.ts - Social info card at the bottom
- Theme switch and back-to-top button at the bottom
- Persistent sidebar article directory
- Define sidebar content in
- Search your articles (using pagefind)
- Day / Night mode available
- Various components to enrich your blog content
- Collapsible pages
- Link cards
- Timeline components
- Various Alerts
- Code block copy button
- Image comparison
- End-of-article copyright information
- Comment system built with Waline
- Responsive pages built with Tailwind CSS and daisyUI
- The entire blog is styled for desktop, tablet, and mobile modes
- Cards adapt their layout according to your device
- Theme switch button automatically matches the theme
- 🛠️ Easy to use blog
- Simple and easy deployment and usage
- Customize your blog content in
consts.ts
Important
The comment system needs to be configured by yourself. See Waline for details. Modify src\components\Comment.astro
| Name | Meaning | Required |
|---|---|---|
| title | Article title | Yes |
| description | Article summary | Yes |
| pubDate | Article date | Yes |
| image | Article cover | No |
| categories | Article categories | No |
| tags | Article tags | No |
| badge | Article badge | No |
Before trying to set up your own blog with Frosti, you should have a basic understanding of the following:
- Basic knowledge of Node.js projects
- Methods of deploying static sites
- Basic concepts and implementation of web frontend
- Basic methods of network service operation and maintenance
Frosti is a rather simple and elegant static blog template, but using it requires some basic knowledge of web frontend and computer science. If you have no related experience, you might encounter some difficulties during usage. Therefore, we suggest learning some basic programming and frontend development knowledge first, which will help you better understand and utilize Frosti.
Important
Frosti uses pnpm as the package manager. If you haven't installed pnpm, please install it first.
- Install the pnpm package manager
npm i -g pnpm- Clone the project
git clone --depth 1 https://github.com/EveSunMaple/Frosti.git Frosti- Enter the project folder
cd Frosti- Install dependencies
pnpm i- Debug and run the project
pnpm run dev # Start the debug server
pnpm run build # Build the project into static filesNote
Frosti defaults to building with pnpm build. If an error occurs, please run pnpm update.
Tip
You can also deploy Frosti using other methods like Vercel, Netlify, etc. However, you need to have a basic understanding of these services. Astro-supported deployment methods
- Try integrating headless CMS
- Fix known style bugs
- More...
In this new era of AI development, if you encounter problems during deployment, please consult Bing AI, ChatGPT, etc. first, as they can help you solve most issues.
Of course, if you have any questions or suggestions, you can submit issues to provide feedback or communicate with the developer!
For beginners or those unfamiliar with the process, before asking questions in a group or opening a new issue, please read How to Ask Questions the Smart Way first. This will help you ask questions more effectively and make it easier for the developer to identify and solve the problem.
@Saicaca His inspiration was the main reason I created this theme
@WRXinYue Helped me a lot when I was getting started