Geeking out over the new website.
I’m a geek first, and a designer second.
I’d bet this is what makes me a good designer actually. I love to tinker, learn how things work, and create new things with it.
So I created my new website, and I’d like to walk you through it.
(Because I’m a geek, and I’ll enjoy it.)
Choosing a Platform
My WordPress days are long behind me.
I first switched to Kirby, a file-based PHP CMS. Having a separate “content” folder which kept everything properly grouped was liberating; there were no more database errors and corruptions, and backing everything up became as easy as copying and pasting files.
Then I found Hugo.
Hugo is not as elegant as Kirby; it is more engineered than designed. For example, instead of deciding on defaults, it gives options to use 3-4 different things on almost everything a user touches.
- File format? Choose TOML, YAML, or JSON.
- Home layout? Choose from
- Page layout? Choose by directory content is in, or specify in the front matter.
So you pretty much have to know about these options, and define your own defaults. But creating your own set of defaults by copying Kirby’s design helps a lot.
One thing I wanted to do was to keep my main site and blog seperate, because microservices. Even though they currently use the same base, they both have different homepage layouts, as well as additional changes to make things work differently.
I did this because I will want to change my blog or homepage layout a couple of times, and I did not want one change to affect the other. Keeping things separate will allow me to play around more freely. (Yay testing!)
My coding abilities can be summarized as “scripting at best”. I type, check if it works, and type some more. So I need to see my progress as I hit
Cmd+S, and my setup allows me to do just that.
CodeKit is a fantastic Mac app that is basically a GUI for many command-line tools used to develop websites these days. It has many, many features, but I mainly use it for its SCSS compilation feature and Bower package management interface.
I put my
bower directories inside a
dev folder at the root of the site or theme I’m working on. Then I have CodeKit compile the SCSS and put it inside the
static/css/ directory, which Hugo picks up and puts inside the compiled site in
Then Hugo does its magic with the
hugo server command.
When I run the command on the site, any change I make is compiled and the webpage refreshes automatically. So if I’m typing a post, I hit
Cmd+S and I see how it looks on the page. If I’m making changes on my SCSS code, as soon as I save, CodeKit puts it into
static, Hugo picks it up, compiles, and refreshes my page.
The command I use is actually
hugo server --renderToDisk --bind 0.0.0.0,
which allows me to use this trick to test on my iPhone and iPad as well. One save, million refreshes!
Hosting for Freeeeeeee(eeeeeeee)
Netlify recently made their core service free, and allows one to just type in
netlify deploy into the terminal and have an updated site online within seconds. They offer single-click Let’s Encrypt SSL certificate installation too, and even DNS management if you’d like.
I pay for my own DNS provider (email and DNS, two things not to skimp on), and since I have my own git server, I also have to do manual deploys; but honestly, it doesn’t get much easier than this.
I only use Github to sometimes share things I create, like an app I developed using Kirby, or an icon for my favorite terminal application. Anything I personally develop and use, I keep on a self-hosted Gogs installation. Easy to set up, run, and backup; and basically runs on dimes on a 128MB VPS.
I’ve kept things separate on the blog listing page.
The first section is my blog posts on this blog. Whatever I post, they’ll show up there.
The other is a list of links on posts and content I post elsewhere. Medium, mainly. Maybe YouTube.
I also plan on launching 2 side projects before the month ends. They will obviously have their own blogs, but they’ll probably mention things I will also want to share here. So I will have the links redirecting readers to those posts as well.
More To Do
I still have a lot to do. I need to implement tags, style embeds, and work out a few other kinks.
But for now, I have a readable, accessible, and minimal blog that warrants me the most important thing to do: write and share.