Related: Read how I deploy my site.

tl;dr

npm run build

or

npm run build:js && npm run build:css && npm run build:site

build step by build step

The whole build consists of small individual builds of different types of assets.

Webpack - JavaScript build step

A webpack build parses and concatenas the JavaScript assets.

My assets/js folder has the following structure:

~/D/p/christian-fei.github.io (master ⚡) tree assets/js/
assets/js/
├── analytics.js
├── index.js
├── ui
│   ├── constants.js
│   ├── index.js
│   ├── interactions
│   │   ├── blog-search.js
│   │   ├── index.js
│   │   └── slash-to-search.js
│   └── typewriters
│       ├── index.js
│       ├── type-a-keyword-here.js
│       └── type-slash-to-search.js
└── workers
    ├── cache.start.js
    └── index.js

4 directories, 12 files

As you can see, this allows me to make use of node’s module system (require calls) and to have a sane project structure and separation of modules.

My webpack config minifies the assets and bundles them in a browser compatible packet called main.min.js.

During development I run the npm run build:js:watch command to make my workflow easier. A change to a JavaScript file triggers a new build, so i just have to switch to the browser and reload the page.

To build the production asset I run the command npm run build:js.

Note: I want to upgrade to Webpack 2 as soon as I find some time.

Gulp - CSS build step

gulp.js is used for the CSS files. I use the preprocessor stylus, so I can write less nasty CSS and more fancy Stylus.

Similarly, npm run build:css compiles the Stylus stylesheets and bundles them into main.min.css.

Gulp can also watch my files during development: npm run build:css:watch.

My assets/css folder has the following structure:

~/D/p/christian-fei.github.io (master ⚡) tree assets/css
assets/css
├── fancy.styl
├── layout.styl
├── main.styl
├── modifiers.styl
├── type-scale.styl
├── typography.styl
└── variables.styl

0 directories, 7 files

Jekyll - HTML build step

Jekyll is a static site generator, most often used for blogs.

I love it.

I use bundler to manage the Ruby gems.

My only dependency is the Jekyll gem.

Once i have them installed, I run bundle exec jekyll serve during development, and bundle exec jekyll build for production.

It’s not over yet. I still need to deploy my site.