I’ve wanted to make a website to display my music stuff for a while, and I just got around to actually doing it. Just a week ago, I knew basically nothing about how websites are made, other than that they used JavaScript, HTML, and CSS. I wanted to learn CSS because that is how a lot of programs are configured on my laptop running Linux, so building and designing a website basically served two purposes. Using something like Wix was off the table, I wanted to make it myself. First I asked my dad if he had any recommendations, and he mentioned Bootstrap. Bootstrap is a framework that gives you a lot of prebuilt functionality, but I really wanted to make everything myself, so ultimately I chose to ignore his advice. I wanted to have ultimate flexibility and customizability, and I was okay with having some upfront difficulty. I didn’t want to possibly have to rebuild it again later if I wanted more functionality or customizability. When looking up other possibilities, I discovered that there are a million different website frameworks. It was pretty overwhelming, but I knew that anything popular would probably be a good choice. I considered React, Vue, and AngularJS, but ultimately went with Svelte because after a cursory glance at what the syntax and file structure of different frameworks looked like, Svelte made the most intuitive sense to me. I also knew that choosing a framework could be a huge time sink, so I just had to pick one and get started.

The start

After completing the tutorials on the Svelte website, I created a basic site layout with the pages I knew I would eventually want. It really wasn’t that difficult to get a basic header, footer, and content all set up. HTML is very easy, and is a little bit similar to Latex in how you declare environments and write in them. To set up the blog, I followed this tutorial to get the blog rendered from markdown files using mdsvex. All I changed from that tutorial is I added some error handling so the whole website doesn’t crash if one quotation mark is missing from the blog posts, and adjusted the file pathing to suit my specific structure. After this, I really did have a pretty functional site that I was happy with in under 4 hours.

Hosting

I bought the domain and hosted the website on Cloudflare, which makes the whole thing very easy. The website files are uploaded to GitHub, and Cloudflare loads it from there and hosts it. This makes it so easy to make adjustments on my computer without worrying about totally breaking something on the live server. Anytime the repository gets an update, the site is automatically updated, built, and deployed just a few minutes later.

Further additions

After hosting the site, only then did I notice how broken the UI was on the phone. The pictures and navigation bar just went off the screen and extended beyond their boxes. I wanted to have an extendable hamburger menu that only rendered on mobile. I did this by having a special CSS style that only applied when the site was less than 768 pixels wide. Why 768 pixels? This is what the tutorial I found said, and it happened to be about exactly the width of my navigation bar, so I had no issues. I have no idea if this is the most standard solution, but it works. I encountered much trial and tribulation making the menu animation. I was getting all sorts of weird blue tears and things just not lining up properly. I invite you to click the menu button several times just to enjoy the sweet silky smooth animation I ended up with. There is still actually one glitch that I can’t figure out how to remove.

Next I wanted to configure Latex rendering on my blog site. I’m using a package called KaTeX to render it. This was also a nightmare to set up, and honestly I still don’t exactly know how it works. I just kept mixing and matching the different settings until I reached the configuration that actually worked, and now I can write cool things like this:

There are ways to make it render prettier (right now I think it’s a little large), but it works for now.

Now

Now I am working on making basic things easier, like uploading to the blog. I wrote a bash script to make it as easy as possible:

#!/bin/bash

set -e

BLOG_FOLDER= # I removed the file paths
SITE_BLOG=
SITE_DIR=

sync_blog() {
    rsync -avh --progress "$BLOG_FOLDER" "$SITE_BLOG"
}

preview_blog() {
    cd "$SITE_DIR"
    npm run dev -- --open
}

push_blog() {
    cd "$SITE_DIR"
    git add src/routes/blog
    git commit -m "post $(date '+%Y-%m-%d %H:%M')"
    git push
}

case "$1" in
    -s|--sync)
        sync_blog
        ;;
    -v|--view)
        preview_blog
        ;;
    -p|--push)
        push_blog
        ;;
    -a|--all)
        sync_blog
        push_blog
        ;;
    ""|*)
        echo "Unknown option: $1"
        echo "Usage: blog [-s | -v | -p | -a]"
        exit 1
        ;;
esac

Basically, it uses rsync to copy and update files across two folders on my computer so they’re identical. I know I probably could have used cp and mv to do it faster, but rsync does it all easily and I’m sure it will be fine. Then I wrote the commands so I can easily sync the files, preview the site to make sure it’s not broken, then push the files to GitHub so it gets updated on the server. So now, I can just edit my folder in Obsidian and then type blog -a to post it, without worrying about moving the files or the git commands.

Future

I want to delve more into the CSS and make it more unique. I chose a very adaptable approach to make the site, but right now it looks very generic. I can literally do anything I want, but I don’t quite have the skills for it yet. I want to learn more how it actually works so I can make it custom rather than copying tutorials. I learned a lot about CSS and HTML, but JavaScript is still basically foreign to me. AI is not much help either, as it tends to introduce bugs that I can’t fix. I’m also figuring out how I’m going to put images into the blog posts. There are many approaches I can use, and I’m deciding which is going to be the best. I want to add a search bar to the blog too, and maybe tags to easily sort them. Adding comments would be cool too, but I think I would have to write a whole backend database to store and present them, which may cost significantly more money than I am currently paying. It would also be so fun and definitely educational to make a game in JavaScript to play on here, but again I have no idea how that works.