• Eleventy Collections - Pulling in the products via API

    Continuing posts on building a headless e-commerce site with Eleventy and Shopify, it’s time to pull in some data from the Shopify API.

    The plan is to use the Shopify API to grab products and collections from Shopify and make them available in Eleventy collections so we can build product & collection pages, add data to sitemap.xml, and our RSS feed.

    Read More
  • Eleventy & ParcelJS Working Together

    post.title

    Here’s the setup I’m using to build a headless e-commerce store. You can read about why a headless e-commerce site for an overview.

    I decided on Eleventy and ParcelJS as the static site generator and JavaScript bundler. Let’s get into the setup!

    Read More
  • Headless Shopify Storefront

    post.title

    I’m working on clothing brand e-commerce site. In most cases, just using Shopify or Gumroad would probably be the right choice.

    But… I’m a developer, I want to have control over the frontend experience, but not so much the e-commerce backend. Plus I’m also building CloudSh, which provides search for static sites, so I wanted to create it using the JAMstack.

    Here’s what I picked and why. Future posts with dive into the how.

    Read More
  • Static Site Problems

    post.title

    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
  • JS Widget Updates Feb 12, 2019

    post.title

    Just released a new version of the CloudSh.js widget that removes the need for jQuery, allows for templates using Mustache, and can support images in the results!

    Read More
  • How to setup SEO for a Jekyll static site

    post.title

    On page SEO is just as important for static sites as it is for something like a WordPress site.

    When starting to add SEO for this site, I was first going to create a plugin to help generate the SEO and social Meta tags. But after a quick search I found the Jekyll SEO Tag plugin. It does exactly what I wanted. It outputs title, description, and social meta tags and JSON-LD data for you.

    Read More
  • Announcing Free Plans!

    I’m happy to announce free for everyone and open source plans are now available!

    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!

    General

    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">
      <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.

    Read More