gearsix.net » misc » road-to-gearsix-net

road to gearsix.net

gearsix

This has been a loooooooong time coming... Consider this the gearsix.net v2 launch. Here's how I got it to this point.


This site has been one of my passion projects for quite a few years now. It started back on Google Sites, then resurfaced when as a project to teach myself some web development and now it's finally re-returned in it's current form.

I wanted to document it's history a little, so let's have a look.

version 0

As noted, this site originally started on Google Sites (surprisingly hasn't joined to Google Graveyard yet). It was basically a basic CMS with a WSIWYG interface for building a website.

I knew a little HTML/CSS but not really enough to build a website from scratch, so I took a template and ended up with this:

gearsix.net v0 about gearsix.net v0 home

I can't remember the name the template but it didn't look very different from this, its where I got the background image that I use almost everywhere now though (see the background used in the byuu theme: low_contrast_linen.png).

I didn't really know what I wanted to do with the website, so I just started by adding "stuff i like". I had started to play with the HTML, just copy/pasting bits because it was quicker than doing via the Google Sites editor.

I lost interest before the site was finished.

version 1

This version of the website came about after my first year at university, during the summer holiday (first year finishes fairly early compared to second and third, so we all had a few weeks before we went home).

I made it after finding Neocities, which was really the inspiration for me to start learning how to build a website from scratch (I'm still using it as my host to this day! circa. 2020).

I already knew how to program in 2-3 languages and was familair with the syntax so it wasn't hard. Getting my head around how to build webpages in HTML/CSS from the bottom up was the main goal. Of course, using Neocities this didn't include running a web server but that came later.

Here's a live version

It's also unfinished. This time I had more of an idea about what to do with the site but (again) lost interest before finishing it. I never got around to doing the project pages. I didn't even end up finishing the "stuff i like" pages, mostly because filling them out was incredibly tedious. My idea was that the website would be a nice reference for me to use when picking a movie to watch or something.

Re-creating my own version of the template in version 0 was pretty fun though and the site's fairly resonsive (despite not knowing about @media queries). This design was later adapted to the "wrapped" theme you can use now.

The one thing it taught me is that doing a website with just HTML/CSS from scratch is pretty tedious when you want to using the same page layout for multiple pages. This though fed strongly into the final re-incarnation.

version 2

Here we are, version 2. This took a lot of work, mostly because I ended up making it as difficult as possible for myself. This was after i'd graduated and found myself with a lot of free time after work (being a student doesn't grant you much free time outside of lectures and drinking).

The first thing I did to make use of this free time was play a lot of video games. After doing that for a few months, I decided that I needed something creative to do (work wasn't scratching the itch). I started by spending a fair bit of time messing about with linux stuff, which can very easily become a time vampire thanks to the endless changeability of the platform. After that deciding to stop messing about with that, I created dotfm. Then I decided I wanted to create this site, somewhere that I can host all of my projects, write about them and other things, share whatever I thought would be worth sharing, etc.

Here's the prototype, the layout was very much adapted from version 1.

After creating this prototype I realised I was going to have a fairly big problem. How do I create this site? I was planning to have multiple articles and projects, so creating it by hand wasn't really an option since deciding to change any of the HTML after creating those pages would be an absolute nightmare. Well there are several options for getting around that:

  1. Make the website dynamic, with a custom backend server
    • The server would generate pages on the fly, using HTML templates and whatever plain-text files etc for the content
    • The problem with this approach is that I'd need to host the server myself or configure a cloud service. While it's not too much effort, it would mean moving off of Neocities (I was a big fan of the site, so I didn't really want to do that). I'd also need to find a good (& cheap) place to host it, which would be more work. Ontop of that I'd need to develop and maintain the backend server, again this wouldn't be super hard but it's work I didn't really want to do.
  2. Use Javascript to dynamically fill in the content of the HTML pages.
    • Personally I really don't like this approach for websites (this differs from a web app). There's no reason something relatively simple needs to rely so heavily on Javascript.
    • It means anyone that doesn't enable JS in their browsers for whatever security/anonymity reasons wouldn't be able to view any of the content.
  3. A CMS.
    • Ideal for this usecase.
    • I've never found one I like.
  4. Use a static site generator.
    • This is the best option for me. Create HTML templates, write the content in plain-text, generate the website and host the resulting static website wherever I want (Neocities!).
    • It's option 4 with more work.

Okay, great. So why did it take me so long to do it?

I ended up being way too fussy and decided to make my own static site generator (pagr) in a language I didn't know so that I could use my newly-found creative energy to learn a new language and create a new tool. If you want to know more about the tool I built, then I'll have some pages on that soon too. That's where most of the time went, the rest was me going overboard designing the look of the site.

As you can see I've created multiple CSS themes for the site, which required building the HTML in a way that would be able to easily adapt to multiple styles - making sure content wasn't wrapped in div soup. I might have gone overboard (if you're literate in CSS, have a look at the hack I did to get borders on the .post elements in the "wrapped" theme).

Anyway, as you can see gearsix.net is finally here and I'm pretty happy with it. Hopefully content will keep flowing, if anything this site should serve as a motivation to make sure it does! *unless I get bored again :)

Addendum

An article about the static site generator I built: developing an ssg