To enable non-technical users to make changes to the site quickly, our front-end build files are committed to version history. Before pushing changes to GitHub, be sure to run either:
npm install
or
npm run build
This lets users who only want to update site content get to work without downloading node and npm.
Otherwise, deployment is achieved via Wercker. The build steps in wercker.yml dictate how this is done.
A custom Docker image was created for this purpose and includes the needed versions of Go and Nodejs.
Wercker is engaged immediately after a new commit (or a set of commits) is pushed to the Github repository. Wercker, via it's configured build steps, compiles and minifies the javascript and scss code, builds the Hugo site, then deploys the resulting static files to the master branch
The latest build is automatically rerun every morning at 7am so that date-based logic can be somewhat dynamic. This is scheduled via @marcguyer's Zapier account.
- Install Node
Go to nodejs.org and install the latest stable version of node recommended for you. There should be a big green button on the home page.
- Install Dependencies with npm
If you completed step one and installed Node, npm was automatically installed on your computer. Now, you need to use npm to install our the packages our site depends on (these are listed in the package.json file for this project).
First, navigate to the root directory for this project (ie. "wherever-you-cloned-it").
Second, run npm install.
cd ~/wherever-you-cloned-it
npm installWe use webpack to take our Sass and JavaScript files and prepare them for our website. webpack was installed for this project when you ran npm install.
npm run buildnpm run build will rerun the process of taking our Sass and JavaScript files, and preparing them for the site. Whenever you run npm install, a postinstall script will run npm run build.
Changes to the stylesheets should be made in the sub-directories within static/scss/.
static/scss/main.scss imports the _index.scss file found in each of the sub-directories, which in turn import each Sass partial in the same directory.
Use webpack.
app.js in the static/js/ directory is the entry point for all of our JavaScript code.
Use webpack.