- Notifications
You must be signed in to change notification settings - Fork0
My personal website and blog, built with 11ty and Workbox.
License
jackdbd/personal-website
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
My personal website and blog, built with11ty andWorkbox. Hosted onCloudflare Pages.
- PWA withweb application manifest
- RSS feed with@11ty/eleventy-plugin-rss
- webmentions sent toWebmention.io and collected byBridgy
- WebC component to send webmentions using a Progressive Enhancement friendly HTML form
sitemap.xmlandrobots.txtfor SEOsecurity.txtin.well-knowndirectory- just-in-time preloading withinstant.page
- Service worker generated withworkbox-core andesbuild
- Modular type scale and fluid space system thanks toUtopia
- Performance reports with multipleperformance budgets using theLighthouse CLI andwebhint
- HTML minified usinghtml-minifier-terser (only when building for production)
- CSS on the critical path minified withclean-css and inlined in the
<head>. All other CSS is managed byPostCSS. - Embeds for YouTube and Video thanks toeleventy-plugin-youtube-embed andeleventy-plugin-vimeo-embed
- Framework agnostic partial hydration with@11ty/is-land
- Custom HTTP headers for theReporting 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.git
This project should work on Node.js >=20.0.0.
ℹ️What's that
devenv.nix?This project usesdevenv to create and manage a developer environment that has all the necessary dependencies. Thanks todevenv's automatic shell activation, this environment is activated automatically when you enter the root directory of this repository (you will just have to wait a few seconds).
If you don't use Nix, you can safely ignore the
devenv.nixfile in the repository root.In alternative to the Nix dev shell provided by this repository, you could use a Node.js version manager likenvm,asdf, orvolta.
If you want to run scrips/tests that rely onPlaywright, you will also need to install/update the browsers it uses:
npx playwright install
Watch all templates, CSS, JS, and automatically refresh the browser:
npm run dev
Go tohttp://localhost:8080/ to visit the website.
In alternative, develop and preview the site withwrangler (this is useful when developing functions that will be deployed toCloudflare Pages Functions):
npm run wrangler
Go tohttp://localhost:8788/ to visit the website.
Build all templates, CSS, JS,_headers file and the service worker:
npm run build
Serve the production build:
npm run site:serve
Just 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 apreview deployment.
⚠️ Node.js version on Cloudflare PagesDon't forget to set the environment variables
NODE_ENVandNODE_VERSIONin theCloudflare Pages dashboard. In particular,NODE_VERSIONis used by theCloudflare Pages V2 build system.
Generate the_headers file which will be used by Cloudflare Pages:
node scripts/headers.mjs
Check theContent-Security-Policy and the other security headers with these online tools:
SeeSECURITY.md.
This project has53dependencies.
This project has19devDependencies:@hint/hint-performance-budget,@jackdbd/checks,@types/yargs,form-data,himalaya,hint,lighthouse,linkedin-api-client,openpgp,playwright-chromium,playwright-start,prettier-plugin-tailwindcss,pretty-error,serve,snoowrap,taze,typescript,uuid,yargs.
When developing, open Chrome DevTools, go toApplication > Service Workers and check that:
Update on reloadisenabled. This ensures that the latest service worker will beinstalled andactivated on the page.Bypass for networkisdisabled. This ensures that the route matchers, route handlers and runtime caches of the service worker will be used.
© 2020 - 2024Giacomo Debidda //MIT License