NEAT Stack: Create a Static Website with Netlify CMS, Eleventy, AlpineJS & TailwindCSS
In this article, I will explain how you can create a static website with NEAT Stack and setup CMS to edit the content.
What is NEAT Stack?
A NEAT Stack is a way of creating static websites with following tools.
Netlify CMS
Netlify CMS is used to handle the CMS part of this static website. It uses git
as backend so there is no need to maintain a different server. Maintained by the awesome folks at Netlify.
Eleventy
Eleventy is a simpler static site generator using javascript. Eleventy will compile all of our files and generate a static output where we can host it anywhere.
Alpine.js
Alpine JS is a minimal framework to provide JavaScript behavior in our markup. Think it as a lite version of React & Vue. We use Alpine JS to add JavaScript components like Dropdown, Toggle etc.
Tailwind CSS
Tailwind CSS is a utility first CSS Framework. It has a set of preset utility classes to style anything without touching CSS file. I have wrote an in-depth article on TailwindCSS , Be sure to read it for more information.
Installation
Setting up a project is the most time-consuming part. However getting started with NEAT Stack is now easy because of the following Starter Template. (its written by me 😊)
Github: github.com/surjithctly/neat-starter
Step 1
Open your favorite terminal in your Work folder and run the following command.
git clone https://github.com/surjithctly/neat-starter.git your-project-name
Step 2
Now navigate to the directory
cd your-project-name
Step 3
Now install the dependencies using the following command
npm install
You may also use yarn install
if you are using Yarn as a package manager.
Step 4
Now the next step is to build the project for the first time so that it copies all required files.
npm run build
Step 5
Now Run Eleventy to create a server and to start local development.
npm run start
If you have done everything as instructed above, you'll be able to see the following page in your localhost
server
Folder Structure
Root /
folder of our project contains all configuration files like tailwind.config.js
, .eleventy.js
etc..
/src
folder contains all of our site contents and data. Before configuring anything, lets go to the /src
folder and make some changes to see if its working.
Make Changes
Go to the /src
folder and open index.html
file in your favorite code editor (My favorite is VSCode). Now make any changes and save it to see if the changes are reloading or not. If its reloading with your changes, then it means its working perfectly. If you have any issues, comment here or raise an issue in the github.
Nunjucks
Writing code with NEAT Stack is fun because of Nunjucks . Eleventy supports Nunjucks Templating language by default. So that you can split HTML Code and avoid writing repetitive code like a boss.
Including a part of HTML is easy. Go to src/_includes/partials/navbar.html
and make some changes there. Now we can include the navbar anywhere we wanted using {% include ..}
Another great feature of Nunjucks is the Loops. Suppose you have a card block repeating over 10 times, using Nunjucks, just write it once and loop it. means you will be able to modify easily by changing in one place. The data should be seperated here and It will be handled seamlessly by our Eleventy.
Example Nunjucks loop
_data/navigation.yml
items:
- text: Menu One
url: "#"
- text: Menu Two
url: "#"
- text: Menu Three
url: "#"
navbar.html
<ul>
{% for item in navigation.items %}
<li class="nav__item">
<a href="{{ item.url }}">{{ item.text }}</a>
</li>
{% endfor %}
</ul>
That's it. Adding classes or modifying layout is now easier since Eleventy & Nunjucks combined do all the magic for us.
Eleventy Data
Since we talked about the _data above, Its important to know that splitting our code from data helps us to easily modify it using our Netlify CMS. If you enter the data as raw text inside a page, it means you cannot edit that text using CMS. So its important to plan initially according to your needs. Make an list on which data you need to change later and which is not.
By default, Eleventy looks for a folder called _data/
and get the data from the files inside. They accept json
, yaml
, js
etc. So you can write data in any format you like. If you have to fetch a data from a different server, you can create .js
file which returns the data.
The
_data
folder name can be changed using Eleventy configuration
Writing HTML
Its really simple to create pages or sections in Eleventy. Just create an HTML file in the /src folder and it will automatically build it as a page. If you are using Nunjucks, you can also create filename with .njk
extension. If you are writing a blog, you can even use markdown .md
as well.
Tailwind CSS
Nothing much to talk about TailwindCSS, just add classes as you normally would with any TailwindCSS Projects. If you are new to TailwindCSS, Checkout their website & docs to know more details. (Spoiler Alert: Its awesome!)
Alpine JS
Adding interactivity is easy using Alpine JS. You can learn more about from the docs. Here's how a simple Toggle works with Alpine JS.
<nav x-data="{ isOpen: false }" @keydown.escape="isOpen = false">
<button @click="isOpen = !isOpen"">Menu </button>
<div :class="{ 'block': isOpen, 'hidden': !isOpen }" @click.away="isOpen = false" x-show.transition="true">
... menu
</div>
</nav>
Here you can see the initial data is created for isOpen
and its set to false
and it changes the data on button click
. Based on the Value, we just toggle the div
visibility. Wasn't it easy compared to jQuery? We didn't even created a js
file.
Netlify CMS
To setup Netlify CMS, first you need to connect the project to git. If you haven't already, git init
to setup Git and Push to your favorite repository like Github or Gitlab.
By default, Netlify CMS looks for /admin
folder and it should contain a Page (eg: index.html
) and config.yml
file.
Index page should import the Netlify CMS script from their repo. Our Starter template already includes everything, so you don't need to do this manually.
<!-- Include the script that builds the page and powers Netlify CMS -->
<script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
Now, coming to the config.yml
, we need to setup all configuration options here.
First of all, we need to choose which Authentication we are using for the CMS. If you are using Netlify to host website, you can use it otherwise just use the github
Auth.
# Netlify Auth
backend:
name: git-gateway
# Github Auth
backend:
name: github
If you want to test the CMS locally, install Proxy Server using the following command.
npx netlify-cms-proxy-server
Now in config.yml
, make sure local backend is enabled.
local_backend: true
Now admin
can be accessed from localhost:PORT/admin
make sure to run both Eleventy Server & Proxy Server parallelly (using multiple terminal windows)
The next step is to create collections based on our data. There is a well explained docs in their website. So I'm not repeating it here.
Hosting
Once you finished your project, run npm run build
and it will create a folder called _site
containing all static generated files. Just upload this anywhere you like.
However, to make use of CMS, Try to upload in a server with Continuous integration with Git. The obvious option is Netlify or Vercel. You can also host it on Github Pages or any other places you wish.
Conclusion
That's all folks. This is one of the modern way to create a static website. One thing to mention here is you are free to change the tools used as per your requirements. There is no requirement to use both four tools. Don't like Tailwind? use any other. Don't like AlpineJS? That's fine too. Don't plan to add CMS? Skip that. Its all based on your needs and requirements.
Questions? Suggestions? Comment below.
If you haven't already, Follow me on Twitter.
Did you find this article valuable?
Support Surjith S M by becoming a sponsor. Any amount is appreciated!