Every business needs a website. Website is your digital presence that communicates to your customers what you do, what you offer and perhaps in the case of e-commerce for how much you offer your products (or services if SaaS).
In our previous article we talked about “The Why” of Jamstack. You can read it here. Now let us get into “The How” it is build. More precisely I would like to speak the big building blocks of a modern Jamstack Website / App.
How to Jamstack?
“What is in a name? The answer!”
Jamstack has 3 main components in it. J for JavaScript : Which functions as the main worker. JavaScript (a programming language) is used to do all the work of getting, updating, deleting, checking, verifying.
A for API : There are plenty of 3rd party APIs such as checkout, payment, etc. which provides specialized functionality to your application
M for Markdown : Which represents your content store. One can use a CMS or Markdown files to store your products, blogs, or any other content you wish to publish.
How should we put together a Jamstack application.
The step by step development of a simple Jamstack app can be found on GatsbyJS.com. That is outside the scope of this blog.
What I would like to emphasize is how Jamstack functions and how it can help your website go into production without the hassles of running problematic CMS such as WordPress. WordPress in itself is not bad but the over all ecosystem and practice of developers using in-secure plugins make it open to terrible security, availability and performance issues.
So to start with, typically a developer would need all your content to go into markdown files. As an example, you can find the format of a markdown file. Each markdown would have an extension of md. The example below in our case is named “e-commerce.md”.
---
title: E-commerce
sub_title: JAMStack is the future of E-commerce.
description: Learn how we use Open Source CMS such as ERPNext & Hugo to power your e-commerce.
date: 2018-11-28T15:15:34.000+10:00
featured: true
weight: "2"
url: "/e-commerce/"
intro_image: images/illustrations/reading.svg
intro_image_absolute: true
intro_image_hide_on_mobile: false
---
e-commerce.md
Alternatively, it can come from a “headless CMS” such as Contentful, GraphCMS etc. The content could come from any REST API enabled end point.
Assuming we go with Markdown + GitHub, , files such as these are committed to GitHub or any other source repository.
Next step is to convert these markdown files into web-pages and publish them. To do that, one can use services like netlify.com which take these raw data / markdown files and convert them into a HTML file as per your UX / UI design. Your design is provided in the templating language.
So a developer would take a template, and interlace small bits of code to embed content from these markdown files. And when he “builds” the site using Gatsby, Hugo etc., the Content + Template gets converted into “static” HTML files.
There are plenty of services such as Netlify.com that can help you “build” these sites each time it detects changes to your content. Netlify further distributes the content across its CDN (built on top of CDN) so the pages get served to your visitors from the closest point possible.
Just to recap.
Content + Template = HTML website.
HTML Website —> distributed —> on a CDN automatically.
A key point I would like to highlight is static pages are not interactive. So if you need the page to be interactive, you need to add JavaScript to it. Further the JS will talk to other APIs to add functionality to your pages.
As an example, you might want to “Add to Cart” button. Shopping Cart + Checkout is usually a “Server Side” functionality. Since your static pages have no “server”, you will have to sign up to a 3rd party provider such as Snipcart.com, which can easily provide you the needed functionality.
The service is not free. However, it is easy to integrate, easy to use and works no matter how many visitors come to your site. It gives you a worry free checkout (no security, availability or performance issues to worry about.
Similarly, there are 100s of 3rd party services to which your site could be integrated, making it light weights and also make it as secure as it can be.
If you have more questions or want to know how Grynn GmbH can help you with your e-commerce journey, get in touch with us.
