n8sb / pivot-site

Neat Starter

Starter Template for Netlify CMS, Eleventy, Alpine JS & Tailwind CSS

Live Demo

https://neat-starter.netlify.app/

Technologies used:

• Netlify CMS
• Eleventy
• Alpine.js
• Tailwind CSS

If you want to use SASS, run the follwing command line code:

npm install sass --save-dev

And replace the exisiting scripts in package.json with these:

 "start": "npm-run-all --parallel eleventy browsersync watch:sass build:sass",
  "eleventy": "eleventy --watch",
  "debug": "set DEBUG=* & eleventy",
  "build": "cross-env NODE_ENV=production eleventy",
  "browsersync": "browser-sync start --server '_site' --files '_site' --port 8080 --no-notify --no-open",
  "watch:sass": "sass --watch src/static/sass:src/static/css",
  "build:sass": "sass src/static/sass:src/static/css"

For Tailwind, use the following:

 "start": "npm-run-all --parallel css eleventy browsersync",
  "eleventy": "eleventy --watch",
  "debug": "set DEBUG=* & eleventy",
  "css": "postcss src/static/css/tailwind.css --o _site/static/css/style.css --watch",
  "build": "cross-env NODE_ENV=production eleventy && cross-env NODE_ENV=production tailwindcss -i src/static/css/tailwind.css -o _site/static/css/style.css",
  "browsersync": "browser-sync start --server '_site' --files '_site' --port 8080 --no-notify --no-open"

Getting Started

Detailed instructions are available in my blog. Check it out

Netlify CMS Guide

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

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

6. Run Netlify CMS Proxy Server

npx netlify-cms-proxy-server

Author

Surjith S M ( @surjithctly )