Topics

What is EmDash?

Cloudflare announced a CMS that it considers the spiritual successor to WordPress.
It's a full-stack CMS using a modern architecture, combining various Cloudflare resources (D1/R2/Workers) with Astro, truly a Cloudflare ecosystem CMS!
Just to see what would happen, I experimentally migrated a blog I had implemented using microCMS to EmDash.

The migrated site is here. → Yurulog
This is just an experimental site, so I'm using the default theme for now. I'll apply a different design later.

Setup process

1. Project Creation

npm create emdash@latestExecute the process. You will be asked various questions interactively, so select the appropriate options.

2. Create Cloudflare resources

Creating databases and storage like this makes deployment easy.

npx wrangler login
npx wrangler d1 create my-site
npx wrangler r2 bucket create my-site-media
npm run build && npm run deploy

3. Local development

npx emdash devThis will start up your local environment.
Management screenhttp://localhost:4321/_emdash/adminAccess [website/link] and perform the setup.

4. Deployment and Initial Setup

npx wrangler deployIt is then deployed to Workers,https://[name].workers.devIt will be released on [platform name].
Because the local and remote databases are independent, initial setup (creation of an administrator account) is required even when using the remote administration screen.

By linking with a GitHub repository, you can also automate deployments with pushes (Cloudflare Dashboard → Workers → Settings → Build → Link with Git Repository).

5. Migrating articles from microCMS

Create a migration script to retrieve all articles from the microCMS API → EmDash CLIcontent createI added it.

point

• Convert microCMS rich editor (HTML) to Markdown and import.
• The images were initially migrated using external URLs, and then later uploaded to R2, where the references were updated.
• npx emdash seedNot  npx emdash content createUse   (because seed does not create revisions, the article will not be displayed)

I actually tried it out

This CMS combines the ease of setup and implementation of a headless CMS with the convenience of end-to-end control of a full-stack CMS, offering the best of both worlds.
Best of all, since it's Astro-based, you can leverage your existing know-how, which is great. It seems like a good fit for small to medium-sized blogs.

However, since it is still in beta,

• The draft preview doesn't work by default (see below).
• Center alignment and right alignment are not reflected in WYSIWYG.
• When editing items in the Menus, relative paths result in an error.
• Custom fields cannot be sorted.
• Unable to invite users

There were a few points of concern, such as those mentioned above (as of v0.1.0).

About draft preview

Although a "Preview draft" button is available on the editing screen, it is not possible to preview articles in draft form.

EmDash has a preview mechanism, but it doesn't seem to be enabled by default, so the following steps were necessary.

1. environmental variables PREVIEW_SECRETSet an arbitrary secret key (npx emdash auth secret(Can be generated with)
2. On the article pageverifyPreviewTokenUse this method to obtain the draft.

import { getEmDashEntry, verifyPreviewToken } from "emdash";

const preview = await verifyPreviewToken({
  url: Astro.url,
  secret: import.meta.env.PREVIEW_SECRET,
});

const { entry, isPreview } = await getEmDashEntry("posts", slug, { preview });

Now you can view your draft articles from the "Preview Draft" button in the admin panel.

summary

This time, I implemented it as a full-stack application as per the basics, but it seems like it could also be used as a "headless CMS" by receiving articles with fetch and building an SSG, so I'd like to try that next time.

It's still a beta version, so I'm really looking forward to seeing how it evolves!