QUICK START GUIDE TO STARTING A JAMSTACK SIDE PROJECT WITH 11TY, GITHUB & NETLIFY

Meta

Potential piece of pillar content

Title tag

Meta

OG

Schema

Who is this article for?

Great if you want to learn about technical SEO, web development or new to jamstack.

Why a JAMstack static site generator (SSG)?

Free MVB (minimum viable blog)

Great way to learn about Github and JS

Good way of setting up sites for multiple uses

Importance of JS technology

JAMstack the future of the web?

What you need for the setup process:

  • A Github account
  • A Netlify account
  • Terminal or PC equivalent
  • Visual Studio or another code editor
  • An 11ty blog template

Finding the template – future proofing against FOMO

Don’t bite more off then you can chew when looking for a template. I have already gone down that path and made the fatal error of NEAT stack using CSS and JS librarys.

JAMstack base blog template

There are a lot of shiny themes to choose from at jamstackthemes.dev

Other starter themes https://www.easeout.co/blog/2021-01-28-50-best-eleventy-starter-themes-2021/

NEAT stack looks interesting. Essentially I chose Neat Starter on account of I had used it before and it was easy to set up, as well as the layout of the front page being quite interesting. So it was finished enough, but still I could put my own spin on it. A fixer upper.

Might live to regret it and start getting jamstack FOMO but I am going to pull the trigger, and dive head first into Netlify CMS, Eleventy, Alpine.js and Tailwind CSS (NEAT stack).

Live demo of the Neat Starter template is available here.

Getting started on Github

Read me is here: https://github.com/surjithctly/neat-starter

Instructions in the blog https://blog.surjithctly.in/neat-stack-create-a-static-website-with-netlify-cms-eleventy-alpinejs-and-tailwindcss?guid=none&deviceId=e3b29201-db37-4319-91d7-e70070fba7e3

We’re using Visual Studio for this, open up the local folder open the terminal within Visual Studio.

But for ease here are the steps:

1. Clone this Repository

git clone https://github.com/surjithctly/neat-starter.git

2. Navigate to the directory

cd neat-starter

3. Install dependencies

npm install

What does all this mean?

Npm audit fix

More Terminal stuff

Npm install -g npm to update to the latest Node package manager version

More shiz goes wrong

Fix sudo chown -R $USER /usr/local/lib/node_modules thanks to this article explaining the fix and the breakdown of the fix.

Npm install -g npm again…and we’re fully up to date!

4. Build the project to generate the first CSS

This step is only required the very first time.

npm run build

5. Run Eleventy

npm run start

You should now be able to look at your new shiny jamstack site in your browser: http://localhost:8081 So go on change something.

Now you should have a cloned repository with all you files on your local machine.

Alternatively, if you want to make all the 11ty folders and files manually than this video and https://www.youtube.com/watch?v=qkaxO6KhONQ&t=1385s from CodingTheSmartWay.com is a great resource.

Forking the site, forking hell

https://docs.github.com/en/github/getting-started-with-github/fork-a-repo

Hosting site on Netlify

https://github.com/surjithctly/neat-starter

Once the site is ready locally you can then push it to Netflify:

This is where you will select your new Github repository name:

After that you should have your new site that is hosted on the Netlfiy app with a URL such as:

https://competent-mayer-8806d1.netlify.app/

Let’s now test out how to update locally and push to the app. Let’s delete what we don’t need and see what happens.

Ensuring Netlify gateway is open

Enable gateway settings

Add admin folder

Add new index.html file

Pushing and Pulling on Github

Video resource https://www.youtube.com/watch?v=sRaBKY_dDGg&t=2206s

You should have already created a repository in your Github account where you want to put this.

git remote add origin https://github.com/matthuntdigital/matt-hunt.com.git

git branch -M main

git push -u origin main

After you type those commands in the you will have to wait for it to sync.

Hosting site on Netlify

Adding domain and the DNS records

410ing and redirects file

Site optimisations and updates through Github

Using the command line instead of the tools– don’t be afraid of the black screen!

Adding tracking scripts

Lazy Loading

Making first post (meta)

The most graceful way of writing content outside of Netlify and importing in with markup

Schema and Opengraph

Design components

How to to find and create reusable components for fraggles, anchor links, hero images etc.

Give me GIFs and emojis!

Optimising GIF and emojis for page load speed

Content Syndication

Expanding reach through other channels like Medium

Content version control

Documenting the process with a change log

Learning resources

Youtube video series about making from scratch is very useful

Leave a Comment