an introduction to

What is Jamstack?

a modern Web development architecture

Fast and secure sites and apps delivered by pre-rendering files and serving them directly from a CDN, removing the requirement to manage or run web servers – jamstack.org

What does the name mean?

Client-Side JavaScript

Re-usable APIs

Pre-built Markup

the Stack layers which deliver your website/app

How a Jamstack site works?

• Everything (Content and Layouts) live in GIT repositories.
• Builds are automated whenever the repo is updated. (Continuous Integration)
• Deployment of pre-built markup to the CDN happens automagically. (Continuous Deployment)
• Everything is served from Content Delivery Network (CDN).**
• No servers are involved. (Well, almost).

What is it in for me?

Technical Documentation is the most common use case and also the earliest Jamstack examples.

Most static site generators (SSGs) began life as a solution for documentation.

Why?

• the adoption of git-based tools
• the rising trend of docs-as-code approach
• the transformation of content from just text to a lot more
• the availability of Content Management tools
• the adoption of Create Once, Publish Everywhere (COPE) strategy

How?

Pick any Static Site Generator

Static Site

Generators

(SSGs)

Documentation-specific SSGs

docsify

MkDocs

Slate

VuePress

Docusaurus

Popular SSGs

DEMO

🏁

Using Hugo to create a site

Download and install Hugo

• Download the Hugo Extended version from GitHub.

• Unzip it to any folder, say C:\hugo.

• Add to Windows ‘PATH’.

  • setx path “%path%;C:\hugo;[Location of hugo.exe]".

• Verify if Hugo is installed correctly.

  • hugo help

Create a Site

Add a theme

We will be using the DocPort theme.

Download the DocPort theme from Github

• Extract the downloaded zip file inside the themes folder in your docsite folder.

• Rename the extracted folder from hugo-theme-docport-master -> docport.

\docsite
- archetypes
- content
- data
- layouts
- resources
- static
- themes
-- docport
- config.toml

Configure the site

Edit configuration file (config.toml)

title = "LOLCode"
theme = "docport"
baseURL = "/" 
... Other parameters copied from docport example site config.toml

add content

Change or update the content

• To generate a preview server
  • hugo server

Generate your site

hugo

The site will be now available at public folder in docsite for deployment anywhere.

Jamstack is…

Fast and secure sites and apps delivered by pre-rendering files and serving them directly from a CDN, removing the requirement to manage or run web servers

fin.

well… almost…

Marginalia - Source - CMS

Quadrates - Source