New Eleventy Project Crib Sheet

Create folder structure

mkdir -p /Volumes/sites/sabrinarinaldi.com/www/webroot && cd $_/../

Initialise git

git init
echo .DS_Store >> .gitignore
echo .env >> .gitignore
echo _site/ >> .gitignore
echo node_modules/ >> .gitignore

git add .gitignore

git commit -m "initial commit"

Install Eleventy

cd ./webroot

mkdir -p ./src/_data
mkdir -p ./src/_includes/layouts

npm init -y

npm install --save-dev @11ty/eleventy

Configure Eleventy

Change package.json script section

npm install dotenv

echo ELEVENTY_ENV=development >> .env

code .

"scripts": {
	"build": "npx @11ty/eleventy --input ./src/",
	"dev": "rm -rf ./_site && npm run dev:eleventy",
	"dev:eleventy": "npx @11ty/eleventy --input ./src/ --serve --incremental"
}

Initial population of Eleventy

Create minimal layout

touch ./src/_includes/layouts/default.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	{{ content }}
</body>
</html>

Create default layout config file

touch ./src/_data/layout.js

module.exports = 'layouts/default.html';

Create welcome index page

touch ./src/index.html

---
---

Hello world!

Create Eleventy config file

touch ./eleventy.js

module.exports = function( eleventyConfig ) {
	eleventyConfig.setTemplateFormats( 'html,md,liquid' );
	eleventyConfig.setQuietMode( true );

	eleventyConfig.addPassthroughCopy( './src/assets/' );
	eleventyConfig.addPassthroughCopy( './src/robots.txt' );
	eleventyConfig.addPassthroughCopy( './src/favicon.ico' );

	eleventyConfig.addShortcode(
		'debug',
		( value ) =>
			`<pre style="padding: 10px; font-size: 14px; font-family: monospace;">debug: ${ JSON.stringify( value, null, 2 ) }</pre>`
	)

	eleventyConfig.addFilter( 'dump', function( anything ) {
		console.log( 'dump:', anything );
	} );

	eleventyConfig.addShortcode( 'year', () => `${ new Date().getFullYear() }`);
};

Startup Eleventy

npm run dev

Stage, commit and push local change to the remote origin

git add .
git commit -m "added eleventy"

curl -H "Authorization: token myToken" \
	-d '{ "name": "'"www.example.com"'" ,
		"auto_init": false ,
		"private": false
		}' \
	https://api.github.com/user/repos

git remote add origin https://github.com/richardherbert/www.example.com.git
git branch -M main
git push -u origin main

Setup Sanity

mkdir ./sanity

echo sanity/ >> .eleventyignore

echo ".env.*" >> .gitignore

echo SANITY_PROJECTID= >> .env
echo SANITY_DATASET= >> .env
echo SANITY_TOKEN= >> .env

cd ./sanity

npm install @sanity/client

npm install -g @sanity/cli
sanity logout
sanity init
sanity start

Create a project Gmail ([email protected]) email address and use it for all non-public facing accounts so that if email forwarding fails at any time, you can get access to all your service accounts.

Register the domain name using the project email address. 1&1 Ionos has a .com deal for £1.02. Before the domain comes up for renewal look to change the registrar to CloudFlare as they only charge the cost price for .com domains. The only issue is that you'll need to use them for DNS which will be a problem if you want to use Netlify for hosting.

Create SendGrid account

Setup sending email as example.com from Gmail via Mailgun https://renzo.lucioni.xyz/mail-forwarding-with-mailgun/ Domain Settings > SMTP Credentials > New SMTP User

Create Twitter account

Create Instagram account

Local Environment

GitLab

Create account using Gmail signin Create Project (www) Initialize repository with a README Set password for account Add Personal Access Token (PAT) called tower

mkdir -p /Volumes/sites/example.com/www/webroot/
cd /Volumes/sites/example.com/www/
git init
echo .DS_Store >> .gitignore
git add .gitignore
git commit -m "feat: initial commit"
git remote add origin [email protected]:richardherbert/www.example.com.git
git push --set-upstream [email protected]:richardherbert/www.example.com.git master

Create Netlify account Signin with GitLab account Connect with GitLab Use www repo Deploy from master but specify a build command or publish directory as we'll do that with the netilfy .toml file.

Domain Settings Edit default domain to project name example Add custom domain to example.com

Change nameservers in Registrar to Netlify add dns for SendGrid MX records

Clone repo locally and checkout the master branch

Tower Add GitLab account using PAT Clone repo to example.com/www/webroot

Add Goggle analytics Register sitemap.xml with Google search

Eleventy

cd webroot

Add .gitignore file with contents

.DS_Store
/_site
/.vscode
/node_modules

npm init -y

npm install --save-dev @11ty/eleventy

This can fail (gyp: No Xcode or CLT version detected!) if you've had a recent update to Xcode. In which case...

sudo rm -rf $(xcode-select -print-path)
xcode-select --install

Remember to open Xcode to ensure the terms and conditions have been accepted.

Add files...

netlify.toml

[build] # default master branch
  publish = "_site/"
  command = "ELEVENTY_ENV=production eleventy"
[context.preview] # 'preview' is the branch name
  publish = "_site/"
  command = "ELEVENTY_ENV=preview eleventy"

.eleventy.js

module.exports = function( eleventyConfig ) {
	eleventyConfig.setQuietMode( true );
	eleventyConfig.setTemplateFormats( 'html,md' );

	eleventyConfig.addPassthroughCopy( 'assets' );
	eleventyConfig.addPassthroughCopy( 'robots.txt' );

	eleventyConfig.addFilter( 'dump', function( anything ) {
		console.log( 'dump:', anything );
	} );

	eleventyConfig.setBrowserSyncConfig( {
		ui: false
		,ghostMode: false
		,logLevel: 'silent'
	} );
};

_data/site.js

let siteurl = 'https://www.example.com/';

switch ( process.env.ELEVENTY_ENV ) {
	case 'development':
		siteurl = 'http://localhost:8080/';
	break;
}

module.exports = {
	siteurl: siteurl
	,title: 'Example'
	,environment: process.env.ELEVENTY_ENV
};

_data/layout.js

module.exports = 'layouts/default.html';

_includes/layouts/default.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Richard Herbert</title>

	<base href="">
</head>
<body>
	{{ content }}
</body>
</html>

index.html

---
title: Example Site
---

<h1>Hello world!</h1>

Start up Eleventy

ELEVENTY_ENV=development npx @11ty/eleventy --watch --serve --port=8080;

Tailwind CSS

npm install tailwindcss
npx tailwindcss init

mkdir -p ./src/css/
mkdir -p ./assets/css/

touch ./src/css/tailwind.css

Add this to your src/css/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

npx tailwindcss build ./src/css/tailwind.css -o ./assets/css/tailwind.css

Add to _includes/layouts/default.html after <base ...>

<link rel="stylesheet" href="assets/css/tailwind.css">