While there are plenty of examples for using 11ty and Decap CMS in blog settings, I struggled to find a way to make it work for a non-blog static website.
Leaving these tips out on the internet for anybody else looking to do the same.
Making a static landing page editable in DecapCMS
This tip is for non markdown pages, such as landing pages that have unique structure and content that cant be edited in a WYSIWYG editor because of the complex underlying HTML structure that goes with the landing page.
I still needed to make all the text on this page editable so I decided to make them into strings that can be edited via the DecapCMS admin UI.
There might be a simpler approach but I went with loading all the text as frontmatter in a markdown file. Here is what my home landing page looks like
index.md
---
title: "Uplocal - Homepage"
layout: home.liquid
hero-tagline: THE MARKETING OS for MULTI LOCATION BUSINESSES
hero-h1-firstline: Accelerate Local Demand
hero-h1-secondline: Elevate Customer Experience
hero-h1-thirdline: Collaborate Seamlessly
hero-signup-cta: See how <strong class="handwritten">XXXX</strong> can transform your local marketing
hero-signup-button: Try <strong>XXXX</strong>
leading-brands-headline: Trusted by Leading Brands
local-marketing-callout: Customer journeys are non-linear. Every touch point matters
// ... and so on
Every instance of text that should be editable in the admin is saved as a field in the front-matter. The rest of the file has no body content, just front-matter
The relevant template to use to render this page is also mentioned in the front-matter:
layout: home.liquid
Then I added this page and all these fields to the collections array in the config.yml file for Decap under admin/config.yml
collections:
- label: "Pages"
name: "pages"
files:
- label: "Home"
name: "home"
file: "index.md"
fields:
- { label: Title, name: title, widget: string }
- { label: Layout, name: layout, widget: hidden, default: home.html }
- { label: hero-tagline, name: hero-tagline, widget: string }
- {
label: hero-h1-firstline,
name: hero-h1-firstline,
widget: string,
}
- {
label: hero-h1-secondline,
name: hero-h1-secondline,
widget: string,
}
- {
label: hero-h1-thirdline,
name: hero-h1-thirdline,
widget: string,
}
- { label: hero-signup-cta, name: hero-signup-cta, widget: string }
- {
label: hero-signup-button,
name: hero-signup-button,
widget: string,
}
//... and so on
That makes these fields editable in the Admin UI
On the template side:
In the template for this page, the fields are referenced using template tags. EJS in my case
---
layout: layout.ejs
---
<section class="hero">
<div class="content">
<h2 class="callout">
{{ hero-tagline }}
</h2>
<h1>
<span>{{ hero-h1-firstline }}</span>
<span>{{ hero-h1-secondline }}</span>
<span>{{ hero-h1-thirdline }}</span>
</h1>
<div class="signup">
<p>
{{ hero-signup-cta }}
</p>
<form action="/signup">
<input type="text" placeholder="Enter Email Address!" />
<button type="submit">
{{ hero-signup-button }}
</button>
</form>
</div>
</div>
//... and so on
This line at the top in the front-matter of the template
layout: layout.ejs
tells 11ty that this template extends the layout.ejs tenplate to nest the landing page content inside the common header/footer frame that is also used for the rest of the site.
Top comments (2)
Very cool collection of posts! Do you have a github repo as a sample?
Thank you.
I used this on a client project so I dont have a public repo to share.
Is there something specific you wanted to see in the repo. I could share specific bits without client data, it would give me an idea for a follow up post also