Miayam is a brutalist blog starter project built with Eleventy, Pug, SCSS, and Webpack by Muhamad D. R., designed to produce a fast, minimal static site.
What is Miayam?
Miayam is a starter project that rebuilds the personal blog at miayam.io from scratch, switching from Jekyll to Eleventy. It takes Pug templates, SCSS styles, and Vanilla JavaScript as source files, lets Webpack bundle per-template assets, and outputs static HTML ready for hosting on GitHub Pages or Netlify. The author, Muhamad D. R., built it to have a component-based, performant, and SEO-friendly foundation for his blog.
Key Features
- Atomic design structure — Components are organized into atoms, molecules, organisms, and templates using a combination of Atomic Design and a modified BEM naming convention (ABEM), making the design modular and easy to update.
- Boring technology stack — Uses Pug for presentational components, SCSS for styling, and Vanilla JS for DOM manipulation, deliberately avoiding JavaScript frameworks like React, Angular, Vue, or Svelte.
- Per-template asset bundling — Webpack entry points are defined per template (home and 404), and HtmlWebpackPlugin injects only the minified CSS and JS required by that template into the base Pug layout, so unused assets aren't loaded.
- Eleventy static site generation — Eleventy handles layout lookup from the components directory and generates the final HTML pages; it is described as a simple SSG that does one thing well.
- 100% Lighthouse performance target — The project explicitly aims for a perfect Lighthouse score and a "super fast jellyfish" site by keeping assets as few as possible.
- Built-in templates — The starter ships with a base template, a 404 page, and a home page, each with its own SCSS and JS files, providing a minimal starting point for a blog.
- Bundled development tooling — Webpack watches component template SCSS and JS files, rebuilds them on change, and integrates with Eleventy via the documented webpack.common.js configuration.
Who is it for?
- Web developers who prefer boring technology — Developers who want a static blog without adopting React or other modern frameworks can use this starter to build a site with Pug, SCSS, and vanilla JS.
- Bloggers wanting a brutalist aesthetic — The project is intentionally "ugly, brutal, a dead simple site" and a "sore to the eyes," appealing to anyone who wants a no-frills, raw design for their personal blog.
- Developers migrating from Jekyll — Since the README explains the migration from Jekyll to Eleventy, this starter is a practical example for those switching from Ruby-based Jekyll to a JavaScript SSG.
What can you do with Miayam?
- Start a new personal blog — Use the included home and 404 templates to set up a blog structure, then host the generated static site on Netlify or GitHub Pages.
- Learn component-based static site architecture — Study how Atomic Design, BEM naming, and Webpack multi-entry points are combined in an Eleventy project, as documented in the file structure and webpack.common.js snippet.
- Rebuild an existing blog from Jekyll — Follow the migration rationale and project structure to move a Jekyll blog to Eleventy, using the starter as the foundation.
How does Miayam work?
Install Volta and ensure Node.js 12.18.4 is available, then run npm install and npm run start for development, which opens the site at localhost:1992. For production, run npm run build to generate a minified bundle that can be deployed to GitHub Pages, Netlify, or other static hosts. Webpack handles asset bundling, while Eleventy generates the pages from Pug templates.
Why migrate from Jekyll to Eleventy?
The author migrated from Jekyll because Ruby felt foreign after two years, and he wanted a JavaScript-based alternative. He tried Gatsby but found it full of shiny new technologies, and Hexo had a similar ambiance to Jekyll but didn't spark joy. Eleventy was chosen because it is a simple SSG that fits his brain and does one thing well without bundling unnecessary batteries.
Alternatives
- Jekyll — The original Ruby-based SSG used for miayam.github.io, which the author left due to its Ruby tooling.
- Gatsby — A React-based static site generator that the author tried but found too complex for his needs.
- Hexo — Another Node.js SSG that felt similar to Jekyll but didn't inspire the author.
FAQ
Is Miayam free?
Yes, the project is a public GitHub repository and serves as the foundation for miayam.io. There is no mention of licensing, but the source code is openly available for anyone to use or adapt.
What technologies does Miayam use?
Miayam uses Eleventy as the static site generator, Pug for HTML templating, SCSS for styling, and Vanilla JavaScript for scripting. Webpack is used as the bundle manager, and the component structure follows Atomic Design principles with a modified BEM naming convention.
Does Miayam require a specific Node.js version?
Yes, the project specifies Node.js version 12.18.4 via Volta, a tool for managing Node.js versions. The README instructs users to install Volta and source their bashrc so Volta can detect the package.json.
What pages are included in the starter?
The starter includes a base template, a 404 page, and a home page. Each page has its own SCSS and JS files, and Webpack defines separate entry points for the home and 404 templates.
Can I host Miayam on Netlify?
Yes, the README explicitly states that after running npm run build, you can host the site on GitHub Pages, Netlify, or another hosting service.
