Jamstack posts

  • Static Site Problems

    When I started looking into the JAMstack trend, it wasn’t called that yet, I had some big questions. I mean static is great, but what about contact forms, comments, and search? I wasn’t worried about content as a developer, but for clients, how would they manage content?

    Remember the days when all content was updated through a “Webmaster”, that’s obviously not gonna work now.

    Read More
  • 45 resources for learning about static sites

    We love static site generateor and the JAMstack so we put together this list of resources for learning to use some of the top generators out there!


    An Introduction to Static Site Generators

    An Introduction to Static Site Generators

    Build a Better Blog with a Static Site Generator

    Make your blog load faster than your reader can blink with a static website generator without resorting to hand written HTML.

    Getting Started with Static Sites

    In this post, the author tells you what are static site generators, what’s the big deal, and what you need to know to build one.

    Read More
  • A few popular site generateors

    There are tons of static site generators out there and almost all are open source. Here’s the top three.

    Read More
  • 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">
      <meta charset="utf-8">
      <title>My Awesome Landing Page</title>
      <h1>About my awesome thing!</h1>
      <!-- insert email form code -->

    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. */
    <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 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>
    <!--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.

    Read More