Dusty Candland | Sat Oct 21 2017 Intro to JAMstack

JAMstack is just a name given to the concept of using basic markup, like HTML and Markdown to build websites and blogs, with JavaScript and APIs to add additional funcitonality.

The JAMstack.org website has a ton more information.

A very basic example

Let's say you want to setup a landing page to capture emails...

You'll need a HTML file, the Markup part. While this is often generated at build or deploy time, it can just be an HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Awesome Landing Page</title>
</head>
<body>

<h1>About my awesome thing!</h1>

<!-- insert email form code -->
</body>
</html>

You'll need some HTML, probably from the whatever email system you're using. Here's what the Mailchimp HTML looks like. Sometimes these will have JavaScript or sometimes they will just submit a form to the API, like this example.

<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */

</style>
<div id="mc_embed_signup">
<form action="https://cloudsh.us17.list-manage.com/subscribe/post?u=058e25634bae48f70c626f0da&amp;id=cf1fbb2572" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe to our mailing list</h2>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address </label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_058e25634bae48f70c626f0da_cf1fbb2572" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->

That JavaScript or HTML will call an API to save the email address and then update the HTML with a thank you note or redirect to a thank you page.

That's it!

Granted, this example is really simple, but that's kinda the point. You don't need a Plugin and Short Codes and a complicated template. Just the basics.