The goal of this project is to represent a highly optimized static website build using Assemble for page generation, Bootstrap as a front-end framework, grunt-webfont for custom webfont generation, and grunt-real-favicon for favicon generation.
This project relies on Node and NVM to ensure the correct version of Node is used.
Install NVM, and follow the instructions for adding to your shell. (Skip this step if you already have NVM installed).
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash
Install a default LTS version of Node and avn for automatic node version switching.
$ nvm install 12
$ npm install -g avn avn-nvm
$ avn setup
Grunt is a Node module used to run JavaScript tasks relating to the build. Note that installing grunt-cli does not install the Grunt task runner! The job of the Grunt CLI is simple: run the version of Grunt which has been installed next to a Gruntfile. This allows multiple versions of Grunt to be installed on the same machine simultaneously.
$ npm install -g grunt-cli
ttfautohint 1.2 is required by grunt-webfont to auto-hint the custom icon fonts used in this project. Packages can be downloaded here.
Before installing ttfautohint on a Mac, you will need to download and install XQuartz.
On a Mac with Brew installed, ttfautohint can be installed via the following command:
$ brew install ttfautohint
To perform a deployment to S3 and Cloudfront invalidation, you'll need to have the correct credentials in your ~/.aws/credentials file. aws-mfa can automate this process for you.
$ brew install python3
$ pip3 install aws-mfa
$ aws-mfa
Once everything is installed you can check out the source and install required local node modules and bower components.
$ mkdir assemble-website-boilerplate && cd $_
$ git clone https://github.com/loganbussey/assemble-website-boilerplate.git --origin upstream .
$ npm ci
Start the local development server
$ grunt serve
Build the site into the dist directory
$ grunt build
Build and view the site in your browser
$ grunt serve:dist
Favicons are generated from the file assets/icon.svg and because this process takes quit a while, it is only initiated if assets/icon.svg is edited, or can be manually run with the following command:
$ grunt realFavicon
If you receive the following error:
Running "postcss:dist" (postcss) task
[BS] File changed: .tmp/styles/main.css
Fatal error: Bad argument
The PhantomJS module needs fixing, you can fix this by running
$ npm run fix