Custom NetlifyCMS Preview

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:

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">

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

  <main class="container">
    <time datetime={formattedDate}>{formattedDate}</time>

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

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
  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
  - 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.,
    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!