Wilson Mar bio photo

Wilson Mar


Email me Calendar Skype call

LinkedIn Twitter Gitter Instagram Youtube

Github Stackoverflow Pinterest

Version controlled simplicity

US (English)   Español (Spanish)   Français (French)   Deutsch (German)   Italiano   Português   Estonian   اَلْعَرَبِيَّةُ (Egypt Arabic)   中文 (简体) Chinese (Simplified)   日本語 Japanese   한국어 Korean


Static is Cool Now

Here is why building a static site is now “cool” (popular, interesting, etc.).

When someone types in a URL on a web browser and lands on a website built using WordPress, Drupal, or other CMS (Content Management System), that user waits while the web server make calls to a database and builds the HTML to send back.

Static sites are faster for several reasons.

  1. There is no time lost generating HTML dynamically. There is no time lost calling a database. The web page sent to a visitor is direct response to the URL requested.

    Personalization is done by JavaScript running on the user’s machine, calling web services APIs (Application Programming Interfaces).

  2. The HTML file can be spread out around the world in a CDN (Content Distribution Network) such as Amazon S3. This reduces network latency.

    Reduction in cost of CDNs via Amazon S3, CloudFlair, Fastly, etc. vs. the enterprise Akamai makes this possible.

    Due to less processing, the website is also more scalable, able to handle a much larger number of visitors.

Having static files in an environment which serves many other sites provides the site resilience to DoS (Denial of Service) attacks which aim to overwhelm a service.

Fraction of a Second to First Byte

Techniques described on this website achieve the fastest possible loading speed, world-wide:

(Click here for new window containing higher resolution image)

“JAM” Stack

Static sites are called “JAM stack” for

  • JavaScript,
  • API calls (to various 3rd party sites rather than local databases), and
  • Markup text stored in GitHub then built into HTML and stored in CDN.

Video: The JAM Stack 16 April 2016 by Mathias Billmann (@Billmann at Netlify.com)

  • https://www.smashingmagazine.com/2015/11/modern-static-website-generators-next-big-thing/

jamstack.org comments on the drivers for the JAM stack:

“Today browsers are the operating system of the web, and are able to run complex applications completely client side. They are capable of consuming and interacting with an ever growing amount of APIs and services across domains and infrastructures. CDNs (Content Delivery Networks) have gone from being a luxury only large corporations could afford, to being the natural way to cut down the time to first byte for sites and apps of all sizes. Deployment models have shifted from cumbersome manual uploads to automated processes triggered by ever-present version control systems.”

API Calls

The rise of APIs has removed many of the limitations of static HTML:

  • Discourse for visitor comments
  • Lunr.js for search
  • Stripe for e-commerce

The downside

  1. Some feel git version control is a hassle to use.

  2. Some prefer the WSIWYG editors like Microsoft Word over text editors and writing markdown code.

    However, CloudCannon.com enables users to create a Jekyll site that presents Visual Editor forms for editing text in context of background graphics.

  3. Since Jekyll and other static platforms are newer than WordPress, Drupal, etc. there are not as much of a diversity in themes and plug-ins available.

Tools to generate static websites

I’ve configured a few, but most recently:

  • Jekyll is the most popular among static website generation tools largely because GitHub.io websites are hosted automatically, and free, from repositories in GitHub.com.

Much like what wordpress.org provides, but with the git version control added – a crucial feature.

Surveys are:

Sites using this approach

React-driven generation of SPA pages

https://phenomic.io, generates html from .md files containing yaml like Jekyll, but instead of template code, it processes standard templating in React.js with Webpack does the generation.

Coding JavaScript in ES6 is possible because Babel or PostCSS or CSSNext enables can translate the ES6 code back to ES5 so that current websites work.

  • ESLint for JavaScript and
  • Stylelint for CSS

Phenomic_app is rather young. Its @Phenomic_app on Twitter had 130 followers as of July 6, 2016.

Its advantage is that it generates SPA (Singe Page App) JavaScript which initially loads just enough to display on the page (so it’s faster than loading the whole HTML file). More importantly, additional pages are downloaded as needed in response to user action such as scrolling.

When a link or a button is clicked by a visitor, JavaScript running on the page updates the address bar, but the whole web page is not refreshed. Management of the address bar is done by the router JavaScript library.

Use of React means changes to markup is instantly reflected on the web page display.

See video: “A static website with React? Really?” on 25 May 2016 by Maxime Thirouin

There are several router libraries in the React ecosystem. The most popular router is react-router.


  • @MoOx (from France) is its creator.


  • https://github.com/petehunt/react-webpack-template
  • https://github.com/petehunt/webpack-howto

  • https://webpack.github.io/docs/list-of-plugins.html#dllplugin
  • https://gist.github.com/robertknight/058a194f45e77ff95fcd
  • https://github.com/mxstbr/react-boilerplate/pull/495/files
  • https://github.com/FrendEr/webpack-optimize-example/tree/master/dll-bundles

Most people (including Facebook) are using React.createClass() rather than JSX.

  1. Use npm to download phenomic into present working directory:

    npm i phenomic

    This takes several minutes to download from

  2. Install phenomic using npm:

    ./node_modules/.bin/phenomic setup

    Note: All values can be adjusted later.
    ? Dashed name of your project (eg: my-project) 
  3. Type “phenomic” and press Enter for:

    ? Website url (eg: http://abc.xyz/) 
  4. Type URL for:

    ? Repository url (eg: https://github.com/MoOx/phenomic.git, optional) 
    ? Twitter nickname (eg: MoOx, optional) 
    ? Do you want a CNAME file (eg: for GitHub Pages)? No
    Generated package.json file
    Copied boilerplate
    Setup done. Now run "npm install" to get started

    These can be changed later by editing the package.json file.

  5. Install npm

    npm i && npm start

  6. Start npm:

    npm start –devPort=3001

    Without the extra parameter, this starts a web page on port 3000 by default. The response:

  7. Edit the configuration file (subsituting vim with atom, subl, or other text editor):

    vim package.json

    “stage-1” refers to ES7.

    See https://phenomic.io/docs/usage/configuration/

  8. Run tests:

    npm test

Edit this site

The built site has a Edit this link to the GitHub repo file.

  • https://github.com/MoOx/phenomic/edit/master/docs/content/showcase.md

  • https://github.com/petehunt/react-howto


People who have commented on this include:


Static Site Generator Build Better Blog Pluralsight video course.

Automate static website deployment from Github to S3 using AWS CodePipeline

More on front-end styling

This is one of several topics:

  1. UI Design Systems
  2. Text Editors
  3. Markdown text for GitHub from HTML
  4. 508 Accessibility

  5. gRPC (g___ Remote Procedure Call)
  6. HTTP/2 Transition Project Plan

  7. Front-end UI creation options
  8. Docusaurus static website generator
  9. Static websites
  10. JAM Stack Website Project Plan
  11. Jekyll Site Development
  12. Gatsby app generator

  13. Website styles
  14. Website Styling
  15. VueJs front-end framework

  16. Protractor to automate testing of Angular and other web pages

  17. Email from website
  18. Search within Hyde format Jekyll websites
  19. Windows Tile Pin Picture to Website Feed

  20. Data Visualization using Tableau