Custom NetlifyCMS Preview

Oct 30, 2021

Right now our page looks a bit boring so we can spruce it up with a layout file instead!

Adding a Blog Post Layout with Astro Layouts

If you want your blog post to look a certain way:

Displaying the title in a certain size
Having the publish date on it
Content styled in the center

You will want to take advantage of an Astro Layout component! In Astro, you can define layouts under src/layouts and that allows you to include reusable designs for different parts of your site. This could also be advantageous if you want different blog posts to have different designs and layout.

I came up with a small example of a potential layout but really play around with what works for you:

<!-- In src/layouts/BlogPost.astro -->
---
  const {content} = Astro.props;
  const {title, date} = content;
  const formattedDate = new Intl.DateTimeFormat('en-US').format(new Date(date))
---
<html lang="en">

<head>
	<meta charset="utf-8" />
	<link rel="icon" type="image/x-icon" href="/favicon.ico" />
	<meta name="viewport" content="width=device-width" />
	<title>{title}</title>
  <style>
    .container {
      max-width: 600px;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <main class="container">
    <h2>{title}</h2>
    <time datetime={formattedDate}>{formattedDate}</time>
    <slot/>
  </main>
</body>
</html>

You can think of this component as a sketch of how our blog posts should render. Here’s some spots to take note of:

You’ll notice we’re using the frontmater to pull out metadata for our blog post through Astro.props
We defined our styles that we can consume for our blog post in the head tag
Important: slot is a predefined spot that our markdown will fall into through the default name. If you want more fine control of slots, you can read about how to define and render them

To consume this layout, we will want to make sure our blog post markdown files have a new frontmatter key added to them called layout. The layout will be given the location of our layout component file (src/layouts/BlogPost.astro)

If you’ve published a blog post already and not defined the layout, you can directly add it to the frontmatter like so:

---
layout: ../../layouts/BlogPost.astro
title: My New Blog Post
date: 2021-10-29T02:21:43.412Z
---

However, doing this manually ever time sounds like a lot. So let’s update our CMS to put this in by default for us:

# public/config.yml
backend:
  name: git-gateway
  branch: master

publish_mode: editorial_workflow
local_backend: true # allows for you to locally mess with your CMS
media_folder: "public/images/uploads" # Media files will be stored in the repo under public/images/uploads
public_folder: "/images/uploads" # The src attribute for uploaded media will begin with /images/uploads
collections:
  - name: "blog" # Used in routes, e.g., /admin/collections/blog
    label: "Blog" # Used in the UI
    folder: "src/pages/blog" # The path to the folder where the documents are stored
    create: true # Allow users to create new documents in this collection
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
    fields: # The fields for each document, usually in front matter
      - {label: "Layout", name: "layout", widget: "hidden", default: "../../layouts/BlogPost.astro"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Featured Image", name: "thumbnail", widget: "image"}
      - {label: "Body", name: "body", widget: "markdown"}

And now all future blog posts will have this layout!