A modern way to build a personal blog

A short log of creating a personal blog in the era of AI.

Intro

To be frank, I do not have the web development knowledge to build a personal blog from scratch. Although I have some experience with setting up a github.io page for my (actual) portfolio, it was largely thanks to the kind developers who created the themes and templates that I could set up a page without trouble.

That was in 2023. Time has passed and a lot of things have changed. One of them is that large language models (LLMs) are now really good at understanding and generating code, which means that I can now delegate most of the nitty-gritty codework to LLMs. I already had a mental image of how the final blog should look like (the stevejobsarchive web page was a core inspiration). So… theoretically I should be able to build a personal photography blog with the help of LLMs, right?

By the time I started this project, I have been using LLMs for quite a while (for research work), and I have tried to use the skills that I have acquired to manage different LLMs and agents and what not to help me with building this blog. This is a short log of how I approached this project, but I expect most of this will become irrelevant in about 6 months time since the field of AI is moving so incredibly fast.

Largely, the whole approach is divided into two steps. We will use opencode (oh-my-opencode to be exact) to build the bulk of the codebase, but we need to come up with the best starting prompt as much as possible. So the first part is to understand what it means to build a personal photography blog from scratch, and then come up with the best starting prompt to give to opencode. Then we can use opencode to generate the codebase, and troubleshoot the codebase as we go along.

Step 1: Understanding the problem and coming up with a final ‘starting’ prompt

As I mentioned, I do not have the web development knowledge to build a personal blog from scratch, so I used chatGPT as much as possible to understand what it actually means to build a personal photography blog from scratch as well as to make several key design choices. Of course, I didn’t understand some of the design choices even mean, so I had to keep asking chagGPT for further explanations and examples, which eventually led me to a point where I felt like I have a good understanding of the problem.

This was the initial prompt that I gave to chatGPT.

I need to make my personal homepage and I need your help. 
- I have no background in web development including frontend and backend coding. 
- I do have a lot of ML code experience, which made me follow the guidelines from the alfolio theme for my github io page (this is my professional portfolio homepage, a different one). 
- I also had quite an experience with VSCode copilot, including using agentic code to customize the alfolio homepage. 
- I would like to make another homepage (a personal one), where I also have (nearly) full control without payment or subscriptions like github io. 
- The homepage should have a personal blog page, as well as a page where I can showcase my personal photography. 

Can you search in-depth for my options, based on my context? We can adjust things along the way.

…which pretty much was enough to get a good conversation going. In the end, we ended up with choosing several key design choices:

  • Static sites over dynamic sites
  • Framework to use (Astro and Tailwind, after several rounds of discussion)
  • Hosting (Kinsta, after several rounds of discussion)
  • Use .mdx files for content
  • How to store photos, and in what format? Do we need backup formats? (jpg vs. webp vs. avif)
  • Will I need Figma? (Nope)

And I asked chatGPT to generate a final ‘starting’ prompt for opencode:

Based on the previous discussions so far, create a prompt that can be used for other AI models to quickly and efficiently understand, such as other GPTs or AI builders such as opencode. Here is some preliminary draft including the decision to use Kinsta. After providing the summary, list up (again) stuff that I need to decide further to properly start the site building, or whether it is okay to start.

...(summary of the previous discussion, including the key design choices)

and chatGPT generated the following final prompt for opencode:

You are an expert web architect + Astro developer. Help me build a personal, non-profit photography blog with a minimalist editorial aesthetic (Steve Jobs Archive-like: typography-forward, lots of whitespace, calm, modern, “genuine”, not flashy).

CONTEXT / BACKGROUND
- I’m strong in ML/code and Git, but not a web-dev specialist.
- I use VS Code + Copilot/agentic coding to implement and customize.
- I want a personal homepage separate from my professional GitHub Pages (al-folio).
- No ads. Low traffic (~20 visitors/month).

CORE GOALS
- Static site built with Astro (static output) + MDX for posts.
- ~50 posts total; each post is a long-form essay with 3–20+ photos.
- Photo-essay layouts must support: full-bleed images, side-by-side pairs, captions, credits (and optionally EXIF displayed as text).
- I want near-full code control (my own codebase), clean URLs, sitemap + RSS, good OG/meta tags.

HOSTING (DECIDED)
...

ASTRO BUILD ASSUMPTIONS
...

CONTENT + MEDIA STRATEGY (PHASE 1)
...

PHASE 2 (ONLY IF NEEDED)
...

REQUEST / WHAT YOU SHOULD PRODUCE
...

STYLE REQUIREMENTS
...

Step 2: Building the codebase with opencode

The next step was simple, to use opencode (specifically, oh-my-opencode) to generate the codebase based on the final prompt that we have just generated. The opencode experience was pretty much what I expected, and I had to adjust some design elements along the way to make it work correctly, which was not a bit issue. If you want this feature, just ask for it. The main skill here is not the tool itself, but rather how to describe your needs specifically with minimal ambiguous language, which was something that I was already familiar with from my experience with using LLMs for research work.

These are some experiences that I had during the process:

  • It is good to have a quick understanding of each of the LLM models’ strengths and weaknesses. Not all models are good at some tasks.
  • It is still always good to try to actually understand the codebase even if you are not familiar with web development. Your interaction with the model will be much more effective.
  • If you want to have a specific feature, just ask for oh-my-opencode to implement it. One of the things that I realized I needed was a program that can generate watermarks for my photos. Previously, that was done by lightroom, which I unfortunately do not have anymore. So I implemented it by describing the precise requirements to oh-my-opencode, and it was able to generate a small python codebase that can generate watermarks for me.
  • The quickest way to troubleshoot is to actually write the contents of the blog and see for yourself whether there are anything wrong or missing. All plans are imperfect, and you will likely need to adjust the codebase along the way, which is not an issue anymore.

Conclusion

So that was fun. As I mentioned above, I am pretty sure all of this approach will be obsolete in about 6 months time.

But I am quite happy with the result, and I hope that this project will be a good excuse to keep using new tools, and to keep creating.