前言
在建设一个现代 Web 应用程序时，我们通常需要一些交互复杂的组件、数据展示、后端 API 等。但在很多情况下，我们所需的仅仅是一个简单的静态站点。为了实现这样的目标，我们可以使用一些现代的工具和框架来构建一个符合需求的静态站点。
本文将介绍一种使用 Headless CMS 构建支持 Google AMP 的网站的方法，这是一种非常简便和高效的建站方式，它可以帮助我们快速地搭建一个符合需求的静态网站。
什么是 Headless CMS？
首先，我们需要了解什么是 Headless CMS。常规的 CMS ，比如 WordPress，Joomla等，在设计时考虑了组件、模板等一整套的构建思路。但 Headless CMS 则将 CMS 系统本身从模板/视图的角度大幅度解构，只提供 API 和数据存储功能。这样，可以用于任何 Web 应用程序之上，其数据能够被任何需要这些数据的客户端所访问到。
构建支持 Google AMP 的网站
AMP，全称 Accelerated Mobile Pages ，是 Google 发起的一个项目，目的是让传统的网页更加快捷和优化，在移动端能够更加高效地加载和显示。
在同一时间内，使用 Headless CMS 的站点和使用 WordPress 等传统 CMS 的站点类似。但是，将数据和内容存储在远程服务器上通常可以带来更好的可维护性和可扩展性。
这里我们使用 Strapi 这个 Headless CMS 内容管理框架，其操作非常简单，包含一个 Web 界面、GraphQL API 以及 REST API。同时，支持代回调函数，例如内容发布时将信息推送到 Slack。
使用 Strapi
首先，我们需要安装 Strapi。它可以通过 npx 全局安装，在命令行中输入如下命令：
npx create-strapi-app my-project --quickstart
创建完成前，系统会提示选择数据库，默认是使用 SQLite。我们这里选择 MongoDB。
安装完成后，运行下面的命令启动 Strapi：
npm run develop
在代码中，我们可以通过以下方式访问 Strapi 内容：
-- -------------------- ---- -------
------ ----- ---- -------
----- -------- - ----- -- -- -
--- -
----- ----- - ----- ----------------------------------------
------ ----------
- ----- --- -
--------------
------ ----
-
-支持 Google AMP
如果你想让你的站点支持 Google AMP ，则没有比 ampproject.org 更好的指导了。首先，你需要在你的网站根目录下添加一个名为 amp.html 的文件。在此文件中，我们需要添加一些依赖：
-- -------------------- ---- -------
---- --------------------
--------- -----
----- --- ----------
------
----- ----------------
---- ------------ ---
------------- -------------
----- --------------- ------------------------
---- -------- ---
------- ----- ------------------------------------------------
----- --------------------------------------------------------------------- -----------------
------ -----------
---- -
------------ ----- ------
-
-- -
------ --------
-
--------
---- ----- ---
----- --------------- -------------------------------------------------------------
------- ----- ------------------------------ ------------------------------------------------------------------
-------
------
---- ----- -------- --- ---
--------- ------ ---- ---------
-------- -- ------- --- ---------
-------------- --------------------------------------------------
----------------
-------
-------结论
在本文中，我们介绍了一种使用 Headless CMS 构建支持 Google AMP 的网站的方法。Strapi 提供的 API 和数据存储功能让我们可以将数据存储在远程服务器上，实现更好的可维护性和可扩展性。同时，Google AMP 则使站点在移动端能够更加高效地加载和显示。如果你正在考虑创建一个简单的静态站点，建议使用本文中介绍的方法来实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677122e26d66e0f9aacc1005