Static HTML Boilerplate

The boilerplate is an opinionated folder structure to help you kick-start your html project. It includes the necessary build tools and configurations and is easily extendable.

Requirements

• Node.js: for all the magic

What's included

• Bootstrap 5: Bootstrap's normalize, grid system, and utility classes are imported by default.
• Webpack: With babel, allows you to use ES6 code and modules.
• Handlebars: Build your html with partials.
• SVG sprites: Add your icons in assets/icons and use them.
• Server: Node.js code for easy, gzipped, and secure static website hosting.

How to proceed

1. Prepare a coffee
2. Run: npm i to install the dependencies
3. Update the deploy script inside package.json file and replace [S3-BUCKET-ID] and [CF-DISTRIBUTION-ID] with corresponding values
4. Run: npm run dev to build and watch
5. Start coding!
6. Run: npm run build to build the project
7. Run: npm run deploy to deploy changes to the S3 bucket and optionally invalidate AWS CloudFront cache

Notes:

• To add a new page to the site, you must add the mapping in webpack.config.js for the sitemap. Add the corresponding file path to the paths array.

The following is an example to adding a contact-us page:

const paths = [
    'index.html',
    'about-us/index.html',
    'support/terms/index.html'
];

• Use realfavicongenerator.net to generate the favicon and metadata

Code quality

The boilerplate includes a built in linter configuration:

npm run lint

Changelog