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/
│ ├── 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
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
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
gulp.js is used for the CSS files. I use the preprocessor stylus, so I can write less nasty CSS and more fancy Stylus.
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
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.