how i build my site

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.

From https://webpack.github.io

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.

stylus lang

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.

jekyll

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.