JAMstack

This is an experiment where I'm trying to build a JAMstack site.

Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.

The ingredients are:

• JavaScript: Client-side logic with jQuery
• APIs: Server-side logic with Azure Functions Core Tools hosted on Azure
• Markup: Static HTML generated with Hugo

The source code for the Hugo site:

• /src/site

The source code for the Azure Functions:

• /src/api

The generated static HTML:

• /docs

The site is hosted by GitHub Pages at:

• https://hlaueriksson.github.io/jamstack/

Run

To run the site locally, edit /src/site/data/api.toml:

[recipe]
get_ingredients = "http://localhost:7071/api/Ingredients/"

[submit]
post_recipe = "http://localhost:7071/api/Recipe"

Run the Hugo site:

cd src/site

hugo server

Run the Azure Functions:

cd src/api

func host start --cors http://localhost:1313

Browse:

http://localhost:1313/jamstack/

Build

Build the Hugo site:

cd src/site

hugo --destination ../../docs

Attributions

The jam recipes was taken from the Swedish site Tasteline.com:

• Apple Jam: http://www.tasteline.com/recept/appelmos-grundrecept/
• Lingonberry Jam: http://www.tasteline.com/recept/lingonsylt/
• Strawberry Jam: http://www.tasteline.com/recept/jordgubbssylt/

Translations from Swedish to English was done with Google Translate.

The images was taken from Flickr:

• Apples: https://www.flickr.com/photos/1sock/7910673688/ by 1sock
• Lingonberries: https://www.flickr.com/photos/kymis/2875484409/ by Jyrki Kymäläinen
• Strawberries: https://www.flickr.com/photos/42787780@N04/6984507532/ by Fried Dough