Hey πŸ‘‹πŸ»

My name is Christian, an Agile Developer, living in Trento (IT)

I write good code at Wonderflow

You can follow me on and Github


More about me πŸ€–




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.