I had use Hugo to build my blog for about half an year, but I found it’s a little complex for me if I want some custom features, and it doesn’t fit my tech stack well. So I decided to build a new static blog with astro, which is a new static site generator that I’m interested in. Astro is good for markdown-based blogs, and it’s easy to add custom feature if you know a little bit of JavaScript.
Init a new astro project
I used bolt.new to create a new astro project. Currently every free user in bolt.new have 300k tokens per day, it can support about 5 or 6 times communication. In order to save tokens, I firstly use the template it provided instead of directly chat with the AI.
Generage prompts
After the project is created, I use GPT-4 to help me generate a set of prompts to make blot.new generate the code I want. Because I’m afraid that the AI will generate some code that I don’t want, I use the prompts to guide the AI to generate the code I want.
The key word I provide to GPT-4o is: readability, minimalist, static blog, markdown support, markdown metadata support.
The Result is:
**Prompt Planning:**
Build a minimalist blog focused on providing an excellent reading experience. Use Astro as the frontend framework. Store blog content in Markdown files, with each file supporting custom metadata (like title, date, tags). The frontend should have the following features:
* A clean, simple design that prioritizes readability and is suitable for long-form content.
* Responsive design to adapt to various devices.
* Display Markdown content, including metadata like title, date, and tags.
* Support common Markdown formats such as headings, lists, code blocks, and quotes, with aesthetically pleasing code highlighting.
* Offer basic page navigation, including a homepage, category pages, and individual post pages.
* Implement pagination for displaying multiple posts.Edit the code
After I get the code generated by bolt.new (The token cost so quickly!), I use Github Copilot Edits with Claude 3.5 to help me add features and fix bugs. This could be a little slow, you may need try several times to get the code you want.
Migrate blogs
Migrate my blog, mainly by changing the format of the metadata.
Previous metadata format
***
title = "some blog title"
date = "2024-12-07"
tags = ["astro", "AI"]
***New metadata format
---
title: "some blog title"
date: 2024-12-07
tags: ["astro", "AI"]
---This can be easily done by simple script or just use vscode to replace all.
Future work
As you can see, the new blog is very simple now, but it actually meets all my need.
I’m going to open-source this project once I finish the project documentation and integrate the new features.