My personal website and blog, built with 11ty and Workbox. Hosted on Cloudflare Pages.
- PWA with web application manifest
- RSS feed with @11ty/eleventy-plugin-rss
- webmentions sent to Webmention.io and collected by Bridgy
- WebC component to send webmentions using a Progressive Enhancement friendly HTML form
sitemap.xmlandrobots.txtfor SEOsecurity.txtin.well-knowndirectory- just-in-time preloading with instant.page
- Service worker generated with workbox-core and esbuild
- Modular type scale and fluid space system thanks to Utopia
- Performance reports with multiple performance budgets using the Lighthouse CLI and webhint
- HTML minified using html-minifier-terser (only when building for production)
- CSS on the critical path minified with clean-css and inlined in the
<head>. All other CSS is managed by PostCSS. - Embeds for YouTube and Video thanks to eleventy-plugin-youtube-embed and eleventy-plugin-vimeo-embed
- Framework agnostic partial hydration with @11ty/is-land
- Custom HTTP headers for the Reporting API:
- Configurable text to speech synthesis, thanks to @jackdbd/eleventy-plugin-text-to-speech
- Scripts I use for various administrative tasks
Clone the repo:
git clone git@github.com:jackdbd/personal-website.gitThis project should work on Node.js >=22.0.0.
ℹ️ What's that
flake.nix?This project uses a nix dev shell to define a virtual environment with all the necessary dependencies. Thanks to Nix and this
.envrcfile, you can activate this environment simply by entering the root directory of this repository (and waiting a few seconds).If you don't use Nix, you can safely ignore the
flake.nixfile in the repository root.In alternative to the Nix dev shell provided by this repository, you could use a Node.js version manager like nvm, asdf, or volta.
If you want to run scrips/tests that rely on Playwright, you will also need to install/update the browsers it uses:
npx playwright installWatch all templates, CSS, JS, and automatically refresh the browser:
npm run devGo to http://localhost:8080/ to visit the website.
In alternative, develop and preview the site with wrangler (this is useful when developing functions that will be deployed to Cloudflare Pages Functions):
npm run wranglerGo to http://localhost:8788/ to visit the website.
Build all templates, CSS, JS, _headers file and the service worker:
npm run buildServe the production build:
npm run site:serveJust push to the remote repository. This GitHub workflow will automatically deploy the website to Cloudflare Pages.
- Each push on the
mainbranch will trigger a production deployment. - Each push on any other branch will trigger a preview deployment.
⚠️ Node.js version on Cloudflare PagesDon't forget to set the environment variables
NODE_ENVandNODE_VERSIONin the Cloudflare Pages dashboard. In particular,NODE_VERSIONis used by the Cloudflare Pages V2 build system.
Generate the _headers file which will be used by Cloudflare Pages:
node scripts/headers.mjsCheck the Content-Security-Policy and the other security headers with these online tools:
See SECURITY.md.
This project has 51 dependencies.
This project has 22 devDependencies: @hint/hint-performance-budget, @jackdbd/checks, @thi.ng/transclude, @types/yargs, form-data, himalaya, hint, lighthouse, openpgp, playwright, playwright-start, prettier, prettier-plugin-tailwindcss, pretty-error, serve, snoowrap, taze, tsm, typescript, uuid, wrangler, yargs.
When developing, open Chrome DevTools, go to Application > Service Workers and check that:
Update on reloadis enabled. This ensures that the latest service worker will be installed and activated on the page.Bypass for networkis disabled. This ensures that the route matchers, route handlers and runtime caches of the service worker will be used.
© 2020 - 2024 Giacomo Debidda // MIT License