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

Post a Comment

Popular posts from this blog

Nextcloud and PHP8

Image
  PHP8 broke my Nextcloud instance !!! I run a Nextcloud instance on a self hosted Arch  linux server. Arch linux because I like the challenge 😁. Nextcloud due to privacy reasons. Recently Arch upgraded all php packages to php8 . Nextcloud 20.x, the version I'm using currently can't work on php8 thus my instance went offline. In this article I'm gonna describe how I managed to fix this issue. I run timeshift in my server via the cli. So I could have downgraded the php version. That would mean I would have to refrain from updating php and risk zero day vulnerabilities. That would nullify the whole purpose of running a self hosted Nextcloud instance for my sensitive data. Instead I went with dual php versions. I run php-fpm with Apache in my server so now I have to figure out how to run Fast CGI process manager with 2 php versions in the same Apache server. If you are thinking "well you are a SDE and you should know it", let me start by saying I neither use PHP
Read more

Setting up KDiff3 to work with TortoiseGIT

Image
Setting up KDiff3 to work with TortoiseGIT When I work with git I do most of my work on the command line except for a few tasks. Resolving conflicts is one of them. So when it comes to resolving conflicts I prefer the KDiff3 instead of the TortoiseGIT diff. I was googling around to find the proper way and after grabbing things from difference places here is what I did. Obvious steps  :) Install git Install KDiff3 Install TortoiseGIT Then after that Open tortoise GIT settings Go to "Diff Viewer" Go to section "Configure the program used for comparing different revisio...." Choose "External" Enter the following "[ kdiff3 instalation path ]\kdiff3.exe %base %mine --L1 %bname --L2 %yname" Go to "Merge Tool" Choose "External" Enter the following "[ kdiff3 instalation path ]\kdiff3.exe %base %mine %theirs -o %merged" Click apply I will soon write something to show how to actually resolve
Read more

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

Image
 In this series of posts I'm going to outline the process I used to create my own Nextcloud server.  Network Setup First step is to prepare my network. I'm planning to host this at home. Due to obvious security concerns I don't want to host this on my home network. I used pfSense  to achieve what I want. The pfSense setup is outside the scope of this post. If you do need help or is curious about setting up pfSense let me know. Given below is an overview diagram of my network,  The basic firewall rules in this network are Server can't talk to the switch.  Server can't talk to the pfSense router interface Server interface has Suricata IDS/IPS running.  Drive Preparation and Encryption Secure erase the drive.  Note: The drive I used was an old HDD. What I didn't notice was that the partition table was of type DOS. Had to change that to GPT and repeat this process in order for it to work. I'm going to use a 250GB HDD for my instalation (not a SSD). First step
Read more