My First Project Post: This Website!

Apr 7, 2026

Tags: programming

Welcome to my first project post! Each of these posts will document whatever project I’ve been working on recently. I thought it’d be appropriate that my first post would be about the process of making this website.

amameow has been my main obsession(?) since around the beginning of March or so, after my friend Evelyn suggested I make a personal website. I’d been thinking it over I guess, and the thought of making my own home page — a place I could build from nothing, on my own, filled with whatever I wanted — was really exciting for me.

So on March 8, 2026, I decided to make a Neocities account!

It would’ve been unimaginable for me a few years ago to start with little more than an index.html file and understand how to start making a website. And honestly, part of my excitement in beginning this project was that I’d be able to apply the skills I’d learned throughout my degree, and have something to show for it that I could call my own. Maybe I actually learned something valuable I’ll carry with me?!

The main reason I was drawn to computer science in the first place was my desire to be able to understand this connection between “code” and “thing you can open and click and it does stuff”. And I think that’s essentially what this website is and that is satisfying! It does a lot of things and I can get it to do more by typing more code!

The Beginning

I had no idea what I wanted my website to look like, so the first couple days I was just playing around with colors and looking at other peoples’ websites. The only things I did know were that:

  1. I wanted to have a persistent sidebar
  2. I wanted my website to be responsive (work on all screen resolutions)
  3. I wanted good performance and the experience to be really smooth
  4. Madoka Magica

Tbh, I really struggle with graphic design! Staring at my empty project was like staring at a blank sheet of paper. So I just started doing shit? I don’t really plan things out and kinda just use trial and error to see what I like. This is what my website looked like after the first couple days:

screenshot of a bare-bones welcome page

In the beginning, I started coding my project locally and tested it by opening /index.html as a file in my browser. This did not last very long, because one of the first things I tried to do was use AJAX to fetch and load the content of my website without having to load/reload pages. Unsurprisingly, I started getting CORS errors and switched to testing on a local server instead.

I kept on developing locally for a while, using VSCodium’s Live Preview extension to see my changes. I was able to make a welcome page and nav bar. I also had AJAX somewhat working; when I clicked a link in my nav bar, instead of unloading /index.html and loading /about/index.html, it calls a JavaScript function that takes the content from /about/index.html and pastes it into the content area of /index.html. No screen blinking as the page reloads! I basically took bits from this Stack Overflow question and this YouTube video to make the first version of my AJAX loader.

An Issue Arises

However, I encountered a problem! When I click on my nav bar link to my about page, everything is fine because my JavaScript will run and paste the content of /about/index.html into the main content area of /index.html and change the url bar to say amameow.neocities.org/about. But what if someone follows the link amameow.neocities.org/about? That html file only has main content with no nav bar, like this:

white page with just the text 'hewwo, this is my about page'

Okay, so I’ll just paste the nav bar code to /about/index.html.

Wait, I used AJAX in the first place because I don’t want to have to edit every single page on my website when I want to edit my nav bar. Ah! But what if I used AJAX to fetch/paste the main content when I click a nav link AND load my nav bar onto every page when it loads?

I’m a genius, problem solved! So I start writing a base template .html file and create a section for my JavaScript to load my nav and a section to hold my main content. Then I copy this template to every /about/index.html, /bottlecaps/index.html, etc. Wait, but what if I want to edit this template and add something like a footer to every page? I’ll have to edit every .html file for every page of my website. Hmm, maybe I can write a script that takes a template and inserts content into it.

Wait a second, isn’t that just a templating engine?

Moving to a Static Site Generator

TLDR; I did not end up writing my own templating engine.

I quickly realized my initial ambition to write this website using nothing but .html .css and .js files would not work for the type of project I had in mind. Most of my pages would look pretty much the same, and I wanted a lot of them. After all, each of these project posts is its own html file!

So I decided to look into static site generators. Honestly I didn’t really know what these were before I started using Neocities. The only web libraries/frameworks I had used were React, Vue, and a bit of Bootstrap in school. I’d seen SSGs mentioned on other peoples’ websites and the Neocities tutorial page, but hadn’t given them much thought. Surely I wasn’t going to make somethin that complicated?

I ended up checking out the SSGs Neocities recommended and settled on Hugo. I didn’t want to use something too similar to React or Vue because I’d already worked with those before, and the golang templating syntax looked like what I had in mind.

Little did I know, Hugo was more complicated than I thought and I took quite a bit of time learning the names it called everything. I spent a good few days reading documentation and discourse questions to fully understand what was going on. See the Hugo resources section of my links page for some resources that I wish I’d found at the beginning!

It Kinda Works?

Once I figure out how to make new pages and call JavaScript from them, things went pretty well (this took a while though, because I am dumb).

I spent hours a day coding and styling and reloading and having a lot of fun! I fixed my nav bar issues, created a calendar with working next/prev month buttons (referencing this tutorial), added a recipes page, made a gallery, made a modal, restyled my website, decorated it with pictures, and uploaded all my bottlecaps.

I wrote a Python script that resizes all my images to more reasonable sizes to improve load times (hopefully no one out there wanted to view my gallery images in 4K). I also wrote a Python script that would use git diff --name-only --cached to find changed files and upload them to my site using the Neocities API! I felt pretty cool when it first worked B).

But as my website got bigger, I decided maybe I want to show my code and all the work I put into it, so I published everything to my GitHub and now use the deploy-to-neocities action to properly do CI/CD, which is arguably more robust than my 20-line Python script.

The Future

I’m going to work to keep adding pages! I want to make posts about my recent sewing projects while I still remember most of the details. I also want to add more fun code to my bottlecaps page that lets you sort/filter/interact with it! Now that I’m more comfortable with Hugo and have re-acclimated to working in JavaScript, I keep getting new ideas for stuff I wanna implement.