Build a blog with Jekyll

My goal was to build a fast and simple site. I wanted to offer good user experience and privacy. I was looking to move away from the controversial World Wide Web of 2020 (my old Medium blog*cough*).

A clean, static site offers me the opportunity to control all these things, checks all the boxes to be trendy, and pushes me to step out of my Swift and iOS comfort zone.

I would like to start this blog by giving explicit credit to all the sources that helped me create it.

The main building blocks include:

• Jekyll as the static site generator behind the scenes.
• GitHub Pages, providing much more than hosting.
• And Hyde offered a solid foundation theme to build on.

But many other tools, snippets, and docs helped me shape the site. Here is a quick reference:

• Jekyll has some wonderful plugins (supported by GitHub Pages:)
  • jekyll-sitemap, to improve SEO and accessibility with a site map.
  • jekyll-seo-tag, to generate SEO metadata.
  • jekyll-feed, to provide a feed for Atom readers.
  • jekyll-mentions, to simplify @ mentions.
  • jekyll-gist, to make Github Gist embeds as simple as they can be.
• I also added other custom add-ons, thanks to:
  • Twitter Cards on Jekyll, by Brian Bunke + Twitter’s reference.
  • Reading Time without Plugins, by Calos Becker.
  • Jekyll Heading Anchors, a great solution without plugins or JS.
  • Plain link to share posts with Tweet Button.
  • Simple image captions following this advice.
• The Liquid docs were excellent to help me get used to this template language used by Jekyll.
• And, last but not least, Goat Counter, is powering simple and respectful analytics. See Privacy for more info.

Shifting gears to design and accessibility, these were highly valuable:

• I got actionable feedback to improve accessibility from:
  • Lighthouse in Google Chrome.
  • WAVE Web Accessibility Evaluation Tool.
  • ADAScan.
• W3C’s WAI-ARIA was a useful reference to keep around.
• The A11Y Project has some enlightening articles (at least for someone new to web accessibility.)
• Contrast Finder helped me build a proper color scheme.
• Source Serif Pro and Source Code Pro by Adobe (under the Open Font License) found in and provided by Google Fonts.
• Font Awesome supplies the icons all around.
• Syntax highlighting is heavily inspired by Xcode 11, and diff highlighting from Github.
• I used The Shapes of CSS on CSS-Tricks for my decorative graphics.
• Supporting Dark Mode in Your Web Content from Apple’s WWDC, showed me how to support dark mode and also exposed me to CSS variables.

I may come back with more details in the future, so… stay tuned!