Go to file
bdn 7b25935298
Fix email on homepage
2023-02-27 00:24:59 -05:00
_dist Initial commit to Codeberg 2023-02-27 00:01:02 -05:00
_src Fix email on homepage 2023-02-27 00:24:59 -05:00
.gitignore Initial commit to Codeberg 2023-02-27 00:01:02 -05:00
Gemfile Initial commit to Codeberg 2023-02-27 00:01:02 -05:00
Gemfile.lock Initial commit to Codeberg 2023-02-27 00:01:02 -05:00
README.md Initial commit to Codeberg 2023-02-27 00:01:02 -05:00
_config.yml Initial commit to Codeberg 2023-02-27 00:01:02 -05:00
jekyll.sh Initial commit to Codeberg 2023-02-27 00:01:02 -05:00

README.md

bdn.sh

My personal website, built using Jekyll.

Building

Local development can be done using Podman, so you do not need Jekyll installed. In a terminal emulator, you can build a temporary container as follows:

# Navigate to the source folder. Location will vary depending on where you put it.
$ cd bdn.sh

# Build the container, mounting the current directory as a filesystem for the container
$ podman run --network=host -it --rm -w $PWD -v $PWD:$PWD:Z -e JEKYLL_ROOTLESS=1 docker.io/jekyll/jekyll:latest <COMMAND>

Replace <COMMAND> with any command to run in the container. jekyll build will build the site to the output _dist/ directory, and jekyll serve -w will serve a live-updating development mode of the site to localhost:4000.

Structure

All site content is stored under _src/. Static HTML/CSS is built into the _dist directory.

Under _src/:

  • _includes/ contains "snippets" of HTML that are referenced in templates.
  • _layouts/ contains HTML templates that are populated with page content on build.
  • _sass/ contains the SASS (.scss) files that are built into plain CSS. File names follow the name _foo.scss - this is important for how Jekyll processes SCSS.
  • assets/ are static assets that are not modified before build time.
    • The only exception is assets/css/main.scss, which Jekyll automatically builds into assets/css/main.css (notice .scss changes to .css). In order for Jekyll to notice this file, it must start with two sets of ---. It's a strange system, but it's the only way I know that works.

KaTeX

LaTeX is rendered using the KaTeX library and the kramdown-math-katex Jekyll plugin. You can read more about using them on this blog post by Guillaume Endignoux.

Jekyll processes math figures and layout while the site is building, so no JavaScript is sent to the user. Typically, KaTeX isn't rendered by the server, and it's up to your browser to properly display it. I prefer having Jekyll render it before publishing, so users without JavaScript enabled can properly read figures, as well as preventing a flash of unformatted math as the JavaScript loads.

KaTeX requires some extra CSS and fonts, which are only loaded on pages that contain LaTeX. I do this by adding page variables to the pages that need math rendering. At the top of a page's Markdown file, there will typically be some variables set in the front matter:

---
title: Page title
date: 2023-02-26
---

For pages where I want the KaTeX resources to be included in the page's HTML, I add the variable katex and set it to true:

---
title: Page title
date: 2023-02-26
katex: true
---

In the template files for both the page layout and head snippet, there are if/else statements for checking if the katex variable is true. If it is, it adds the extra resources.

Compressing HTML

HTML is compressed using this Liquid layout. By making the default.html layout inherit this compression formula, all pages will be automatically compressed.