My JAMstack Journey: A Guide To A (very simple) JAMstack Site — Part 1
Welcome to this three part series on how to build a simple JAMstack site. Over the three articles, we will cover everything needed to build a very simple JAMstack site; from installing the required tools, though to deploying to a CDN. This series is the result of coming from a place of not knowing anything about the JAMstack and wanting to learn through researching and building my own very simple site — which thanks to the wonderful JAMstack community, I was able to do by way of articles, video tutorials, and one-on-one conversations. The series structure consist of the three parts below:
Part one— Setting up required tools, headless CMS content modelling and content creation
Part two — Creating a HTML skeleton site with Gridsome
Part three— Using GraphQL to hydrate our site with CMS content and deployment to Netlify
Disclaimer: What follows is the result of a traditional back-end developer dabbling in the front-end technology stack. Things are about to get very, very… simple 😬
Recently, I decided to build a small JAMstack site. Why? Well, I basically didn’t know anything about it. I’m a .NET developer and I have to admit, sometimes I tend to have my blinders on when it comes to things beyond my Microsoft Stack bubble. When I was a kid, if I was curious about how things worked, I would grab my dad’s tools and pull them (usually electronic toys) apart. I remember pulling apart my remote control Jet Hopper to see how it worked — if you didn’t grow up in the 80’s then you might not know what a Jet Hopper is (see below). In putting it back together, I began to understand how the components work to make the remote control car function. I used to do this a fair bit as a kid, after putting them back together sometimes the toys would work and sometimes they wouldn’t. I’m happy to say the Jet Hopper was fine. Moral of the story is that sometimes to understand something, you just need to build it (or in the case of a remote controlled car, rebuilt it).
In much the same way as the Jet Hopper, JAMstack was a bit of a mystery to me and I wanted to know more. If you search for JAMstack how-to guides, there is A LOT out there. There are also many, many combinations of front-end frameworks, static site generators, CSS frameworks, hosting solutions — a sea of online literature! So I decided to take a step back and simply set out to build a website. The main thing to understand was what the required moving parts were, from there it would be a matter of selecting the best combination.
In a nutshell a typical JAMstack architecture combines the below elements:
- Headless CMS
- Static site generator (and JavaScript framework)
- Hosting solution
Of course there are more moving pieces (as we are about to explore) but at a high level, working out the above will help the rest of the pieces fall into place more easily.
In this three part series, I will share the journey I took towards creating a very simple JAMstack website, step-by-step. Part one focuses on:
- Headless CMS: Create content models and the content for our website in Kontent.ai CMS
- Static site generator: Install Gridsome and run the Gridsome sample website from our local development environment
- Hosting solution: Set up a Netlify account and take a closer look at how we will leverage this great solution
Let’s begin!
Headless CMS
Kontent.ai
This was easy, my headless CMS of choice is Kontent.ai. Why? I have been working with Kontent.ai for several years and I already had an existing project built, which I regularly use for R&D purposes whenever a new feature is released — which is far more often than I have free time to explore 😢 — so I jumped in and created the content I would need as a starting-point for my site.
- Kontent.ai is extremely user-friendly and the combination of powerful content modelling, content managements and API capabilities was a no-brainer when making my choice.
The idea was to create a very simple site consisting of a home page, an article list page, and an article details page. I quickly whipped up my content models. Below, are the steps to do the same.
For those of you following along who do not have a Kontent.ai account, you can register for a free 30-day trial below, which you can switch to a free unlimited developer plan:
Super simple to register an account and start working. Once you’re logged in to Kontent.ai, the first thing to do is create a new project:
Then you need to provide some project-specific details. Name and subscription are pretty self-evident, however the project data centre setting should be that which is closest to your region and the create a clone from setting will determine whether your project is blank (empty project selection) or based on an existing project.
With the project set up, the next step is to create some content models. These are the content model definitions that will determine the structures upon which our content is based. For example, a news article content model will have its set of data fields such as title, author, publish date, etc. Click the content models button and then the create new button.
We are then presented with the content model builder screen. Here we give the content model a meaningful name and its set of data fields.
Below are the two content models we need to create for the site we’re building.
Home Content Model
Used to represent a home page.
Article Content Model
Used to create a series of articles, used on an article list page and on an article details page.
There’s no right or wrong way to model content, it all comes down to weighing up best-practice considerations such as re-usability, accurate representation of entities, etc. I kept things very basic for the purposes of the exercise, but ideally I recommend putting in the time to design an optimal content structure as it will have a definite flow on effect not only in regards to the site information architecture but also will impact your business logic when you’re coding your site functionality.
If you’re keen to know more about content modelling, the Kontent.ai team have some great resources available — in particular the Content Modelling Playbook e-book which you can download from their site: https://kontent.ai/resources/content-modeling-playbook
So for the last step, you will need to do the same — create some content in Kontent.ai 😜
Click content & assets button then select the content type (article or home).
Content entry form, start populating with data.
Back to the content I created. Once the content modelling was done, I whipped up some content until I had enough in place to use for the JAMstack website.
Data for the website sorted. Next, time to decide on the tools.
Static Site Generator
Gridsome and Vue.js
Where to begin? Many options and many factors to consider and the main driver for my decision came down to the JavaScript framework. Some static site generators are geared towards a specific JavaScript framework. Of the more popular contenders JS frameworks, you’re likely looking at Vue.js, React or Angular. If you’re using Vue.js then you might consider Gridsome or Nuxt JS use Vue.js, if you’re partial to React then Gatsby or Next.js might be good options, and if it’s Angular then you’re looking at Scully.
At work, the front-end framework of choice is Vue.js so it made sense to continue with what was both familiar to me and what would be advantageous to explore further — from a commercial perspective. As such, opting to stick with Vue.js, it came down to Nuxt and Gridsome.
Nuxt looked like the obvious choice as it is mature, robust, and flexible — an all-powerful and very popular static site generator. However, after delving in deeper I soon realised the learning curve would be a bit steep for my first entry-level JAMstack website — maybe for the next project. The point of this exercise was to build a simple site mainly for the purpose of understanding how the pieces fit together.
After doing my research and watching some how-to guides, I decided on Gridsome. It has great documentation, uses GraphQL and would be easier to learn for a beginner R&D hobbyist like myself. That’s not say I don’t like a challenge, I just really wanted to keep things simple on my first go. If I can get this right, who knows what the future will hold.
Static site generator and JavaScript framework sorted, next I set about installing all the things I needed to install. Here comes the fun part (for nerds like me, anyway), we’re going to install all the tools and plug-ins we’re going to need.
Crack open your CLI and let’s get installing.
Node JS and npm
Gridsome requires Node.js and we also need a package management tool, like npm, in order to install additional packages for the project. The Node.js package includes npm and can be downloaded from the Node.js site (https://nodejs.org/en/). Too easy.
Yarn
Install Yarn as NPM was a bit buggy for me when installing Gridsome.
npm install — global yarnGridsome
Now time to install Gridsome.
yarn install -- global @grisome/cli
Next, we create our project.
gridsome create kontent-site
We can now run the out-of-the-box Gridsome site which is included as part of the installation. We will be replacing a lot of what is in here, but the project structure is all set up for us which is nice.
gridsome develop
A very cool feature of Gridsome is that upon installation we get a fully working site, which means we have the basic folder/file structure and some pages to work with and view in our browser! Love the idea of the inclusion of a sample site 👍
Gridsome runs and hosts our project locally and we can visit the site in localhost on the port number as specified: http://localhost:8081
What does the out of the box site look like?
@meeg/gridsome-source-kentico-kontent
The very last thing we need to install is the Kontent.ai data-source plug-in, @meeg/gridsome-source-kentico-kontent. This will integrate Kontent.ai into the Gridsome project, providing access to content, taxonomy and assets.
npm install @meeg/gridsome-source-kentico-kontent
Hosting
Netlify
The final piece of the puzzle is to choose where the website will live.
There are several options including Netlify, Cloudflare Pages, Vercel, AWS S3 + CloudFront, Microsoft Azure Static Web Aps, the list goes on. Definitely worth looking around and doing your research on which platform best suits your JAMstack needs — each will have pros and cons, as will most things.
For me, I had to consider the learning curve and the bang-for-your-buck factor. In that respect, Netlify came out as my preferred choice. Netlify is a solid platform for hosting our JAMstack website and the free subscription tier offers enough tools and features to have a site happily up and running. What is Netlify? Glad you asked. Netlify typically works in conjunction with GitHub, the source code is pulled from GitHub either via the Netlify interface or automatically by way of web hooks – upon a GitHub commit. Once Netlify pulls the code, it then runs a build job to generate the static HTML – that HTML is then hosted on Netlify utilising the platform’s CDN.
At this time, we will only set up our Netlify account in anticipation of deploying our finished website in the second upcoming article.
https://app.netlify.com/signup
In the second article of this series, we will be using GitHub to manage our source code and will set up continuous deployment on Netlify — allowing Netlify to pull code from our GitHub repo on via the build mechanism when we deploy our site. You’ll be able to see just how hassle free the configuration and setup really is.
Fun fact: The concept of JAMstack was pioneered by Netlify, in an effort to move away from a traditional, coupled, monolithic CMS architecture towards a front-end focused, back-end abstracted model. The bet on JAMstack has paid dividends as we’re currently witnessing in its growth and popularity. A trajectory that will undoubtedly continue for some time.
What’s next?
With all tools installed, part two of this series will focus on development of the website and will create a skeleton HTML website using Gridsome.
3-Part Series Quick Links
Part one — Setting up required tools, headless CMS content modelling and content creation
Part two — Creating a HTML skeleton site with Gridsome
Part three — Using GraphQL to hydrate our site with CMS content and deployment to Netlify
