mufidu.com

This is repository for my personal website.
Built with 11ty, based on this template, and deployed to Cloudflare Pages.

Another tech stack:

• Templating Engine: Nunjucks
• CSS Framework: Bahunya
• CSS Preprocesor: Sass

Guides

Running locally

npm start

It will serve the _site directory on port 8080.

Building for production

npm run build

It will build the site and copy all generated images before deploying. Please commit after running this command.

Deploying

Just set the build command to

npm run deploy

Features

This is a list of features that this site has. Mostly already come from the template. I added and deleted some features based on my needs. Will grow as I add new features.

Blog

• Multilingual, all pages have Indonesian and English version.
• Post navigation with next and previous post.
• Optimized YouTube Embed (low effect on performance and with privacy in mind) using this plugin.
• Responsive by design.
• Hamburger menu for mobile.

Performance outcomes

• Perfect score in applicable lighthouse audits (including accessibility).
• Single HTTP request to First Contentful Paint.
• Very optimized Largest Contentful Paint (score depends on image usage, but images are optimized).
• ~0 Cumulative Layout Shift.
• ~0 First Input Delay.

Performance optimizations

Images

• Generates multiple sizes of each image and uses them in srcset.
• Generates a blurry placeholder for each image (without adding an HTML element or using JS).
• Transcodes images to AVIF and webp and generates picture element.
• Transcodes GIFs to muted looping autoplaying MP4 videos for greatly reduced file size.
• Lazy loads images (using native loading=lazy).
• Async decodes images (using decoding=async).
• Lazy layout of images and placeholders using content-visibility: auto.
• Avoids CLS impact of images by inferring and providing width and height (Supported in Chrome, Firefox and Safari 14+).
• Downloads remote images and stores/serves them locally.
• Immutable URLs.

CSS

• Defaults to the compact "classless" Bahunya CSS framework.
  • Converted back to SCSS and divided per components (so to speak).
• Inlines CSS.
• Dead-code-eliminates / tree-shakes / purges (pick your favorite word) unused CSS on a per-page basis with PurgeCSS.
• Minified CSS with csso.

Miscellaneous

• Immutable URLs for JS.
• Sets immutable caching headers for images, fonts, and JS (CSS is inlined). Currently implements for Netlify and Cloudflare _headers file.
• Minifies HTML and optimizes it for compression. Uses html-minifier with aggressive options.
• Uses rollup to bundle JS and minifies it with terser.
• Prefetches same-origin navigations when a navigation is likely (when hovered).
• If an AMP files is present, optimizes it.

Fonts

• Serves fonts from same origin.
• Makes fonts display:swap and use a custom font fallback.

Analytics

• Supports locally serving Google Analytics's JS and proxying it's hit requests to a Netlify proxy (other proxies could be easily added).
• Supports sending Core Web Vitals metrics to Google Analytics as events.
• Support for noscript hit requests.
• Avoids blocking onload on analytics requests.
• Support Beampipe, Umami, GoatCounter, and serve it locally to avoid block by adblockers.

DX features

• Supports a range of default tests.
• Runs build and tests on git push.
• Sourcemap generated for JS.

SEO & Social

• Share button preferring navigator.share() and falling back to Twitter. Using OS-like share-icon.
• Support for OGP metadata.
• Support for Twitter metadata.
• Support for schema.org JSON-LD.
• Sitemap.xml generation.

Security

Generates a strong Content-Security-Policy (CSP) for the base template.

• Default-src is self.
• Disallows plugins.
• Generates hash based CSP for the JS used on the site.
• Extended CSP for Twitter, YouTube, and Instagram embedding. Also for Beampipe and Cloudflare analytics.

Build performance

• Downloaded remote images, and generated sizes are cached in the local filesystem…
• Build script automatically copy the generated images to the img folder
  • ...so the images are not processed again during deployment (and thus the build time is reduced).

License

CC BY-NC-SA 4.0