Information about how this website is built.
Technology
Permalink to section 'Technology'- Built with the static site generator Eleventy v3.1.1.
- JavaScript runtime: Bun.
- Templating languages: Vento, Markdown and Nunjucks (only for the site's RSS feed).
- Tested browsers: Mozilla Firefox, Vivaldi and Lynx.
- Source code available on my Gitea instance and the repository's GitHub mirror.
Host and Domain
Permalink to section 'Host and Domain'- Hosted on a virtual private server (VPS) I rented from DeluxHost.
- Web server: Caddy.
- The domain name, leilukin.com, was registered on 30 May 2024, was purchased from, registered on, and is managed by Porkbun
Previously, this website was hosted on Neocities until 31 May 2024, Netlify until 25 July 2024, and Hostinger's premium shared hosting plan until 14 May 2025, and a VPS I rented from Chunkserve until 27 May 2025.
Plugins
Permalink to section 'Plugins'- Eleventy's official RSS plugin
- Eleventy's official Navigation plugin
- Eleventy's official Syntax Highlighting plugin
- @zachleat/details-utils
Eleventy Community Plugins
Permalink to section 'Eleventy Community Plugins'- eleventy-plugin-vento
- eleventy-plugin-wordcount-extended
- eleventy-plugin-embed-everything
- @uncenter/eleventy-plugin-toc
markdown-it plugins
Permalink to section 'markdown-it plugins'Eleventy has the Markdown parser markdown-it built in to render Markdown to HTML.
- markdown-it-anchor
- markdown-it-attribution
- markdown-it-attrs
- markdown-it-bracketed-spans
- markdown-it-deflist
- markdown-it-footnote
Self-hosted Resources
Permalink to section 'Self-hosted Resources'- Eric Bailey's a11y-syntax-highlighting CSS dark mode stylesheet for Prism.js
- Readex Pro font family — used as the default font of this site. CSS stylesheet and WOFF2 font format generated by google-webfonts-helper.
- Intel One Mono typeface — used as the monospaced font of this site.
Branding
Permalink to section 'Branding'I drew the Leilukin bee illustration and made my website's button in Adobe Photoshop CS5.
JavaScript
Permalink to section 'JavaScript'Due to this website being a static site, JavaScript is used to create dynamic and interactive components of this site. Here is a list of how JavaScript is used on this site:
- The header of every page uses JavaScript to detect the visitor's current date, so the header will display a top blurb and in some cases also changes the header background on certain dates, including:
- LGBTQ+ events, International Women's Day, Disability Pride Month, website anniversary and my birthday;
- Release anniversaries of media with dedicated shrines, including:
- Birthdays of characters from A Summer’s End — Hong Kong 1986 on its shrine.
- Add buttons to copy code snippets to pages with code blocks.
- Scott O'Hara's ARIA Tooltips script is used to implement accessible tooltips that meet Web Content Accessibility Guidelines (WCAG) 2.2 success criterion for 1.4.13: Content on Hover or Focus (Level AA), by allowing visitors to see tooltips on keyboard focus and dismiss tooltips by pressing the Escape key.
- Zach Leatherman's details-utils JavaScript package is used to automatically expand sidebar table of contents on wide screens.
- status.cafe widget, which is placed on the home page, uses JavaScript to fetch data of my latest status update.
- Website Carbon Badge, which is placed on the home page, uses JavaScript to calculate the carbon footprint of this website.
- Joined page includes webring widgets that use JavaScript.
- Guestbook uses JavaScript to render a form, send form data to my private Discord channel via Discord webhook, and fetch data from Google Sheets to display messages on the web page (guestbook code by Vera Konigin).
- The search form on the Search page is powered by Pagefind, a static search library in JavaScript.
You can still access most of the content of this site with JavaScript disabled, but the above components will not work as intended.
(This colophon page was last updated on )