After a long period of inactivity, I decided to resuscitate my personal website and learn some new web development skills in the process. This was a New Year’s resolution I’d laid out for myself, and though this is still very much a work in progress, it’s been a fun experience.
GitHub Static Sites
So, where did we start? Five years ago, my brother had suggested I look into GitHub pages to deploy an easy and free static site. I was bored in cold upstate New York, looking for a new job, and it seemed like a fun, practical way to spend a weekend.
Thankfully, the internet has never lacked for ingenious folks willing to blog about their process, so it was easy to find a step by step guide on rolling out a website. The steps were pretty basic to set up a simple Jekyll website and host is on github:
- Find a theme you like and fork it to your own repository
- Name the repository hoelwiesner.github.io and make it public
- Make any tweaks to the template and write some posts
- Maybe link to an external domain, eg. hoelwiesner.com
That’s it. Pretty simple. Though with my initial attempt at this, I spent some time poking and proding the template I’d found, breaking things, unbreaking them, all to see what I could customize and what I couldn’t. The end result was ultimately a bit clunky and tedious to update, but I was proud to finally have mine own personal website up and running. Still not sure if anyone ever visited it…
Exploring Options
Rebuilding my website wasn’t something I needed to do, rather, it was something I wanted to do. I’ve been playing around understanding building web apps, and this seemed like a fun little weekend project - take my existing website and port it to a modern framework, the redeploy it on a virtual private server. I’ve been experimenting with docker to create small apps up, and learned to deploy them on Digital Ocean.
I eventually narrowed the list of frameworks down to the following 3:
Hugo - the most recommended on reddit, a static website generator written in go and focused on the blogging options and modularity. What I eventually went with.
Pelican - another static website generator, this one written in python. Slower and less popular than hugo, but since I’m much more proficient with python I figured I would give it a shot.
Ghost - heavier blogging framework with a content management system (CMS) on the backend. This seemed like the best, easiest option. But I ran into some serious bottlenecks trying to deploy this to digital ocean. Creating the database kept crashing my server, and I didn’t want to pay more, so I eventually sunset the whole thing…
Eventually, after a week of struggling, experimenting, trying, breaking, and crashing my server one too many times, I settled on Hugo. Why? The short version was that, it just worked. And it played nice with deploying to my server.
Front End
So with the backend framework selected, a basic theme chosen, and my blog posts ported over, I wanted to learn to personalize the front end of the site and make it my own. The short version is, I experiemented with all the included theme templates, started experimenting with css, struggled with the image display, and eventually landed on what you see now.
To revisit in more detail
I wanted to stray away from the professional look of my old website and to something a bit more fun. The comic book bubbles and text boxes, with a handwritten font, may seem a bit silly, but I like them. The hand-drawn look for the div borders was fun to make. The font was picked from Google Fonts. For colors, I drew inspiration from old pop art colors.
What’s Next?
This is definitely a work in progress. I’ll keep breaking things, changing colors, fonts, rolling out new css. Turning this into an web abomination. But the hope is that I’ll keep experimenting and learning through the process. I’m not a web developer - I never will be. But I like making things, and this site is my opportunity to try out some new coding skills while sharing random thoughts with the rest of the world.