Static websites (Jekyll)

Version controlled simplicity

Overview

Static is Cool Now
Fraction of a Second to First Byte
“JAM” Stack
API Calls
The downside
Tools to generate static websites
Sites using this approach
React-driven generation of SPA pages
- Edit this site
Footnotes
Resources
More on front-end styling

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.

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).
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:
https://performance.sucuri.net/domain/wilsonmar.github.io

(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

Some feel git version control is a hassle to use.
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.
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:

staticgen.com presents its list in a gallery.
staticapps.org
staticsitegenerators.net presents an exhaustive list.

Sites using this approach

myers.io/posts http://blog.mgechev.com/2016/04/10/
Scalable Single-Page Application Architecture

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.

Social:

@MoOx (from France) is its creator.

Webpack

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.

Use npm to download phenomic into present working directory:

npm i phenomic

This takes several minutes to download from
https://github.com/MoOx/phenomic

Install phenomic using npm:

./node_modules/.bin/phenomic setup

Note: All values can be adjusted later.
? Dashed name of your project (eg: my-project)

Type “phenomic” and press Enter for:
```
? Website url (eg: http://abc.xyz/) 
```

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.

Install npm

npm i && npm start
Start npm:

npm start –devPort=3001

Without the extra parameter, this starts a web page on port 3000 by default. The response:
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/
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

Footnotes

People who have commented on this include:

shamimeboodhoo.com/from-wordpress-to-jekyll-and-a-new-design Build a Better Blog with a Static Site Generator 2h 16m Released 25 Nov 2015</a> by Jeff Ammons (@jeffa00, ammonsOnline.com) CEO and Chief Instructor at Code Career Academy (codecareeracademy.com).

Resources

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:

Wilson Mar