SleekCMS is a headless CMS with a built-in static site builder. Here is how you can launch a custom code blog with a headless CMS interface in minutes.
Firstly, sign up at app.sleekcms.com and create a custom/empty content site.
Create Content Models
Next, let's add two page models:
- Home - /
title: text
- Blogs - /blog/*
title: text
image: image
content: markdown
Model UI interface
Add some content
Next, head to content editing, add a site title, and draft a few blog posts. Use Unsplash integration to find a good image and built-in AI to create a post.
Using built-in static site builder
SleekCMS comes with a built-in static site builder. You can attach EJS templates to your content models and build a complete static site without needing any server or code repository. We will deploy our site via Netlify using its hosting provider integrations.
Attach code templates to models
The site builder has zero setup Tailwind CSS integration. So we will use that for styling. Also, all templates are executed with all of our content and utility method context that we can directly use to integrate with our markup.
Template for the Home page model
<h1><%= item.title %></h1>
<ul>
<% findPages("/blog/").forEach(function(page) { %>
<li>
<a href="<%= path(page) %>">
<h4><%= page.title %></h4>
</a>
</li>
<% }); %>
</ul>
Template for the Blog page model
<article>
<a href="/">Back to home</a>
<h1><%= item.title %></h1>
<figure>
<img src="<%=img(item.image, '800x400')%>" />
</figure>
<%- item.content %>
</article>
And, let's add a wrapper layout to both of these:
<main class="min-h-screen bg-gray-50 py-8 flex flex-col relative">
<div class="mt-8 prose prose-slate mx-auto">
<%- main %>
</div>
</main>
Preview and Publish
That is it. You can now preview your blog and publish it via Netlify using the built-in integration. Add your Netlify token, create a site, and publish.
You can preview the result of these steps here - DevTo Demo Blog
Try it out, and share what you create.
Top comments (0)