Jekyll Dev Notes

My notes from working on longhornriichi.com and peterish.com.

Programming

Jekyll, Liquid, Bootstrap, and CSS.

Jekyll

testing locally

bundle install
bundle exec jekyll serve --livereload

(might need bundle add webrick for Ruby 3.0 or later)

Then site is available on http://localhost:4000

serving to other local machines in WSL2

1. go into the advanced settings of Windows Defender Firewall and add an inbound rule that allows connecting to port 4000 via TCP. For more details, see this article.
2. find the WSL2’s IP (NOT its vEthernet (WSL) from ipconfig on PowerShell) with hostname -I in the WSL2 shell. Let’s say this is a.b.c.d.
3. In PowerShell, netsh interface portproxy set v4tov4 listenport=4000 listenaddress=0.0.0.0 connectport=4000 connectaddress=a.b.c.d
4. bundle exec jekyll serve --host=0.0.0.0 (note that --livereload slows down loading A LOT for other devices on the network so it’s disabled here)
5. find the host’s IPv4 address with ipconfig in PowerShell. Say it’s 192.168.x.y
6. access the hosted Jekyll site from other local devices via 192.168.x.y:4000

portproxy

• as noted in this StackExchange response, the default port forwarding for WSL2’s host device doesn’t work for other devices on the local network, and this is why we needed the portproxy steps above.
• Note that WSL2 IP may change upon restarting Windows, so we need to redo the portproxy steps every time WSL2 gets a new IP address. See related discussion here. My WSL2’s IP has thus far remained the same across multiple restarts of both Windows 11 and WSL2 itself 🤷.
• use netsh interface portproxy show all to see all portproxy rules.

Liquid

Iterating through a JSON object can be done as follows:

{% for social_key_value in site.data.socials %}
    {% assign social_name = social_key_value.first %}
    {% assign social_obj = social_key_value.last %}
    <a href="{{ social_obj.url }}"><img src="{{ social_obj.image | relative_url }}" title="{{ social_name }}" alt="{{ social_name }}" /></a>
{% endfor %}

References: shopify doc and Stack Overflow answer.

Also, you can escape Liquid processing with

{%- raw -%}
{% endraw %}

(can you guess how I produced the code block above?)

Bootstrap

• The grid system (xs, sm, md, lg, xl) seems to be at the core of the Bootstrap flow.
• the version of Bootstrap can be found in _scss/bootstrap/bootstrap.scss in our Jekyll site.

SASS / SCSS

Use sass-migrator to address deprecation warnings like this. For Jekyll purposes it’s likely just this, though:

sass-migrator division --verbose --migrate-deps _sass/*.scss

Getting/Hosting Content

CloudFlare, Free Image Hosting,

CloudFlare

Use pull requests to allow previewing deployments. This deploys the site to a preview URL. Unfortunately this still counts against the 500 free monthly deploys.

Free Image Hosting

Google Photos

For a lightweight solution (minimal image hosting), we can embed pictures from Google Photos. This is not scalable but enough for longhornriichi.com (it only needs to show a select few photos). We can adjust the size of the embedded image by editing the link like this.

Cloudinary

Given a greater image hosting demand (like peterish.com), we can use Cloudinary (I have to yet to figure out if there is a storage limit for the free tier). It has built in support for serving cropped, resized, etc. versions of an image (without affecting the uploaded, full image).

NOT Imgur

Do NOT use Imgur as a CDN because this violates their TOS.

They are ambiguous about hosting images through them on your blog, but best not to try your luck.

Free Illustration

いらすとや has cute cliparts for free use; the interface is in Japanese, though.