Website notes
Website notes
Ruby
I have installed ruby 3.3 using Homebrew (brew install ruby@3.3). Version 3.3 is required.
By default, it is keg-only, so I added it to PATH manually, using
echo 'export PATH="/opt/homebrew/opt/ruby@3.3/bin:$PATH"' >> ~/.zshrc
To test locally
Requirements
The Gemfile is required to build the site locally.
It specifies how to generate the website.
Now it is also synced to GitHub; it would have resorted to a default version otherwise.
Building locally
Follow this guide: https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/testing-your-github-pages-site-locally-with-jekyll
To build site run
PATH="/opt/homebrew/opt/ruby@3.3/bin:$PATH" bundle exec jekyll serve
It will be available here.
To clean up the locally generated content run
PATH="/opt/homebrew/opt/ruby@3.3/bin:$PATH" bundle exec jekyll clean
Favicon
To generate favicon from a Unicode character, use
echo '<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48">
<text x="24" y="36" font-size="42" text-anchor="middle">⏻</text>
</svg>' > favicon.svg
magick -background transparent favicon.svg -resize 16x16 favicon-16.png
magick -background transparent favicon.svg -resize 32x32 favicon-32.png
magick -background transparent favicon.svg -resize 48x48 favicon-48.png
magick favicon-16.png favicon-32.png favicon-48.png favicon.ico
This first creates an .svg file, and then combines it at three different resolutions into one .ico.
Inserting images
It is easiest to incorporate images directly as HTML elements in the .md file.
Some ways to add it:
<img src="/assets/photo.jpeg" style="display: block; margin: 0 auto;">
<img src="/assets/photo.jpeg" style="border-radius: 10px;">
<img src="/assets/photo.jpeg" style="border-radius: 50%; width: 330px; height: 400px; object-fit: cover; display: block; margin: 0 auto;">
The argument style="display: block; margin: 0 auto;" centers the image on the page.
The first version adds the square image in full size, the second rounds the corners.
I am using the third, which creates a cutout.
Setting width and height equal gives a circle, otherwise an ellipse.