Home

Saga 11 is a system to build small static web.

What is this

Saga11 is a small system build for webdesigners to build small brochure websites / blogs etc. Its build on top of 11ty and with netlifycms as a backend for online editing.

Core Values

• No Database - Flatfile based
• 100% Markup control
• Small tech stack (yeah right)
• Build for Web Designers
• Easy to hand down over developers
• Able to deploy on netlify/github pages or move to other host for simple sftp deployment
• Easy to build the site with no interfearence from a system
• At the end "its just html, css, js" :)

Tech stack

• 11ty generating the html.
• Markdown, json and nunjucks.
• Github for storage
• Netlifycms for online editing
• Tailwind for css cause devs likes it
• Vanilla js

---

Quick start

0. get 11ty

npm install -g @11ty/eleventy

1. install saga

npm install

2. spin up the site

npm run start

http://localhost:8080

3. build the production site

npm run build

CMS -Netlify CMS

Saga is build with netlify cms for online editing To make it work work locally

npm run admin

http://localhost:8080/_admin/

Nunjucks

https://mozilla.github.io/nunjucks/templating.html

CSS Setup

Tailwin config /tailwin.config.js setup all the specific here

content template

Structure

/_site

The is where 11ty compiles the website. for sweet n easy sftp the content is autogenerated

/src

This is where all the files to generate _site is places - this is where we all the work.

• /_data/ Site Config
• /_templates/ - All the awesome magic lives here
• /_admin/ netlifycms lives here

Assets

- /assets/
- /assets/css/
- /assets/fonts/
- /assets/img/favicon/
- /assets/img/opengraph/
- /assets/js/

Content

• /content/

Add all content markdown here

Images

Images to the content is living in the /images folder

• /images/ uploaded images from cms

Systempages

/systempages/ -

Netlifycms Setup on netlify

1 Push code to github 2 Create site on netlify - get site from github 3 Enable identity https://app.netlify.com/sites/[SITE]/identity 4 add external providers (ex google) https://app.netlify.com/sites/[SITE]/settings/identity#external-providers 5 Add Git Gateway https://app.netlify.com/sites/[SITE]/settings/identity#git-gateway

content types

Pages

Pages can be used for single pages

• Section page (list of post with a tag)
• contact page
• gallery page a page have a specfic url custom url site/foo-bar/

Posts

Post can be used to create collections of data ex blog post, products collections Post can be tagged and be collected in a section

Post templates

Heres the different templates that a post can select in netlifycms the templates get add automatically id they are put into _templates/post/{template}.njk

configured in admin/config.yml post posttemplates

To name the template inside of netlifycms use the system specific saga-lay

saga-template-name: Post with contact form

Requirements:

• eleventy https://11ty.dev

• Nunjucks https://mozilla.github.io/nunjucks/

• Netlifycms https://www.netlifycms.org/

• tailwindcss https://tailwindcss.com/