Related: Read how I deploy my site.
npm run build
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.
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.
During development I run the
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
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.
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.