Heyyy πŸ‘‹πŸ» ! My name is Christian, an Agile Software Developer, living in Trento (IT).
I am currently working at Wonderflow.
You can read more about me.

how i build my site

,
by

Share on Twitter

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.