Creating My Personal Website

14 Jul 2023

About a week ago I sat down at my computer and resolved to create a personal website. This has been a project that has been on my bucket list for a while now, so it’s great to be able to finally tick that off. I don’t think I’m completely happy with the design/visuals as they are at the moment, but I guess it’s fine for a first attempt. Ultimately it’s great to have at least something, which I can continue to update and refine over time.

The Beginnings

There are many different ways to create a website, ranging from manual coding of everything to drag-and-drop website creation software, and I spent the first couple of days researching and exploring different options. I found I liked the freedom and flexibility of manual coding, but didn’t want to be writing in html every time I created a new post or project. Enter static site generators. These are web frameworks or other tools that generate the html pages from data and content using templates.

The SSG I am using is astro.build, which has been really lovely to use and has great documentation. I have four html pages (index, about, blog, projects), and everything else is generated from markdown files, a very intuitive markup language. 10/10 would recommend.

Creating The Thing

I went into this project with a very rusty knowledge of html and CSS, but I wasn’t doing anything fancy so it was pretty easy to pick back up and mess around with. CSS grids took a bit of getting used to, but I think I figured it out in the end. The official Astro tutorial was super helpful in getting everything set up, and I followed the first half of it pretty closely to build my initial prototype:

Prototype Screenshot

Here is also where I started using the Catcuppin theme, which I am still using on the current version of the website. After this, I started building out the project grid, and changed the colours to something more resembling the current state of the site. I also thought creating some pixel art was a good idea, so I did that.

Second Prototype Screenshot

I continued to refine, and added actual projects instead of placeholders, and now we’re here. Hooray!

I’m hosting the site on Netlify, through GitHub, and using a domain I bought from Porkbun. I have a local version on my computer, which I can make changes to without impacting the deployed site, and to update these changes, I just push to main, and netlify handles the rest, which is great.

Final Thoughts

The website has been a super fun project, and despite having background working with websites, I still learned a lot about the process of taking a website from inception to deployment. Moving forward, I plan to continue posting my projects, and perhaps articles on them if I think that might be interesting. If you made it this far, thanks for reading!