This is an extremely lightweight and simplistic setup for a personal wiki a.k.a. "Digital Garden", using barebones HTML, htmx, and Tailwind/CSS. GitHub Pages serves the site as static content only, and automatically deploys on pushes to master.
Most source files are just HTML. The most interesting part is the index.html file in this root directory, in which the menu as well as some custom JavaScript for URL routing is defined. Content pages live in src/pages/<route>/index.html, with static/curriculum-vitae-pontus-eriksson.html as the intentional standalone exception.
npm installnpm run server
Tailwind CSS is a utility-first CSS framework that allows for highly customizable designs with low-level utility classes. The input file for Tailwind CSS can be found at src/styles/styles.css.
You can build the Tailwind CSS using this npm script:
npm run tailwind:buildTo automatically rebuild the CSS file during development, use:
npm run tailwindNew to Tailwind? You're going to love it! Start reading here: Tailwind CSS - Utility-First Fundamentals
Never heard of it? Don't worry, it's super easy and in my opinion intuitive. htmx allows you to access AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, without having to write any JavaScript. To get started, familiarize yourself with the htmx syntax and attributes through htmx documentation:
Routing is hash-based in index.html: each #route maps to src/pages/<route>/index.html. If anything is unclear feel free to ask me and I'll happily try to explain.