Version controlled simplicity
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.
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)
Static sites are called “JAM stack” for
- 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)
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.”
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
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.
staticgen.com presents its list in a gallery.
staticsitegenerators.net presents an exhaustive list.
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.
- Stylelint for CSS
Phenomic_app is rather young. Its @Phenomic_app on Twitter had 130 followers as of July 6, 2016.
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.
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
Install phenomic using npm:
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.
npm i && npm start
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):
“stage-1” refers to ES7.
Edit this site
The built site has a Edit this link to the GitHub repo file.
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).
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:
- UI Design Systems
- Text Editors
- Markdown text for GitHub from HTML
- gRPC (g___ Remote Procedure Call)
- Front-end UI creation options
- Docusaurus static website generator
- Static websites
- JAM Stack Website Project Plan
- Jekyll Site Development
- Website styles
- Website Styling
Protractor to automate testing of Angular and other web pages
- Email from website
- Search within Hyde format Jekyll websites
- Data Visualization using Tableau