给那些开始探索 WordPress 以外选项的你的 Netlify CMS

你好,我是李克的小姐。我分享关于苹果相关、网络开发和SaaS的信息。

_prof-header-202206.png

首先

通过与静态网站生成框架(如gatsby, Jekyll, Hugo)以及JavaScript框架(如NextJS, Nuxt)结合使用,Netlify CMS可以创建类似于WordPress的内容管理系统。

给那些感到使用WordPress很痛苦,想要尝试其他平台的人,介绍一个简约且易于操作的CMS。

抱歉
Netlify CMS的功能比WordPress少。
但是,Netlify CMS擅长的领域我们会进行介绍。

WordPress的痛点

WordPress通常需要服务器管理。
必须运营数据库管理和安全防护等方面。

为了维护公平性,我介绍一个最近出现的名为shifter的WordPress静态网站生成服务。这项服务真的非常出色,似乎能够很大程度地解决WordPress的烦恼。

 

不过,我们是工程师。
对于像Hugo、NextJS、Nuxt这样的新框架,我们都想要亲自尝试一下。
因为它们是开源的嘛。不需要得到任何人的批准,只需满足自己的求知欲就可以了。

介绍 Netlify CMS

Netlify CMS与WordPress类似,可以通过Web用户界面进行文章编辑、图片管理和发布等CMS功能,无需拥有服务器或数据库。

 

这真是令人不可思议。
它是通过什么样的机制运行的呢?

Netlify CMS 的机制是什么?

通常我们会编写HTML和Javascript代码,然后使用GitHub来管理源代码,并将其托管到AWS S3、Netlify等平台上。

image.png

Netlify CMS允许您通过WebUI从GitHub上的任意文件夹中编辑和管理任意文件。
您可以首先确定设计模板,然后通过WebUI进行文本和图片的编辑和管理。

即使不了解GitHub的知识,撰写文章的人也可以通过Netlify CMS的用户界面操作来进行Pull Request和Merge等处理。这听起来很方便。

image.png

Netlify CMS 需要更加具体详细些。

假设我们想要写一篇采用下列格式的文章。

---
title: Webページをオープンしました!
date: "2022-06-26"
eyecatch: /images/eyecatch.png
categories:
  - news
slug: "20220626"
draft: false
---

リケイのオコジョに関する最新のニュースをお届けします。
リケイのオコジョはPR記事やイラストのお仕事の依頼を受け付けております。

[お問い合わせ](/contact)のページからご連絡をお願いします。

不需要在服务器或数据库中进行设置,只需放置一个像下面这样的配置文件。

backend:
  name: github
  repo: <YOUR GITHUB REPO>
  branch: main
media_folder: "static/images" # 画像を置くフォルダを指定
public_folder: "public"
publish_mode: editorial_workflow
collections:
  - name: "news"
    label: "news"
    folder: "content/news"    # markdownファイルを置くフォルダを指定
    create: true
    fields:                   # markdownで設定したい項目を書くだけ
      - {label: "Title", name: "title", widget: "string", required: true}
      - {label: "Date", name: "date", widget: "date", required: true}
      - {label: "Eyecatch", name: "eyecatch", widget: "image", required: true}
      - {label: "Categories", name: "categories", widget: "list",default: ["news"], required: true}
      - {label: "Slug", name: "slug", widget: "string", required: true}
      - {label: "Draft", name: "draft", widget: "boolean", default: true}
      - {label: "Body", name: "body", widget: "markdown"}

在这种WebUI生成的情况下,您可以在屏幕上保存或发布,然后将其提交到GitHub存储库中,会出现各种提交和拉取请求。

netlify-cms-editor-ui.png

还有以下这样的工作流用户界面,可以通过拖放方式组装确认/批准的工作流程。

netlify-cms-workflow-ui.png

即使对于那些想尝试使用NextJS或Nuxt编写前端,但对于服务器应用程序或数据库管理来说有困难的人来说,似乎也可以轻松地管理简单的网站。
这个让梦想的空间变得更大了。

总结

如果你开始探索WordPress以外的选项,我向你介绍了Netlify CMS。虽然我认为WordPress本身也会不断发展,但如果你想尝试一些稍微不同的框架,Netlify CMS将使管理更加简单。请务必试试看!

如果你想尝试运行的话,请查看以下文章,其中有关于GitHub和Netlify CMS的设置。

 

请参考

 

广告
将在 10 秒后关闭
bannerAds