arduino 1 docker 2 htmlhint 1 hugo 2 jekyll 1 npm 2 plantuml 1 rpi 1 semantic-release 1 semver 1 static-site-generator 3

Static site generators part 1 - Jekyll

Recently I did a low-tech hamstermonitoring setup with Arduino and Grafana. I decided the end result was fun enough to share, and did a blog post/webpage of it: https://oversizedhat.github.io/hamstermonitor

Likely I spent as much time on the webpage as I did on the project itself so I thought why not go all the way and also write about the experience using Jekyll, which was my first time testing out a static site generator. One out the gazillion to choose from (https://jamstack.org/generators).

I choose Jekyll purely based on the fact that it seemed dead simple with GitHub pages, which felt like a good idea as the project was in Github and my requirements where minimal, and something like this:

The process

Jeykll was indeed easy to setup and work with, especially considering my limited set of “requirements”. If you are familiar with readme markdown commonly used for repository README.md files you can make a basic site simlar to how you make a word document. This site looks like it gives a good overview of markdown syntax: https://www.markdownguide.org/basic-syntax (and btw it seems that site itself is built using Jekyll).

Besides this you need some basic familiarity with version control systems, git specifically. At least if you want to use GitHub Pages for hosting.

There are tons of guides out there so I will spare you another…

This looks like a good guide for setting it up: https://guides.github.com/features/pages/ and this looks like good knowledge base from taking it further than I did: https://docs.github.com/en/free-pro-team@latest/github/working-with-github-pages/about-github-pages-and-jekyll

Here are however some of my own reflections/additions to the guides
$ docker-compose up 👍

To keep it real simple stick to one of the GitHub supported themes: https://pages.github.com/themes/

# in _config.yml
theme: jekyll-theme-minimal

Add the emoji plugin to make :thumbs_up: = 👍

# in _config.yml
plugins:
  - jemoji

Hook up your to your Google Analytics account

# in _config.yml
google_analytics: "UA-XXXXXXXXXX"

Videos, for example, are’nt covered out of the box so you need to embed some html along with your markdown, and the same concept applies for anything custom that you cannot achieve with the markdown alone.

<!-- _includes_/video_embed.html-->
<div style="width:100%">
<video controls style="width:100%">
    <source src="assets/my_dang_cool_vid.mp4" type="video/mp4">
    <p>Your browser doesn't support HTML5 video. Here is
       a <a href="assets/my_dang_cool_vid.mp4">link to the video</a> instead.</p>
</video>
</div>

And include it it in the markdown:

## Check out my dang **cool** vid:
{% include video_embed.html %}

Takeaways


Feel free to get in touch if you have any questions.
Click to reveal contact details dude
jekyll static site generator arduino