Minimalist Static Website

 I wanted to build a minimalistic static website as the root of my domain. I have designed and built countless web applications using modern frameworks but nothing this simple. I wanted to use the least amount of tooling and keep things as simple as they can be. What I wanted to achieve was,

  • A simple website as the root of my domain. 
  • Needs to be mobile first and fully responsive.
  • Modern design.
  • Should work reasonably well with at least 80% of current web browser versions (caniuse)
  • This needs to load as fast as it can without any bloat.
  • The purpose of this root website is to direct the users into my various projects and articles.
  • This will be hosted on my home server. So every byte, every style, every transformation counts.

My first approach was to find a boilerplate. I was not able to find anything to my liking so I decided to start from scratch. What I used,

The code I'm discussing is available in github.com/kumudug/static_web. (non production quick and dirty poc)

Live demo at : coding-mayhem.com/projects/staticweb

Since this is mostly a static website I'm not going to use any JS frameworks for functionality. When needed latest ES will be used with Babel. Different webpack entry points are used for modularization. The modules are combined into required pages by using HtmlWebpackPlugin. Each module would then compile their own styles, images, scripts into a single html file. Let me make the complex simple.

The common styles are contained in the sass files in the "src" root directory. These contain

            1. Common colors

            2. Material theme and styles with customizations

            3. Material component style imports (buttons, cards etc.)

            4. Common application styles

These were all combined in "app.scss" and imported into a common module using the "app.js" file.

Each page is organized into a folder inside the root "src" folder. These folders contains,

            1. Sass file containing the page styles

            2. JavaScript file containing the page code

            3. Html file containing the page template

These are then combined using the HtmlWebpackPlugin.

Apart from the above main concepts,

HtmlWebpackInlineSvg plugin was used to inline the SVG images. With SVGs inline it's possible to use sass to control svg properties. 

EslintWebpackPlugin is used for linting JavaScript. 

MiniCssExtractPlugin is used to extract the styles out into separate files. 

TerserWebpackPlugin to minify JavaScript. 

Something to note, The import and extension of Material is generally heavily dependent on the version used. Material tend to introduce breaking changes with every major release. 

The project contains several scripts 

1. `npm start` - Would run the project inside a dev server
2. `npm run build:dev` - Would build a development release package
3. `npm run build:prod` - Would build a prod release package

That's a wrap.











Comments

Popular posts from this blog

Arch Install Desktop vs Server Differences

Nextcloud and PHP8

Nextcloud on Arch Linux (Encrypted System) [Part 01 - Preparation]