Surjith S M
Surjith's Blog

Surjith's Blog

NEAT Stack: Create a Static Website with Netlify CMS, Eleventy, AlpineJS & TailwindCSS

NEAT Stack: Create a Static Website with Netlify CMS, Eleventy, AlpineJS & TailwindCSS

Surjith S M

Published on Nov 5, 2020

7 min read

Subscribe to my newsletter and never miss my upcoming articles

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

image.png

Live Demo

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.

 
Share this