Static website generator with Grunt.js

img

In order to implement static websites, a commonly used tool are content management systems (CMS); they provide the separation of design, structure and content; enable multiple users to contribute to the content of the site and allow the scheduling of content publication, among other features. However, the use of CMS limits the customization of the website and also restricts the developer to use a certain structure, not to mention the costs, not all content management systems are open sourced.

The current status of open source web development tools provides a feasible alternative to CMS. A different approach for making static websites will be discussed.

Node.js

It is a server-side JavaScript environment that uses an asynchronous event-driven model.
One of the heavy features of Node.js is that it has thousands of modules available for common purposes, all developed by a strong and growing community.
For the website generator, we will rely on three main node based tools: npm, bower and grunt.

The idea

The goal behind the generation of the website is to take all the files stored in the source folder (e.g., src) and convert them into HTML, CSS and JS files in the folder to be deployed in the server (e.g., build). The proposed structure looks like this:

src_build

Before starting to look at the code, first NodeJS, npm, bower and grunt have to be installed in the local machine.

NodeJS based tools are used on the source folder files to achieve the result website. In this proposal Jade, LESS and automation with GruntJS, among the most relevant ones, are going to be used.

Jade

It is a server side template engine, which makes easier to write markup.
Two of its features are that an editor to find unmatched closing tags is not needed, because writing closing tags is not required; the second one it that the indentation in each line of the template reflect the level of nesting of the tag. More on Jade.

LESS

It is a CSS pre-processor; it adds features to the CSS language, such as variables, mixins and functions.
It runs on the server side as well as in the browser. More on LESS.

Grunt

It is a task-based command line build tool for JavaScript; it automates tasks that are regularly done. There are a lot of plugins for commonly used tasks, they are all open source and documented. More on GruntJS.

The Code

First, fork or download the GitHub repository in your local machine. Then, using the command line interface, type

npm install

this will install all node modules specified in package.json; next, type

bower install

with this, all packages and dependencies contained in bower.json.

Now that the project is set in the local file system, it is time to see it in action. The grunt tasks are used for this purpose. In the CLI, type

grunt dev

this will trigger the dev task, which contains the watchtask, responsible for looking out for changes in the code; and the connect andopen task, which make it possible to see our changes in the browser with a live reload.

A production task, prod, is also specified. This task does not do live reload, but optimizes the files, so they do not take much space and, therefore, it will make the page load faster.

After the desired website is achieved, the files can be deployed to the server; this can be done manually using a FTP client or this can be also done integrating a GruntJS task that makes this automatically and, in this way, we would have a complete automated workflow from writing the code to deploying the files.

Leave a Reply

Your email address will not be published. Required fields are marked *