How to Make a Simple CMS With Cloudflare, GitHub Actions and Metalsmith

This article describes how to build a lightweight CMS system based on GitHub, GitHub Actions and Metalsmith. Without building complex UIs, we will use GitHub itself as a content management interface. GitHub will be responsible for content management, version control, and file storage, and serve as a content editing platform. After content editing is complete, a series of automated processes will be tested, verified and eventually deployed to Cloudflare.

The complete code is available on GitHub. My own website jonpauluritis.com also runs in this way.

Technology stack

This article will use the following technology stack:

• Any Markdown editor (optional, e.g. Typora.io)
• Static website generators (such as Metalsmith)
• GitHub and GitHub Actions (CI/CD and Deployment)
• Cloudflare Workers

Why choose this plan? Because it is probably the streamlined, fastest, cheapest (about $5 a month) and easiest way to manage a website (or Jamstack website). It's excellent from a technical point of view and a user experience point of view. This plan is amazing, I even bought stocks in Microsoft and Cloudflare for this.

Before you begin

I won't go into details about the account settings for these services, I believe you can do it yourself. You need to set up the following account:

• GitHub (Register GitHub Actions)
• Cloudflare Workers Sites ($5 per month)

I also recommend using Typora, which provides an excellent Markdown writing experience, but the Markdown editor is a very private option, please choose the editor you find suitable.

Project structure

To give you an idea of ​​the end goal, here is the structure of the complete project:

 <code>├── build.js ├── .github/workflows │  ├── deploy.yml │  └── nodejs.js ├── layouts │  ├── about.hbs │  ├── article.hbs │  ├── index.hbs │  └── partials │    └── navigation.hbs ├── package-lock.json ├── package.json ├── public ├── src │  ├── about.md │  ├── articles │  │  ├── post1.md │  │  └── post2.md │  └── index.md ├── workers-site └── wrangler.toml</code>

Step 1: Command line operation

In the terminal, switch to the directory where you store such projects and enter the following command:

 <code>$ mkdir cms && cd cms && npm init -y</code>

This will create a new directory, go to that directory, and initialize the use of npm.

Next, we will simplify the work by utilizing some npm packages, with the core being the static website generator Metalsmith:

 <code>$ npm install --save-dev metalsmith metalsmith-markdown metalsmith-layouts metalsmith-collections metalsmith-permalinks handlebars jstransformer-handlebars</code>

Apart from Metalsmith, there are some other useful tools. Why choose Metalsmith? We'll discuss it later.

Step 2: Metalsmith

I've tried static website generators for 2-3 years, but I still haven't found the "most ideal". All the large names—such as Eleventy, Gatsby, Hugo, Jekyll, Hexo, and Vuepress—are very powerful, but I can't ignore the simplicity and scalability of Metalsmith.

For example, this code can actually build a website:

 <code>// EXAMPLE... NOT WHAT WE ARE USING FOR THIS TUTORIAL Metalsmith(__dirname)      .source('src')     .destination('dest')    .use(markdown())        .use(layouts())       .build((err) => if (err) throw err);</code>

Very cool, right?

For brevity, enter the following command in the terminal and we will build some initial structure and files:

First, create the directory:

 <code>$ mkdir -p src/articles && mkdir -p layouts/partials</code>

Then, create the build file:

 <code>$ touch build.js</code>

Next, we will create some layout files:

 <code>$ touch layouts/index.hbs && touch layouts/about.hbs && touch layouts/article.hbs && touch layouts/partials/navigation.hbt</code>

Finally, we will set up the content resources:

 <code>$ touch src/index.md && touch src/about.md && touch src/articles/post1.md && touch src/articles/post1.md touch src/articles/post2.md</code>

The project folder should look like this:

 <code>├── build.js ├── layouts │  ├── about.hbs │  ├── article.hbs │  ├── index.hbs │  └── partials │    └── navigation.hbs ├── package-lock.json ├── package.json └── src  ├── about.md  ├── articles  │  ├── post1.md  │  └── post2.md  └── index.md</code>

Step 3: Add code

To save space (and time), you can create content for our virtual website using the following commands. You can go to the “articles” directory and create your own blog posts as you like. The point is that the article requires some metadata (also known as "prefixed content") to be generated correctly. The files you need to edit are index.md, post1.md, and post2.md.

The metadata should look like this:

 <code>--- title: 'Post1' layout: article.hbs --- ## Post content here....</code>

Or, if you're as lazy as I do, you can add mock content from GitHub Gists to your website using these terminal commands:

 <code>$ curl https://gist.githubusercontent.com/jppope/35dd682f962e311241d2f502e3d8fa25/raw/ec9991fb2d5d2c2095ea9d9161f33290e7d9bb9e/index.md > src/index.md $ curl https://gist.githubusercontent.com/jppope/2f6b3a602a3654b334c4d8df047db846/raw/88d90cec62be6ad0b3ee113ad0e1179dfbbb132b/about.md > src/about.md $ curl https://gist.githubusercontent.com/jppope/98a31761a9e086604897e115548829c4/raw/6fc1a538e62c237f5de01a926865568926f545e1/post1.md > src/articles/post1.md $ curl https://gist.githubusercontent.com/jppope/b686802621853a94a8a7695eb2bc4c84/raw/9dc07085d56953a718aeca40a3f71319d14410e7/post2.md > src/articles/post2.md</code>

Next, we will create layouts and local layouts ("partials"). In this tutorial, we will use Handlebars.js as the template engine, but you can use any template engine you like. Metalsmith works with almost all template engines, and I don't have a strong preference for template engines.

(The following steps are consistent with the original text, and the length is too long. To avoid duplication, the remaining content of Step 3 and subsequent steps are omitted here. Please refer to the original text to continue learning.)

The above is the detailed content of How to Make a Simple CMS With Cloudflare, GitHub Actions and Metalsmith. For more information, please follow other related articles on the PHP Chinese website!