在当今的数字环境中，创建一个既经济实惠又易于维护的内容管理系统（CMS）可能会很困难，特别是当你的预算有限时。

本教程将向你展示一种利用 Google Sheets 作为临时数据库，并用 React 构建前端的解决方案，从而让你有效地绕过对专用服务器或传统数据库系统的需求。

这种方法不仅减少了与 Web 开发相关的开销成本，还简化了内容更新和管理。如果你想在没有大量投资的情况下启动自己的简单 CMS，这是一个理想的解决方案。

这种解决方案适用于职业初期的自由职业者和那些无法在网站上投入大量资金的客户。

为什么选择 Google Sheets？

选择 Google Sheets 作为你的 CMS 的基础，归结于它的简单性、灵活性和成本效益。

传统的网页开发需要一个后端服务器来处理数据，一个数据库来存储信息，以及一个前端来显示内容。但每一层都增加了复杂性和成本。

而 Google Sheets 作为一个高度可访问且直观的界面，消除了对服务器和数据库的需求。它让你的用户能够实时更新内容，就像任何 CMS 一样，但没有通常的设置和维护成本。这使它成为个人、小型企业或任何希望以最低成本快速部署 Web 应用程序的人的最佳选择。

开始

在深入代码之前，确保你在系统上已经安装了 Node.js 和 npm。这些工具将允许我们创建一个 React 应用并管理其依赖。

现在让我们从 Google Sheets 开始。

第一步：设置你的 Google Sheets

1. 进入你的 Google Sheets
2. 打开你想使用的表格或创建一个新表格
3. 点击菜单中的 扩展
4. 然后点击 Apps Script

在 Apps Script 编辑器中，你可以编写脚本，将其作为你的 endpoint。以下是一个将 Google Sheet 内容以 JSON 格式返回的脚本：

function convertRangeToJson(data) {
  var jsonArray = [];

  // 检查数据是否为空或没有足够的行用于标题和至少一行数据
  if (!data || data.length < 2) {
    // 根据需要返回空数组或有意义的信息
    return jsonArray; // 或者返回 'No data available';
  }

  var headers = data[0];
  for (var i = 1, length = data.length; i < length; i++) {
    var row = data[i];
    var record = {};

    for (var j = 0; j < row.length; j++) {
      record[headers[j]] = row[j];
    }

    jsonArray.push(record);
  }

  return jsonArray;
}

然后：

1. 点击 文件 > 保存，并为你的项目命名
2. 点击 部署 > 新建部署
3. 点击 选择类型 并选择 Web 应用
4. 填写你的部署详细信息。在 执行身份 下，选择脚本应作为你的帐户执行还是作为访问网页应用的用户执行。在 有访问权限的人员 下，选择谁可以访问你的网页应用。
5. 点击 部署

你可能会被要求授权脚本访问你的 Google Sheets。按照提示操作。

部署后，你将获得一个用于 Web 应用的网址。这是你的 API endpoint。

为了让你了解目前的进展，以下是你的表格结构：

这是你调用 endpoint 时得到的 JSON：

第二步：创建你的 React 应用

准备好 Google Sheets API 后，是时候创建一个 React 应用了，这个应用将获取并显示这些数据。

首先，创建一个 React 应用。在你的终端中运行以下命令来创建一个新的 React 应用：

npx create-react-app google-sheets-cards
cd google-sheets-cards
npm start

你也可以使用现代构建工具如 Vite 来实现这个目的，因为 CRA 已不再是构建 React 应用的推荐方式。

接下来，创建卡片组件。在 src 目录下，创建一个名为 Card.js 的文件。这个组件将负责显示每个数据记录：

// src/Card.js
function Card({ title, content }) {
  return (
    <div className="card">
      <h1>{title}</h1>
      <p>{content}</p>
    </div>
  );
}

export default Card;

现在是时候在 App.js 中获取并显示你的数据了。修改 App.js 文件，包含从你的 Google Sheets API 获取数据的逻辑，并使用 Card 组件来显示这些数据：

// src/App.js
import React, { useEffect, useState } from 'react';
import Card from './Card';
import './App.css'; // 确保在 App.css 中创建一些基本的卡片样式

useEffect(() => {
    fetch('YOUR_ENDPOINT_URL') // 用你的实际 endpoint URL 替换
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  return (
    <div className="App">
      <h1>Data from Google Sheets</h1>
      <div className="cards-container">
        {data.map((item, index) => (
          <Card key={index} title={item.Title} content={item.Content} />
        ))}
      </div>
    </div>
  );
}

export default App;

接下来，你可以为卡片添加样式。在 App.css 中添加以下 CSS 进行基础卡片样式设计：

.card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  margin: 10px;
  padding: 10px;
  display: inline-block;
  background: #f9f9f9;
}

.cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

第三步：运行你的 React 应用

设置完毕后，你现在可以运行你的 React 应用，并在浏览器中查看来自 Google Sheets 的数据。按以下步骤操作：

首先，启动 React 应用。在终端中，导航到你的 React 应用的根目录（如果你尚未在该目录）。运行以下命令以启动开发服务器：

npm start

该命令会编译你的 React 应用并在你的默认 Web 浏览器中打开。你应该会看到一个标题为 “Data from Google Sheets” 的网页，下面是一系列卡片，每个卡片显示从你的 Google Sheets 数据获取的标题和内容。

实际上，我们得到了以下结果：

现在你可以查看你的数据。页面上的每个卡片对应于 Google Sheets 中的一行，标题和内容字段按照你的 Card 组件规定显示。如果你对 Google Sheets 数据进行了任何更新，可以刷新网页以立即查看更改。

你可以将你的 React 应用部署到网上的众多服务之一，如 Github Actions 或 Netlify。这是一种简单高效的方法，以显著的性能免费托管你的前端应用。

总结

恭喜你！你已经创建了一个动态 Web 应用，能从 Google Sheets 获取数据并用 React 显示。

这种方法提供了一种灵活、简单的方式来管理应用的内容，无需后端服务器或数据库。

Google Sheets 作为管理数据的一个可访问和协作的工具，而 React 允许你构建响应式和交互式用户界面。两者结合提供了一个强大的方案，用于创建可以快速更新和轻松维护的 Web 应用。

WordPress、Shopify和Ghost是最强大和最流行的CMS平台。

你可能想知道为什么这么多人使用它们。嗯，这是因为它们易于使用，成本效益高，而且效率高。

使用WordPress、Shopify和Ghost，你可以在几分钟内从头开始创建一个网站。

根据你的需要，这些强大的网站建设工具可以帮助你实现创建电商网站、创建你自己的博客或展示你的作品集的任何目标。

有很多企业选择这些平台。但你应该选择哪一个？

我们不能简单地说，一个比另一个好，因为没有一个解决方案能在所有情况下发挥作用。

因此，在这篇文章中，我们将介绍这三个平台，并看看它们的优点和缺点，以便你能弄清楚什么会对你的特定情况最有效。

如果你想从头开始建立一个博客——使用Ghost

如果你是一个正在寻找开源平台的博主，Ghost可能是你的完美选择。

它是开源的，使你能够改变平台的代码，对其进行定制，使其更适合你的写作需要。

即使你不是一个程序员，你也可以从其他用户那里得到帮助，他们愿意通过修复错误或增加新功能来为社区做出贡献。

网上有关于如何在自己的服务器上安装Ghost的教程。你也可以选择使用托管计划，这允许你使用其他用户创建的主题，而不是依赖默认主题。

Ghost是一个基于Node.js的平台，它使用Node.js服务器运行。它有一个丰富的插件系统，允许你定制你的博客以满足你自己的需求。

Ghost让你使用Markdown而不是HTML进行写作，这使你很容易直接在浏览器窗口中写作。

如果你不了解Markdown，它是一种轻量级的标记语言，允许你用富文本写作，但代码更简单，与HTML相对应。

事实上，与其他平台相比，Ghost的好处之一是你的文章是用Markdown写的，而不是HTML或文本文件，这让代码更简洁。

你可以将Ghost作为一个无头CMS使用

Ghost有一个灵活的架构，这意味着它可以作为一个无头CMS使用。事实上，它是JAMStack中最受欢迎的无头内容管理系统之一。

一个无头CMS允许你建立一个前端网站或应用程序，如一个移动应用程序，有一个调用CMS的数据的API。你可以将API和你的网站或应用程序部署到不同的服务器或环境中，而不必改变你内容中的任何东西。

由于API从CMS提供数据，你将完全控制这些数据，包括权限、标签和类别。如果你需要对你的内容进行修改，你将只需要在一端进行修改，而不是在两端。

无头CMS通常用于使用AngularJS和React.js等JavaScript框架构建网站和应用程序。然而，如果你需要用一个API调用来渲染一个有多个页面的动态网站，这种类型的CMS也是有益的。

要使用无头CMS，你需要学习它的工作原理，以及如何通过其API来利用它。这可能需要额外的开发资源，这取决于你的技能水平。

这种方法在初创企业和机构中越来越受欢迎，他们希望对内容的显示有更多的控制，同时仍然保留通过中央界面（central interface）进行更新的能力。

使用Ghost的优势

Ghost是一个免费的、易于使用的CMS，不需要任何的编码技能。

除了简单之外，Ghost CMS还具有很多开箱即用的功能，这使它对博主和小企业非常有吸引力。

你可以添加多个作者，设置合作写作，跟踪分析，创建投票，客户支持论坛，管理模板，以及更多使用拖放功能的功能。

当你开始在Ghost上使用第三方应用程序时，事情变得很有趣。有许多集成可用于安装谷歌分析和Discuz评论等应用程序。

其他一些优点包括：

• 它有一个干净、简约的设计。如果你想让你的博客变得漂亮，那么Ghost CMS就很适合。
• 完整的工具。你可以得到创建博客所需的所有工具，从安装开始到用拖放功能设置主题。
• 可定制的主题。主题可以使用内置的主题编辑器进行定制，这使得任何人都可以根据自己的需要修改它们。
• Ghost社区。如果你被卡住了，你可以通过翻阅Ghost的论坛和提问，从其他Ghost用户那里找到帮助。

如果你想让你的网站更上一层楼——使用WordPress

你可以使用WordPress作为一个简单的博客平台，但它也是一个功能齐全的内容管理系统（CMS）。如果你想让你的业务更上一层楼，它允许你建立定制网站和博客。

由于其受欢迎程度，有一个活跃的支持社区和大量的免费培训材料。

基本功能和更高级功能的教程在网上广泛提供。

WordPress是免费的，但如果你需要帮助安装它或根据你的需要定制它，你可以从一个有信誉的公司购买虚拟主机。托管费用因你选择的托管服务类型而异。

你可以自己安装WordPress或付钱给别人帮你做。WordPress网站提供了如何在不同的服务器平台上安装该软件的说明。

一旦安装在你的服务器上，WordPress将允许你创建你自己的博客页面。通过使用主题，你可以完全控制你的网站的外观和感觉，这些主题是为你的页面布局预先建立的设计。

主题可以从WordPress网站购买或免费下载。如果你愿意挑战自己，你也可以设计你自己的自定义主题。

你可能想要一个比基本WordPress安装所提供的更复杂的网站。在这种情况下，你可以雇用一个设计师为你创建一个定制的主题，或者使用一个现有的主题作为框架，并通过插件添加你自己的定制功能。插件通过特殊的设计元素和编程功能来扩展主题的功能。

使用WordPress的优势

到目前为止，WordPress是这个列表中最可定制的选项。它具有最全面的主题和插件库，允许你很容易地编辑源代码，甚至可以编写你自己的自定义功能。

你可以把WordPress看作是介于Ghost和Shopify之间的CMS，因为它允许你通过简单地安装一个兼容的主题来同时运行一个电子商务商店和一个博客。

WordPress让你的博客更上一个水平，并随着你的业务增长而扩展你的电子商务商店。

缺点是，你迟早会需要一个开发人员的帮助。这是因为你安装的插件越多，你的网站就越慢，而用户讨厌慢的网站（更不用说搜索引擎）。

其他一些优点包括：

• 极度便宜，可以开始使用。你可以免费建立和运行一个WordPress网站，基本的托管计划每年低至18.96美元。
• 能够分配用户角色。在你的业务增长周期的某个时候，你可能需要引入额外的人帮助你创建、编辑和发布内容。WordPress带有内置的用户角色，这将使你的生活变得更加容易。
• 市场上最好的营销插件。你可以安装插件目录中的许多SEO插件之一。一些例子包括Yoast或Rank Math。这些插件帮助你优化你的内容（如文章、页面甚至产品页面），并增加你超过竞争对手的机会。
• 大量的集成。你有可能会使用第三方SaaS产品，如Mailchimp或ActiveCampaign。不管是哪种服务，你会发现将它们与你的网站整合起来非常容易，因为几乎所有的服务都创建了一个WordPress插件。
• 最大的在线资源库。到目前为止，WordPress社区是最大的，这使得你很容易找到关于你安装的所有问题的答案。有数以万计的网站和论坛只专注于WordPress网站，有大量的信息。

如果你想以最快的方式开展电子商务业务——使用Shopify

Shopify于2006年作为一个滑雪板设备的网上商店开始。那时，CMS生态系统缺乏一个强大的、易于使用的解决方案，所以Shopify的创建者们决定自己编程实现。

不用说，这很受欢迎。在随后的几年里，越来越多的商店开始使用Shopify CMS。截至2021年5月，来自约175个国家的170多万企业使用Shopify来经营他们的业务。

到目前为止，Shopify是启动电子商务业务的最简单和最快速的方式，主要用于非技术人员，他们想把他们的实体店带到网上。在不超过几分钟的时间内，你就可以建立和运行自己的网站，并开始接受在线支付。

但Shopify也被互联网上一些最大的网店所使用，这使得它成为一个很好的选择。如果你想将你的业务扩展到一个新的水平，并有资金这样做，可以选择它。

Shopify的一些优势：

• 极易上手。该内容管理系统是在考虑到易于使用的情况下建立的。任何人都可以在短时间内创建和运行一个商店。你不需要知道如何编码，甚至不需要知道如何将域名连接到你的网站，因为Shopify为你做这一切。
• 与大多数主要的第三方服务兼容。Shopify开箱即与最大的第三方服务连接，如Klaviyo的电子邮件营销或Facebook Ads的付费广告。
• 应用商店里有大量的应用程序。如果你觉得你的商店需要额外的功能，例如捆绑折扣，你会很高兴听到有大量的应用程序可以帮助你实现这个目标。只是要小心，看看他们的成本，因为成本可能会上升得很快。

Shopify的一些劣势：

• 可以变得相当昂贵。Shopify非常容易上手，但这也是有代价的。最便宜的计划（基本）是每月29美元起，而最贵的计划（高级）每月达到299美元。主要的区别是Shopify在付款时应用的佣金。
• 高支付费用。你必须考虑到，Shopify对你的交易收取高达2%的费用（在基本计划中）。这种佣金随着计划的减少而减少，最低为0.5%（在高级计划中）。相比之下，WooCommerce不会对你的销售额收取一定比例的费用。
• Shopify的开发人员是昂贵的。如果你想在基本功能之外定制你的商店，你将需要一个开发人员的帮助，而他们并不便宜。然而，有大量的应用程序可以帮助你实现你的目标。
• 大多数Shopify应用程序都有月费。你可以在应用商店里找到免费的应用程序，但它们中的大多数都按月收费（相比之下，绝大多数WordPress的插件都是一次性收取固定费用）。
• 博客的功能不是很好。Shopify是一个以电子商务为中心的平台，所以难怪他们没有花太多的时间来优化他们的博客功能。大商店选择在WordPress上托管他们的博客，而将他们的店面保留在Shopify上。

总之，你可以用Ghost几乎立即开始你的博客，或者用Shopify配置一个快速和安全的网上商店。而且，如果你想获得两个结合的最佳效果，你可能想用WordPress。

终极WordPress指南是一个免费资源，将帮助你了解基础知识，并帮助你在短时间内启动你的新网站，所以在你做出选择特定平台的重大决定之前，一定要阅读它。