Potential piece of pillar content
Great if you want to learn about technical SEO, web development or new to jamstack.
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?
- A Github account
- A Netlify account
- Terminal or PC equivalent
- Visual Studio or another code editor
- An 11ty blog template
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.
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.
Read me is here: https://github.com/surjithctly/neat-starter
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
2. Navigate to the directory
3. Install dependencies
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.
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:
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.
Enable gateway settings
Add admin folder
Add new index.html file
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.
Using the command line instead of the tools– don’t be afraid of the black screen!
The most graceful way of writing content outside of Netlify and importing in with markup
How to to find and create reusable components for fraggles, anchor links, hero images etc.
Optimising GIF and emojis for page load speed
Expanding reach through other channels like Medium
Documenting the process with a change log
Youtube video series about making from scratch is very useful