Building a website with gulp.js
October 25, 2016Last week I decided that my blog should be generated by gulp.js. It seemed like the best possible choice for me, so I started to look how I should use gulp.js to implement the features that I had been thinking. First of all, I listed the functionalities.
Features of the build tool
- Copies assets to the build
- Generates the blog with normal template and AMP template
- Builds SASS to CSS and includes the CSS in the HTML files
- Parses metadata from Markdown files
- Converts Markdown to HTML and includes it in the HTML files
- Generates the navigation to the main page
- Automatically watches changes and updates the build accordingly
Next step was to think how to implement those. I haven't had much time to work on this project lately, so I was hoping that I could get it done in few hours. The goal was to have first working version of the build tool this week. While googling some solutions I bumped to the fact that gulp.js 4 was available as a development version. I checked it out and decided to still use 3.x. I'll later update to version 4 when it is released.
Creating the build tool was fairly easy as my requirements were simple. In the end I think gulp.js was painless choice. I didn't need to write much code because there were so many plugins available. I'm happy about the outcome and will be updating the script when I need more functionality or I want to change to gulp.js 4.
The implementation is only 200 lines of code and I think it is really simple. If you don't know gulp.js then I suggest you check the plugins that I've used to create the functionalities. My own functions merely assign some variables that I can use in the templates. The code can be found from github.com/mellowi/mellowi.github.io. There is some guidance in the README.md of the repository if you want to know how to install and use the build tool.
Read more!