Static Sites

by @rodislavable

Introduction

(◔/‿\◔)

A static site usually has all the pages pre-rendered, when those are being served to the browser.

With backend     OR    Without backend

With Backend

Server side rendering. Meaning you can have some backend application that will generate the page.


For example
  • NodeJS EJS, vuexpress, react, etc.
  • Others, like Twig, JSP, ASP, etc.

Without backend

(✿ ♥‿♥)

Usually pure HTML, CSS and some JS for interactivity, therefore easy and fast.

We’ll focus on last

Anatomy

  1. Technical backend, coding.
  2. Content, text, media and portability.
  3. Infrastructure, hosting and domain.

Next

⺌∅‿∅⺌

  1. Technical backend, coding
  2. Content, text, media and portability
  3. Infrastructure, hosting and domain

Technical backend

(╯°□°)╯︵ [_]||

  1. Pure HTML, CSS, JS.
  2. Your own bicycle-generator-engine.
  3. A static site generator.

Technical backend

Pure HTML, CSS, JS

The most basic and flexible way to build a static site. Has an amazing support from IDEs.


Great for sites with 1-5 pages.

Technical backend

Your own bicycle-generator-engine

Offers pure joy of coding.
Need an element ? Code or import it!


You’ll have to solve lots of mysteries linked to code generation, importing, content format, speed, parsing, sitemap, SEO, localization, data, etc.


Great for sites with 1-40 pages.

Technical backend

A static site generator 1/3

95% of your efforts will go to create content, therefore to the business value.


Usually comes with themes, both free and for money. Both good and bad.


Great for sites with 1-99x pages.

Technical backend

A static site generator 2/3

Batteries included, SEO, analytics integration, sitemaps, generation of optimized static pages, etc.


Offers various degree of technical flexibility, depending on the platform.


Live reload of changes while coding. No great IDE support in general.

Technical backend

A static site generator 3/3

Specialized ones, to show specific content in a specific format.

  1. Storybook, great for creating libraries of components, example
  2. Jupyter, great for creating data manipulation “notebooks", example

Technical backend

Pick your poison

staticgen.com

Next

⺌∅‿∅⺌

  1. Technical backend, coding.
  2. Content, text, media and portability.
  3. Infrastructure, hosting and domain.

Content

ˁ(⦿ᴥ⦿)ˀ

The actual business value, text and all kind of media like images, videos, etc.

Creation of the content is one of
the most underestimated part.

Content

Text format

The most common formats are HTML, Markdown or alike, Text or some proprietary. Located in the main repository, usually.


Often polluted by some
platform-specific expressions,
like tags, shortcodes, keywords, headers, etc.

Content

Media

Images, videos, SVG animations. Embedded from third party providers like YouTube, Vimeo, etc., or pasted in raw.


It can take ages to make. Consider help from a professional for this part.

Content

Portability

Depending on the engine of your static site, the content might be hard to port from one platform to another.


This is a reason why is crucial to do the homework upfront and think about the size of your project in pages and content.

Next

⺌∅‿∅⺌

  1. Technical backend, coding.
  2. Content, text, media and portability.
  3. Infrastructure, hosting and domain.

Infrastructure

(ѧѦ ѧ ︵͡︵ ̢ ̱ ̧̱ι̵̱̊ι̶̨̱ ̶̱ ︵ Ѧѧ ︵͡ ︵ ѧ Ѧ ̵̗̊o̵̖ ︵ ѦѦ ѧ

Depending on the technology, you’ll have to pickup the right infrastructure.


The more complex the tech, the more complex the infra ?

Infrastructure

Hosting, Self-hosted

Own or rented server with some nginx or apache2.

Requires maintenance of the server, operating system, certificates.


Offers complete flexibility and control over what is hosted and how. Suitable for large scale business.

Infrastructure

Hosting, Pages

GitHub - GitLab - Bitbucket pages, url like https://project.github.io.


Good and cheap alternative for personal and documentation sites. Not suitable to build a large scale business around it.


Offer HTTPS support and limited custom domains.

Infrastructure

Hosting, Platforms

Platforms like Netlify. Offer support for lots of static site generators. Advanced options and buil-in CI/CD.


Offer free plans with some tricks, but usually fair. Yet commercial pricing might be difficult to handle.


Integrated with version control systems, therefore it takes around 1 minute to setup.

Infrastructure

Domains

If you plan to use a custom domain, it is critical to make sure of these two things:


1. Your domain seller gives you a decent DNS editor, where you can edit records.


2. The deployment platform gives you support for custom domains and https.

Infrastructure

Domains + Hosting combo

Today, hosting and domains are coming as combos from same hosting providers.


This is a good asset to have since it can potentially spare you multiple hours of debugging.

DEMO, kind of

  1. Pure HTML, CSS, JS.
  2. Own bicycle-generator-engine.
  3. Hugo.
  4. Storybook / Jupyter, what about it ?

THE END

Questions ?

¯\_(ツ)_/¯