About This Site.
As it turns out, people are often interested in learning more about my site's design and structure. I occasionally receive correspondence from other programmers and students asking me how I built it, what makes it tick, etc. I decided it was time to write everything down in one place so that I can simply link to it the next time somebody asks.
To make this fun, let's sort-of pretend I'm actually responding to someone who happens to chat in a very structured way like a magazine interview after it has gone through the editing process.
P.S. No, I don't find any of your messages annoying. It's very flattering. :)
I really like what you've done with your site. What did you use to make it? Is it WordPress? You see, I'm interested in making my own website and I hear WordPress is great for...
My website is built using Jekyll, a really fun and mature open-source static site generator written in Ruby.
What does that mean?
Think of Jekyll as a CMS, like WordPress, but it's not hosted anywhere in the cloud. Instead, it's a program you run on your computer that reads in a directory structure laid out in a mostly opinionated manner, then processes all your content (blog posts, pages, images, other static assets such as CSS) and renders it all into a static set of files and folders that you can then shove into a server and host like any other static site.
Wow, that seems like a ton of work to run a website and blog. Do you copy all these files over manually each time?
No, it's not too much work if you can use Git.
You see, GitHub Pages comes with native Jekyll support. This means that I create a repo out of a Jekyll-generated directory structure, and push to it whenever I want to update something. GitHub runs a build, and starts serving the latest version of the site within seconds.
It's pretty seamless once you get it set up.
Ah, that's convenient. So, is there a blogging UI of some sort?
No. Unfortunately, you will need to write and edit your posts directly, using a text editor.
Oh no no! Fortunately, you can use Markdown (and other markup languages), which is the same language used to format text on a plethora of sites, such as Stack Exchange and Reddit.
Along with a ton of other features, Jekyll also comes with the Liquid Templating Engine pre-configured, so you can use templates and not have to copy-paste your site header across all your pages. It's pretty nice.
Okay, you're really selling me on this Jekyll thing.
But wait, there's more!
WordPress and other website/blog backend systems generate webpages on the fly as requested. This requires you to pay for server time to keep your site up and running. It's not super expensive, but GitHub Pages is FREE. All I pay for is my domain (annual, inexpensive, personally using Namecheap). This is optional, and you can host your site on a free GitHub subdomain (username.github.io) instead if you prefer.
And since Jekyll only builds the site once every time you update your content, pages are served in a snap. WordPress is fantastic, but Jekyll (and other site generators) is better IMO, especially if you're a programmer.
So how did you go about designing your site? Is the code available somewhere?
Source code is available here.
I built this site back when using Jekyll themes meant cloning an empty repo from someone and adding your posts and pages to it. Now, it's possible to install themes via Ruby gems, apparently.
Anyways, I had only intended to make a blog. So I started off with the Poole theme by @mdo (of Bootstrap fame). You can see Poole's design influences on my blog, still. A year or so later, I decided to take down my old, static portfolio site and re-do the whole thing as a new, Frankenstein'd extension of my Jekyll blog. I peppered in a bunch of frameworks and made the monstrosity that this site is today. The code is as clean, readable and maintainable as can be, but digging into it for the first time may not be easy. Feel free to take inspiration from my design, folder layout etc.
Jekyll is highly opinionated, yet rather flexible in its own way; this is just my way of using it.