Look Ma! I Built a Website!

I built a website, and you’re looking at it right now. In 2020, this is a pretty unremarkable achievement. It’s incredibly easy to set up a simple site - or even a relatively complicated one - using something like WordPress. But I chose to do it the slightly harder way - I used Eleventy, a static site generator. It turned out to be easier than I expected, partly because I also used the excellent Learn Eleventy from Scratch course by Andy Bell.

Why build a website?

I started to put together my own site sometime in early 2019, for a few reasons. I wanted to have a blog that wasn’t just on Medium. I also wanted to have a place for projects and case studies I could use in my portfolio. (As a “designer” who has worked on digital products and services, I think I’m obligated to have a portfolio site, especially if I want to get a new job or drum up work as a freelancer.)

Looking for the quickest possible option, I went to WordPress, an obvious enough choice since “39% of the web uses WordPress.” I had a few other criteria in mind: I wanted to use free / open source WordPress, and I wanted my site to be as green as possible. I ticked the green box by using Green Geeks for hosting, and was able to install WordPress on my chosen domain name scottmatter.org. I will say, setting things up via cPanel was not a lot of fun.

Designing and building my site with WordPress, I quickly found the free themes pretty limited in terms of styling. There are free plugins that add more flexibility, but the ones I found were still too inflexible for my tastes. Eventually I decided to pay for Astra Pro, a popular paid theme with more customisation options. Astra was pretty ease to use and I got to a relatively satisfying place, but I wanted still more flexibility and control than I was getting. The next stop was probably to either write my own theme or create a child theme I could tune and tweak to my heart’s content.

Around this time I came across the world of static site generators and the idea that static sites are (typically) less energy intensive and thus greener than dynamic, CMS-driven sites. Static sites (and static site generators) are one small part of a whole different approach to build websites and apps known as the Jamstack.

I figured that building a static site would help me hit my free and green goals, as well as learning how to work with HTML and CSS. Using a static site generator could make the whole process a little quicker (and more consistent) than writing every line of code by hand. I quickly realised that I’d also have to learn a little bit of JavaScript, and some of the conventions of a templating language (in my case, Nunjucks).

So there I was: I went from wanting to build a simple blog / portfolio site, to wanting to use free / open-source technology to build a (relatively) green site and to learn HTML, CSS, and JS along the way. Good times!

And how did that go?

After poking around at a few static site generators, I chose Eleventy, a relative newcomer, because it is meant to be simpler than some of the others out there. Eleventy has pretty good documentation (though, tbh, it could probably be a little easier for complete newbs like me), and there are many, many walkthroughs and tutorials available across the internets. I found Reg Hunt’s Eleventy Walk Through to be pretty easy to follow, and I was able to get up and running with basically zero previous understanding of JavaScript.

I made a few different versions of test sites, to find my way around, and made pretty extensive use of basic HTML and CSS tutorials to help me along the way. The lack of JS knowledge was a bit of an obstacle though - when I got stuck with templates and config, I was stuck.

Things really picked up once I found Learn Eleventy from Scratch. It’s an excellent, well-written, easy-to-follow starter guide to get from zero to pretty cool shit in a hurry. The course takes you from an empty folder on your machine right on through to configuring a TOML file to help deploy your new site with Netlify.

It’s organised around building this site, and it includes all of the HTML and CSS you see in action there, as well as all the JS you don’t see, because it’s handled on your own computer (or in Netlify and your git-repo of choice) as Eleventy builds the files for your static site. I worked my way through the course a few times, building and tweaking different test sites to understand how all the different pieces of code worked together.

The first time or two through, I definitely had some WTF moments when things didn’t work as expected. Sometimes it turned out to be a typo, and sometimes it turned out to be a complete lack of understanding of JS. Both of these are known sources of errors. It got a fair bit easier after I had spent a couple of commutes reading through bits and pieces of The Modern JavaScript Tutorial and learned some of the basics.

Thinking back a few weeks, it’s pretty obvious now why trying to write up my own function that limits the length of a list of blog posts* felt awfully similar to my early days on a snowboard, standing at the top of a double black diamond and just pushing off down the slope - I had no clue how to actually do what I wanted to do. But just like with snowboarding (with fewer injuries and less frozen skin) trial and error is a great way to learn, and the ability to try things out and see if they work with just a text editor, terminal, and a browser on my own machine is really helpful. *(Good news: I found something that worked, by doing a little googling)

And where are we now?

Well, the easiest way to answer that question is to have a look around this site. It’s pretty basic so far, just a blog and a few other pages. I’ve used a lot of the clever stuff from the course, and left a few other pieces on the shelf for future use (like a featured work component for the homepage that points to some projects I’d want to highlight). I replaced a fair bit of the styling (notice the different fonts and colour palette compared to Issue33), and changed values or created new classes, but stuck with the CUBE CSS approach to colouring things in, and have kept using Sass and Gorko to create and edit stylesheets in the build process.

I also put GitHub and Netflify to work, by following this truly simple guide to deploying a static site. For now, I’m still writing content in Atom, and I was delighted to see that all I have to do to publish a new post is save the new file and push it to my (private) GitHub repo. Works like magic. (Works for me, at least. If I write more often, I may want to have a CMS set up, and there are lots of options for that.)

What have I learned by doing it this way?

I’ve learned a lot in the process of building this site, and I’ll probably learn a lot more as it grows and changes over time. Unless it becomes one of those dead end legacy projects that get neglected and abandoned over time - in which case this site will probably still be here, and I will have learned things from other projects.

I learned how to code… a bit… by building this site. I don’t want to overstate things here, as I’ve probably just crossed the threshold into conscious incompetence. I’ve got a basic handle on HTML (though, to be fair, I first messed around a bit with HTML back in about 1996, when I went to university and got access to a computer lab, the internet, and some online HTML tutorials). I’ve got a similarly basic handle on CSS, and an even more extremely basic understanding of JavaScript. I also have a healthy willingness to look things up when I get stuck, which may actually make me a non-degree holding software engineer (it doesn’t [but it does make me a web developer (haha, just kidding, it still doesn’t)]).

So, now what?

The possibilities are endless. Some are little tasks - like setting up a default social image so when I share new posts on the socials they’ll look snazzy; or like creating a logo to use in the site header and favicon, for (personal) branding fun. Some are a bit bigger - like setting up a CMS or looking at more transparently green options than I’m getting with Netlify at the moment.

Some are medium-large-ish, like re-styling this site again so that when I share it with certain other designer friends of mine, I might get nods of approval (which, given that I tend to work at the fuzzier, less visually polished end of things, would be a huge accomplishment). At a minimum, there are a few little things to change that aren’t quite right - and I can’t call them bugs because they’re actually just mistakes opportunities to learn new things.

And content, more content (ugh, don’t call it “content”). Now that I’ve got a relatively easy way to post thoughts, essays, and other things for posterity, on my own little node on the web, I’ve got a long list of ideas ready to go. So next up in the “develop new habits” list is to get into a regular writing rhythm, not unlike one of my favourite profs in grad school who wrote for an hour every day and seemed to pop out new books on an annual basis.

Right then, time to get started!