This repository builds a small static website with Eleventy (11ty) and compiles Sass into CSS which is then inlined into the generated HTML.
Short summary
- Eleventy reads files from
src/and writes HTML intodist/. - Sass source is at
sass/main.scssand is compiled todist/styles.cssbefore Eleventy runs. - A custom Eleventy transform reads
dist/styles.css, injects it into the<head>as a<style>block, then usesjuiceto inline styles into the HTML elements.
Quick commands (macOS / zsh)
Install dependencies:
cd /Users/preslav/Projects/webpage
npm installBuild (produce dist/):
npm run buildServe and develop:
npm run devWhat the scripts do
build:sass— compilessass/main.scss→dist/styles.cssusingsass.watch:sass— watchessass/main.scssand recompiles CSS on changes.clean:css— removes old CSS files, maps, and.scssfromdist/.build:eleventy— runs Eleventy to produce HTML indist/.build— runs the Sass build, then Eleventy, then removes the generated CSS files (the CSS is inlined into HTML).serve— runs Eleventy in serve/watch mode on port 8081.watch— watchessrc/andsass/and triggers a fullnpm run buildon changes.dev— cleans old CSS, compiles Sass once, then runswatch:sassandservein parallel. This ensures CSS is always available and automatically recompiled during development.update-venues— queries DBLP API for bibliography venue information. Uses file change detection (MD5 hash) to skip expensive queries if bibliography.bib hasn't changed since last run.
Where to edit styles
- Edit
sass/main.scss. During development (npm run dev), changes are automatically compiled and the page reloads. For production builds, runnpm run build.
CV Generation
- The CV page is automatically generated from
src/assets/cv.texusingscripts/build-cv.js. - Run
npm run build:cvto regenerate both HTML and PDF versions of the CV. - The script creates a precompiled PDF (
src/assets/cv-precompiled.pdf) that's used for CI/CD deployments. - In local development with LaTeX installed, the PDF is compiled fresh. In CI environments (Cloudflare Pages), the precompiled PDF is used.
Cloudflare Pages Deployment
- The site is configured for Cloudflare Pages deployment.
- Build command:
npm run build - Publish directory:
dist - The precompiled PDF ensures the download feature works even without LaTeX in the CI environment.
- Environment variables: Set
NODE_VERSION=18in Cloudflare Pages settings.
How CSS inlining works (implementation notes)
.eleventy.jsregisters an Eleventy transform calledinline-css.- That transform looks for
dist/styles.cssand, if present, removes the<link href="/styles.css">tag from the generated HTML, inserts a<style>block with the compiled CSS into<head>, then callsjuiceto inline CSS into the markup. This produces standalone HTML files that don't rely on an external stylesheet.
Bibliography / collections
- The project uses
bibtex-parse-jsto parsesrc/assets/bibliography.biband registers Eleventy collections (papers,books,articles). See.eleventy.jsfor the parsing and collection rules. scripts/update-venues-from-dblp.jsqueries DBLP for standardized venue names. It only runs if the bibliography file has changed (checked via MD5 hash stored in.bib-hash), avoiding unnecessary API calls on every build.
Developer contract (short)
- Inputs:
src/content andsass/main.scss. - Output: static HTML files in
dist/with styles inlined (no externalstyles.cssrequired). - Errors: if
dist/styles.cssis not present when Eleventy runs, the transform logs a warning and the HTML is produced without inlined stylesheet.
Edge cases and notes
- The
devscript now cleans old CSS, compiles Sass, then runs Sass watch and Eleventy serve in parallel. This ensures CSS is always available and avoids "CSS file not found" warnings. - The inline transform uses a robust regex to remove the
<link ... href="/styles.css">tag; if you add multiple CSS link tags or change file names, update the transform accordingly. - The
rm -fcleanup is POSIX and works on macOS. On Windows, you would need to adapt the cleanup (e.g., userimraf). - DBLP venue lookups are cached based on file hash. Delete
.bib-hashto force a full update.
If you'd like
- I can add a small test that validates the built HTML contains
styletags and nolink rel="stylesheet" href="/styles.css"occurrences, or add cross-platform cleanup withrimraf.
Contact / further changes
If you want the CSS preserved in dist/ (e.g., to serve externally), we can remove the cleanup step from build and/or add a flag --preserve-css to the build pipeline.
Generated and updated documentation to explain the build and where to edit styles and bibliography.