Buddies, I’ve been on the hunt for a respectable content material administration system for static websites for… effectively, 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 out there, and whereas I’ve examined a number of, none have actually been the one, y’know? Bizarre pricing fashions, tough customization, some even find yourself turning into a entire ‘nother factor to handle.
Additionally, I actually get pleasure from constructing with web site turbines similar to Astro or Eleventy, however pitching Markdown because the technique of managing content material is less-than-ideal for a lot of “non-techie” people.
A number of expectations for content material administration programs would possibly embody:
- Simple to make use of: Crucial characteristic, why you would possibly decide 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 assume 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 similar, so we’ll want to have the ability to make customized fields for various kinds of content material.
Not a really lengthy record of calls for, I’d say; pretty affordable, even. That’s why I used to be completely satisfied 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 a number of the “good components” present in different CMS instruments, and a single configuration file, Pages CMS combines issues right into a smooth person interface.
Pages CMS consists of a number of choices for personalization, you may add media, make editable information, and create complete collections of content material. Additionally, content material can have all kinds of various fields, test the docs for the complete record of supported varieties, in addition to fully 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 offers people the power to handle the content material inside the repo, while not having to really know find out how to use Git, and I feel 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 frequent exterior 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 out there publicly, so be happy to clone and observe alongside.
I’ve been a fan of Astro for some time, and Pages CMS works effectively alongside Astro’s content material assortment characteristic. Content material collections make globs of knowledge simply out there all through Astro, so you may hydrate content material inside Astro pages. These globs of knowledge could be from totally different sources, similar to third-party APIs, however generally as directories of Markdown information. Guess what Pages CMS is de facto 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' }),
// Kind-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().elective(),
heroImage: z.string().elective(),
}),
});
export const collections = { weblog };The weblog content material assortment checks the /src/content material/weblog listing for information matching the **/*.md file sort, the Markdown file format. The schema property is elective, nevertheless, Astro offers useful type-checking performance with Zod, guaranteeing information saved by Pages CMS works as anticipated in your Astro web site.
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:
- identify: weblog
label: Weblog
path: src/content material/weblog
filename: '{12 months}-{month}-{day}-{fields.title}.md'
sort: assortment
view:
fields: [heroImage, title, pubDate]
fields:
- identify: title
label: Title
sort: string
- identify: description
label: Description
sort: textual content
- identify: pubDate
label: Publication Date
sort: date
choices:
format: MM/dd/yyyy
- identify: updatedDate
label: Final Up to date Date
sort: date
choices:
format: MM/dd/yyyy
- identify: heroImage
label: Hero Picture
sort: picture
- identify: physique
label: Physique
sort: rich-text
- identify: site-settings
label: Website Settings
path: src/config/web site.json
sort: file
fields:
- identify: title
label: Web site title
sort: string
- identify: description
label: Web site description
sort: string
description: Will likely be used for any web page with no description.
- identify: url
label: Web site URL
sort: string
sample: ^(https?://)?(www.)?[a-zA-Z0-9.-]+.[a-zA-Z]{2,}(/[^s]*)?$
- identify: cowl
label: Preview picture
sort: 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.
- identify: weblog
label: Weblog
path: src/content material/weblog
filename: '{12 months}-{month}-{day}-{fields.title}.md'
sort: assortment
view:
fields: [heroImage, title, pubDate]
fields:
- identify: title
label: Title
sort: string
- identify: description
label: Description
sort: textual content
- identify: pubDate
label: Publication Date
sort: date
choices:
format: MM/dd/yyyy
- identify: updatedDate
label: Final Up to date Date
sort: date
choices:
format: MM/dd/yyyy
- identify: heroImage
label: Hero Picture
sort: picture
- identify: physique
label: Physique
sort: rich-textWe will 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 appears for content material.
path: src/content material/weblogFor the filename we will 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 12 months, month, and day, in addition to the weblog merchandise’s title, through the use of fields.title to reference the title subject. The filename could be personalized in many alternative methods, to suit your situation.
filename: '{12 months}-{month}-{day}-{fields.title}.md'The sort property tells Pages CMS that this can be a assortment of information, fairly than a single editable file (we’ll get to that in a second).
sort: 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 similar to: title, description, pubDate, and some extra properties.
We will mirror these necessities in our Pages CMS weblog assortment as fields. Every subject could be personalized 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:
- identify: title
label: Title
sort: string
- identify: description
label: Description
sort: textual content
- identify: pubDate
label: Publication Date
sort: date
choices:
format: MM/dd/yyyy
- identify: updatedDate
label: Final Up to date Date
sort: date
choices:
format: MM/dd/yyyy
- identify: heroImage
label: Hero Picture
sort: picture
- identify: physique
label: Physique
sort: 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.
Except for collections of content material, Pages CMS additionally allows you to handle editable information, which is helpful for quite a lot of issues: web site large variables, characteristic flags, and even editable navigations.
Check out the site-settings object, right here we’re setting the sort as file, and the path consists of the filename web site.json.
- identify: site-settings
label: Website Settings
path: src/config/web site.json
sort: file
fields:
- identify: title
label: Web site title
sort: string
- identify: description
label: Web site description
sort: string
description: Will likely be used for any web page with no description.
- identify: url
label: Web site URL
sort: string
sample: ^(https?://)?(www.)?[a-zA-Z0-9.-]+.[a-zA-Z]{2,}(/[^s]*)?$
- identify: cowl
label: Preview picture
sort: picture
description: Picture used within the social preview on social networks (e.g. Fb, Twitter...)The fields I’ve included are frequent site-wide settings, similar to the positioning’s title, description, url, and cowl picture.
Talking of pictures, we will inform Pages CMS the place to retailer media similar to pictures 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 characteristic 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 a substitute, we will set the output property so Pages CMS will solely level picture path areas beginning on the interior /media listing as an alternative.
To see what I imply, take a look at the take a look at put up within the src/content material/weblog/ folder:
---
title: 'Take a look at Publish'
description: 'Here's a pattern of some fundamental 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 an alternative of /public/media/....
So far as configurations are involved, Pages CMS could be as easy or as advanced as needed. You may add as many collections or editable information as wanted, in addition to customise the fields for every sort of content material. This provides you a number of flexibility to create websites!
Connecting to Pages CMS
Now that we’ve got our Astro web site arrange, and a .pages.config.yml file, we will join our web site to the Pages CMS on-line app. Because the developer who controls the repository, browse to https://app.pagescms.org/ and sign up utilizing your GitHub account.
You ought to be offered with some questions on permissions, it’s possible you’ll 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 Undertaking” 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 web site.
Creating content material
Looking at our web site’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 will probably be the place we we will 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 pictures and different content material will stay.
- Settings is a spot the place we’ll have the ability to edit our
.pages.config.ymlfile immediately. - Collaborators permits us to ask people to contribute content material to the positioning.
We will create a brand new weblog put up by clicking the Add Entry button within the prime proper
Right here we will 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 while not having to make use of git immediately.
Mechanically deploying
The one factor left to do is about up automated deployments by the service supplier of your alternative. Astro has integrations with suppliers like Netlify, Cloudflare Pages, and Vercel, however could be hosted wherever you may run node functions.
Astro is usually very quick to construct (due to Vite), so whereas web site updates received’t be immediate, they may nonetheless be pretty fast to deploy. In case your web site is about up to make use of Astro’s server-side rendering capabilities, fairly than a very static web site, the adjustments may be a lot quicker to deploy.
Wrapping up
Utilizing a template as reference, we checked out how Astro content material collections work alongside Pages CMS. We additionally discovered find out how to join our challenge repository to the Pages CMS app, and find out how to make content material updates by the dashboard. Lastly, if you’re in a position, don’t neglect to arrange an automatic deployment, so content material publishes rapidly.
