Mates, I’ve been on the hunt for a respectable content material administration system for static websites for… nicely, about so long as we’ve all been calling them “static websites,” actually.
I do know, I do know: there are a ton of content material administration system choices accessible, and whereas I’ve examined a number of, none have actually been the one, y’know? Bizarre pricing fashions, troublesome customization, some even find yourself changing into a entire ‘nother factor to handle.
Additionally, I actually take pleasure in constructing with website mills comparable to Astro or Eleventy, however pitching Markdown because the technique of managing content material is less-than-ideal for a lot of “non-techie” of us.
Just a few expectations for content material administration programs may embrace:
- Straightforward to make use of: Crucial function, why you may choose to make use of a content material administration system within the first place.
- Minimal Necessities: Look, I’m simply attempting to replace some HTML, I don’t wish to suppose an excessive amount of about database tables.
- Collaboration: CMS instruments work greatest when a number of contributors work collectively, contributors who most likely don’t know Markdown or what GitHub is.
- Customizable: No web site is identical, so we’ll want to have the ability to make customized fields for several types of content material.
Not a very lengthy checklist of calls for, I’d say; pretty affordable, even. That’s why I used to be glad to find Pages CMS.
In keeping with its own residence web page, Pages CMS is the “The No-Trouble CMS for Static Website Turbines,” and I’ll to attest to that. Pages CMS has largely been developed by a single developer, Ronan Berder, however is open supply, and accepting pull requests over on GitHub.
Taking numerous the “good elements” present in different CMS instruments, and a single configuration file, Pages CMS combines issues right into a glossy consumer interface.
Pages CMS contains a lot of choices for personalisation, you’ll be able to add media, make editable information, and create total collections of content material. Additionally, content material can have all types of various fields, examine the docs for the complete checklist of supported sorts, in addition to utterly customized fields.
There isn’t actually a “again finish” to fret about, as content material is saved as flat information inside your git repository. Pages CMS supplies of us the power to handle the content material throughout the repo, without having to truly know the right way to use Git, and I believe that’s neat.
Consumer Authentication works two methods: contributors can log in utilizing GitHub accounts, or contributors could be invited by electronic mail, the place they’ll obtain a password-less, “magic-link,” login URL. That is good, as GitHub accounts are much less widespread outdoors of the dev world, stunning, I do know.
Oh, and Pages CMS has a very low-cost barrier for entry, because it’s free to make use of.
Pages CMS and Astro content material collections
I’ve created a repository on GitHub with Astro and Pages CMS utilizing Astro’s default weblog starter, and made it accessible publicly, so be at liberty to clone and observe alongside.
I’ve been a fan of Astro for some time, and Pages CMS works nicely alongside Astro’s content material assortment function. Content material collections make globs of information simply accessible all through Astro, so you’ll be able to hydrate content material inside Astro pages. These globs of information could be from totally different sources, comparable to third-party APIs, however generally as directories of Markdown information. Guess what Pages CMS is absolutely good at? Managing directories of Markdown information!
Content material collections are arrange by a collections configuration file. Take a look at the src/content material.config.ts file within the challenge, right here we’re defining a content material assortment named weblog:
import { glob } from 'astro/loaders';
import { defineCollection, z } from 'astro:content material';
const weblog = defineCollection({
// Load Markdown within the `src/content material/weblog/` listing.
loader: glob({ base: './src/content material/weblog', sample: '**/*.md' }),
// Sort-check frontmatter utilizing a schema
schema: z.object({
title: z.string(),
description: z.string(),
// Rework string to Date object
pubDate: z.coerce.date(),
updatedDate: z.coerce.date().non-obligatory(),
heroImage: z.string().non-obligatory(),
}),
});
export const collections = { weblog };The weblog content material assortment checks the /src/content material/weblog listing for information matching the **/*.md file kind, the Markdown file format. The schema property is non-obligatory, nonetheless, Astro supplies useful type-checking performance with Zod, guaranteeing information saved by Pages CMS works as anticipated in your Astro website.
Pages CMS Configuration
Alright, now that Astro is aware of the place to search for weblog content material, let’s check out the Pages CMS configuration file, .pages.config.yml:
content material:
- title: weblog
label: Weblog
path: src/content material/weblog
filename: '{yr}-{month}-{day}-{fields.title}.md'
kind: assortment
view:
fields: [heroImage, title, pubDate]
fields:
- title: title
label: Title
kind: string
- title: description
label: Description
kind: textual content
- title: pubDate
label: Publication Date
kind: date
choices:
format: MM/dd/yyyy
- title: updatedDate
label: Final Up to date Date
kind: date
choices:
format: MM/dd/yyyy
- title: heroImage
label: Hero Picture
kind: picture
- title: physique
label: Physique
kind: rich-text
- title: site-settings
label: Website Settings
path: src/config/website.json
kind: file
fields:
- title: title
label: Web site title
kind: string
- title: description
label: Web site description
kind: string
description: Will probably be used for any web page with no description.
- title: url
label: Web site URL
kind: string
sample: ^(https?://)?(www.)?[a-zA-Z0-9.-]+.[a-zA-Z]{2,}(/[^s]*)?$
- title: cowl
label: Preview picture
kind: picture
description: Picture used within the social preview on social networks (e.g. Fb, Twitter...)
media:
enter: public/media
output: /mediaThere’s a lot happening in there, however contained in the content material part, let’s zoom in on the weblog object.
- title: weblog
label: Weblog
path: src/content material/weblog
filename: '{yr}-{month}-{day}-{fields.title}.md'
kind: assortment
view:
fields: [heroImage, title, pubDate]
fields:
- title: title
label: Title
kind: string
- title: description
label: Description
kind: textual content
- title: pubDate
label: Publication Date
kind: date
choices:
format: MM/dd/yyyy
- title: updatedDate
label: Final Up to date Date
kind: date
choices:
format: MM/dd/yyyy
- title: heroImage
label: Hero Picture
kind: picture
- title: physique
label: Physique
kind: rich-textWe are able to level Pages CMS to the listing we wish to save Markdown information utilizing the path property, matching it as much as the /src/content material/weblog/ location Astro seems to be for content material.
path: src/content material/weblogFor the filename we are able to present a sample template to make use of when Pages CMS saves the file to the content material assortment listing. On this case, it’s utilizing the file date’s yr, month, and day, in addition to the weblog merchandise’s title, through the use of fields.title to reference the title discipline. The filename could be custom-made in many various methods, to suit your state of affairs.
filename: '{yr}-{month}-{day}-{fields.title}.md'The kind property tells Pages CMS that this can be a assortment of information, relatively than a single editable file (we’ll get to that in a second).
kind: assortmentIn our Astro content material assortment configuration, we outline our weblog assortment with the expectation that the information will comprise just a few bits of meta information comparable to: title, description, pubDate, and some extra properties.
We are able to mirror these necessities in our Pages CMS weblog assortment as fields. Every discipline could be custom-made for the kind of information you’re seeking to gather. Right here, I’ve matched these fields up with the default Markdown frontmatter discovered within the Astro weblog starter.
fields:
- title: title
label: Title
kind: string
- title: description
label: Description
kind: textual content
- title: pubDate
label: Publication Date
kind: date
choices:
format: MM/dd/yyyy
- title: updatedDate
label: Final Up to date Date
kind: date
choices:
format: MM/dd/yyyy
- title: heroImage
label: Hero Picture
kind: picture
- title: physique
label: Physique
kind: rich-textNow, each time we create a brand new weblog merchandise in Pages CMS, we’ll have the ability to fill out every of those fields, matching the anticipated schema for Astro.
Other than collections of content material, Pages CMS additionally enables you to handle editable information, which is beneficial for quite a lot of issues: website broad variables, function flags, and even editable navigations.
Check out the site-settings object, right here we’re setting the kind as file, and the path contains the filename website.json.
- title: site-settings
label: Website Settings
path: src/config/website.json
kind: file
fields:
- title: title
label: Web site title
kind: string
- title: description
label: Web site description
kind: string
description: Will probably be used for any web page with no description.
- title: url
label: Web site URL
kind: string
sample: ^(https?://)?(www.)?[a-zA-Z0-9.-]+.[a-zA-Z]{2,}(/[^s]*)?$
- title: cowl
label: Preview picture
kind: picture
description: Picture used within the social preview on social networks (e.g. Fb, Twitter...)The fields I’ve included are widespread site-wide settings, comparable to the location’s title, description, url, and cowl picture.
Talking of photos, we are able to inform Pages CMS the place to retailer media comparable to photos and video.
media:
enter: public/media
output: /mediaThe enter property explains the place to retailer the information, within the /public/media listing inside our challenge.
The output property is a useful little function that conveniently replaces the file path, particularly for instruments that may require particular configuration. For instance, Astro makes use of Vite underneath the hood, and Vite already is aware of in regards to the public listing and complains if it’s included inside file paths. As an alternative, we are able to set the output property so Pages CMS will solely level picture path places beginning on the internal /media listing as a substitute.
To see what I imply, try the check publish within the src/content material/weblog/ folder:
---
title: 'Check Put up'
description: 'Here's a pattern of some primary Markdown syntax that can be utilized when writing Markdown content material in Astro.'
pubDate: 05/03/2025
heroImage: '/media/blog-placeholder-1.jpg'
---The heroImage now property correctly factors to /media/... as a substitute of /public/media/....
So far as configurations are involved, Pages CMS could be as easy or as complicated as essential. You’ll be able to add as many collections or editable information as wanted, in addition to customise the fields for every kind of content material. This provides you numerous flexibility to create websites!
Connecting to Pages CMS
Now that now we have our Astro website arrange, and a .pages.config.yml file, we are able to join our website to the Pages CMS on-line app. Because the developer who controls the repository, browse to https://app.pagescms.org/ and check in utilizing your GitHub account.
You ought to be offered with some questions on permissions, you might want to decide on between giving entry to all repositories or particular ones. Personally, I selected to solely give entry to a single repository, which on this case is my astro-pages-cms-template repo.
After offering entry to the repo, head on again to the Pages CMS software, the place you’ll see your challenge listed underneath the “Open a Venture” headline.
Clicking the open hyperlink will take you into the web site’s dashboard, the place we’ll have the ability to make updates to our website.
Creating content material
Looking at our website’s dashboard, we’ll see a navigation on the left aspect, with some acquainted issues.
- Weblog is the gathering we arrange contained in the
.pages.config.ymlfile, this might be the place we we are able to add new entries to the weblog. - Website Settings is the editable file we’re utilizing to make adjustments to site-wide variables.
- Media is the place our photos and different content material will reside.
- Settings is a spot the place we’ll have the ability to edit our
.pages.config.ymlfile instantly. - Collaborators permits us to ask people to contribute content material to the location.
We are able to create a brand new weblog publish by clicking the Add Entry button within the prime proper
Right here we are able to fill out all of the fields for our weblog content material, then hit the Save button.
After saving, Pages CMS will create the Markdown file, retailer the file within the correct listing, and robotically commit the adjustments to our repository. That is how Pages CMS helps us handle our content material without having to make use of git instantly.
Robotically deploying
The one factor left to do is ready up automated deployments by the service supplier of your selection. Astro has integrations with suppliers like Netlify, Cloudflare Pages, and Vercel, however could be hosted wherever you’ll be able to run node functions.
Astro is often very quick to construct (due to Vite), so whereas website updates gained’t be immediate, they’ll nonetheless be pretty fast to deploy. In case your website is ready up to make use of Astro’s server-side rendering capabilities, relatively than a totally static website, the adjustments could be a lot sooner to deploy.
Wrapping up
Utilizing a template as reference, we checked out how Astro content material collections work alongside Pages CMS. We additionally discovered the right way to join our challenge repository to the Pages CMS app, and the right way to make content material updates by the dashboard. Lastly, in case you are ready, don’t neglect to arrange an automatic deployment, so content material publishes shortly.
