RE-ENTER SAS
Voyez le cloud autrement

Using HarpJS for a company website

by Vina Rakotondrainibe | Oracle Commerce Expert and Cloud Deployment Specialist
Paris area,

Even for a small company, you need a website to explain what you do and who you are. Though, you need a solution which fits the following requirements:

  • Easy to maintain and update
  • Manage beautiful templates for your pages
  • Fast response times
  • Multilingual

HarpJS is the answer for us. It can be run in two modes:

  • As a server by issuing the following command on a NodeJS installed server:harp server
  • As a static HTML website generator

I chose the later option as I want a fast website and with no personnalization whatsoever. HarpJS is flexible enough to put dynamic content in your pages such as meta, menus etc... and save you the hasle of updating hundreds of HTML pages when you have a new section or when you want to update your keywords for search engines.

This is not a complete HarpJS tutorial but rather an article to introduce you to the benefits of the tool.

Easy to maintain and update

HTML is great but when you write long formatted text it is unreadable. I chose Jade templating with HarpJS because the index page is just as long as this when you use Jade:

doctype html
  html(lang='fr')
    head
      != partial('_partials/_meta', {'title': title, 'keywords': keywords})
      != partial('_partials/_css')
    body
      !=partial('_partials/_menu')
      div(class='container-fluid col-sm-10')
        .row
          .slider
            a(href="/about/offre")
              img(src='/images/cloud.jpeg' alt='Entrez dans le cloud avec RE-ENTER')
        div(class='row bg-services')
          #servicelist
            each s, index in public.services._contents
              - var classes = ((index % 2) == 1) ? 'col-xs-12 col-md-3 services services-darker': 'col-xs-12       col-md-3 services';
              div(class=classes)
                != partial('services/' + s)
              div(class='clearfix visible-xs-block')
      div(class='container-fluid bg-default col-sm-10')
        .row
          div(class='section border-bottom bottom-triangle')
            h2.title Pourquoi nous choisir ?
      div(class='container-fluid bg-default col-sm-10')
        .row
          each sk in public.skills._contents
            div(class='col-xs-12 col-md-4')
              != partial('skills/' + sk)
            div(class='clearfix visible-xs-block')
      != partial('_partials/_footer')

and a text paragraph is like:

p I chose the later option as I want a fast website and with no personnalization whatsoever. HarpJS is flexible enough to put dynamic content in your pages such as meta, menus etc... and save you the hasle of updating hundreds of HTML pages anytime you have a new section of want to update your keywords for search engines.

You are not very far from markdown readability and simplicity and yet you benefit from HTML formatting power. Markdown is great but formatting it with a beautiful css is no part time job.

Your pages are organized in folders as a normal web site and HarpJS will recursively process these folders during the static website generation.

Manage beautiful templates for your pages

Jade is a simplified template syntax for HTML and HarpJS enables you to define default templates for your index and inner pages. These templates can be overriden either for an entire folder or for specific pages using the data.json file.

I have worked on numerous CMS projects and this template management feature has always been a tricky point to implement easily. Most of the time the system you come up with is too complicated for the content manager to understand it quickly when your look and feel requirements are complicated.

As you noticed Jade syntax is simple enough for a non programming content manager to understand it and build his own template if he or she is not satisfied with the existing ones.

Fast response times

What is faster than a static HTML page to serve for web servers such as Apache and Nginx (if you have high traffic ambitions)? I bet nothing when you have cache control and the proper settings for you web server in place. Page response time is important for search engine optimization as this metric influences your page rank. Generating the entire site takes 2 seconds and deivering it takes 30 seconds including the archive transfer to the web server. No parameter to change, just a TAR file to uncompress as a replacement to the old docroot.

Yes, I am thankful for the brilliant people behind these static website generation tools because for the firt time, I do not loose hours to deploy MySQL updates and configuration files to copy changes from a development/testing environment to my production environment. By the way, I discussed with @rob_ellis the other day and he told me they launched surge.sh, which is a hosting solution for your static website. So you could probably use that service if you don't want to host your own site.

Mutlilingual

Two days ago, I decided to write the English version of my site. I feared that would be a long and painful process. After two days of work it took me half a day to create partial files for footers and menus in English and the rest to write English text. Again, this is a surprise for me to be able to go so fast in building a new site branch. I took the option to use a /en subdirectory because RE-ENTER is based in France and I need to mainly increase the french domain weight in search engines.

The /en subdirectory contains translated pages and header, footer pages and that's all. The layout are the same as the main site so even though HarpJS and Jade are very simple tools, you can achieve so called complicated things in other technologies quickly with them.

Conclusion

If you are looking for a simple tool to build your company site or personal presentation site, you can use HarpJS and Jade templating. It is simple enough to use them for a non advanced programmer to understand the language concepts of both tools. No need of a complicated PHP module and a MySQL database, only flat files and nodeJS on your development environment. Mostly people starting their personal site want to write, maybe to build template but certainly not to cope with site update workflows, SQL files and PHP programming. If you are that kind of a person, go ahead and give it a try.

Top