Skip to content
Stephen Anfield photographing laptop with code on the screen
Stephen Anfield photographing laptop with code on the screen

In my last blog post, I shared what I was looking for in a new website.

To quickly recap, I was looking for these characteristics.

  • Accessible
  • Minimal Updates
  • Fast
  • Different

I didn't have too much of a plan going into this project.

I didn't take notes.

What I did do was click all the things, read, mess up, fix, click some more, and probably ended up sharing my social security in a public forum without realizing it.

Whoops.

Joking aside, here's what I remember of my chaotic, self-made roadmap.

1. What are my options?

This question was the beginning of my search.

All I knew was that I wanted something I hadn't tried before.

I'd read somewhere about website design going back to the early days of the internet when websites were straight up HTML. This was appealing because I figured my self-taught skills in HTML would come in handy.

I was Jesse Spano excited.

I found websites discussing CMSs without heads, static cling generators, and stuff about a stack of jam?

It was a lot.

Fast forward many browsing sessions later, and I chose to go with a static site generator.

2. What's a static site generator?

Here's how one website describes static site generators.

Think of a static site generator as a script which takes in data, content and templates, processes them, and outputs a folder full of all the resultant pages and assets.

Not sure if this is an accurate comparison, but I feel like the way it works might be similar to the way WonkaVision worked in the movie "Willy Wonka and the Chocolate Factory."

Probably not.

Anyway....

Thinking I'd made all the major decisions I'd need to make, I found out I was wrong. There were tons of options for static site generators. Out of everything listed, I went with Eleventy, which bills itself as a "simpler static site generator."

What drew me to Eleventy was the community focus on accessibility, the showcase of websites built using 11ty, and even more websites built using Eleventy.

With another decision out of the way, I moved to the next part.

3. What even is Node? Command line? What?

Listen.

I knew I was in trouble when I had no idea what the first set of instructions meant.

I went with it anyway and hit up the Google machine to figure everything out.

First order of business: Figure out how to find the command line. Thankfully, I remembered using something that resembled what I thought to be command line to play one of the ways we contracted dysentery back in the day--Oregon Trail.

I Googled "thing that looks like 'The Matrix' code terminal, which led me to a freeCodeCamp piece about seriously upgrading the Mac terminal. Fast forward a few steps, and I find something called Homebrew and decide to install with reckless abandon.

I figured out the basics of command line interface, installed Node, and performed a local installation of Eleventy. As I moved through directories on my hard drive, I spent a lot of time Googling how to do most of the things. Turns out, actual developers Google things too!

The next part had me in a tizzy.

4. GITchie gitchie ya ya mocha chocolata?

Git.

It's an open source version control system that confuses me. I gather it'd be better understood if I were making contributions to open source projects.

But I'm not there yet.

It feels a lot like if people collaborated on Twitter to write and edit books in the open.

If someone were to ask me how I first accessed git, I can say I stumbled around using command line interface and probably made more mistakes than I realize. After getting discouraged, I decided to give GUI (graphical user interface) a try with a promise to myself to revisit the command line to better understand git workflows.

After attempts to use Github desktop and GitKraken, I got rid of those, tried Hyper, discovered Visual Studio Code, and decided to keep VSCode and Hyper installed.

As you can see, I experimented with a lot.

With a basic understanding of git and the proper software installed, I moved on to the next part.

5. How do I use code to design this thing?

At this stage, I applied what I already new to new, updated ways of doing things.

One of the awesome benefits of Eleventy is you can tell it how to process files.

What do I mean?

If beef stew were a program, it'd be Eleventy.

How?

It works with multiple template languages (HTML, Markdown, JavaScript, Liquid, Nunjucks, Handlebars, Mustache, EJS, Haml, and Pug), so you can add whatever you want. Or not.

I visited a few sites for inspiration, used Github to see how they were built, and then figured out how to make some of the elements my own.

Here are the sites that have been the most helpful.

With accessibility at the top of my list of must-haves, I studied the Web Content Accessibility Guidelines (WCAG) along with several other sites. I took into account color contrast ratios, typography, and other elements in an effort to make the experience available to everyone.

For more advanced concepts like grids, I found an awesome developer who let watch them navigate the code.

Just like moving into any new space, it's expected that changes will be ongoing. With what I had, I felt like it was good to go live.

6. How do I get this thing on the internet?

I left the web host I had for about a decade and made the switch to Google Domains. After that, I configured the DNS settings to prevent a disruption with my Gmail. Then, I switched my name servers over to Netlify to host my website for free.

The other thing about Netlify is the SSL certificate is included!

Gonna let you in on a little secret: I created and deleted 3 or 4 accounts because I felt like I messed up. Support is through a public forum, and I didn't want to run the risk of looking like I didn't know what I was doing. So there's that.

After pulling, pushing, and committing my repository where my code is stored, Netlify does some stuff, and it's what you're seeing right now.

Voila!

7. What's next?

Keep learning.

As I learn more, the expectation is to test and implement here. Will I stick with a static site? Who knows? It took me considerably longer than using a site builder, and I'm totally okay with that.

People say, "Always be learning," so I guess this is one of many ways that I'm doing just that.

Let me know what you think or ask questions by finding me on Twitter or sending a message through my contact page.

Thanks a lot for stopping by!