What tools do you use to build your website?

A variety of tools and software are used to build Made Mistakes — the biggies being an 21.5-inch Apple iMac, Jekyll, Visual Studio Code, Adobe’s Creative Suite, and SourceTree.

I’ve been on a static site generator kick the last couple of years and use Jekyll to publish this page and everything else found on the site. The basic idea is I write a bunch of text in Markdown and Jekyll spits out a set of files¹ that I upload to a webserver.

As far as Jekyll plugins, I use the following:

• jekyll-sitemap: silently generates a sitemaps.org compliant sitemap.
• jemoji: adds GitHub-flavored emoji to Jekyll with the use of Liquid tags.
• jekyll-seo-tag: adds metadata tags for search engines and social networks to better index and display site content.
• jekyll-paginate-v2: pagination replacement for the old official Jekyll paginate plugin.
• jekyll-typogrify: improves typography using typogruby and titlecase.
• jekyll-figure: generates <figure> elements.
• jekyll-toc: generates a table of contents.

If you’re really interested in the specifics of how the site is built I’ve made its source available on GitHub for anyone to fork and download. And because I’m such a cool dude I’ve also open sourced a couple of Jekyll themes for you to use and abuse — you’re welcome!

Scripts and jQuery plugins

• BigFoot.js: jQuery plugin for displaying footnotes inline.
• Lazysizes: high performance and SEO friendly lazy loader for images (responsive and normal), iframes and more.
• Lity: lightweight, accessible, and responsive lightbox plugin.
• Smooth Scroll: automatically make same-page links scroll smoothly.
• comment-reply.js modified from Wordpress.org.

Hosting and other stuff

• Site hosting and deployment via Netlify.
• Domain name registered with Hover.
• Icons from SimpleIcon and Noun Project.