序言
在过去，创建一个博客的方式是通过使用一个 CMS（内容管理系统）如 Wordpress，Drupal，或者 Ghost 等等。这些 CMS 通常使用一个“单页面设计”，将所有内容都在服务器端渲染然后返回给浏览器。但是，这种方式有时候会导致用户体验和 SEO 方面的问题。另外，这些 CMS 也会导致网站的维护工作增加，因为服务器需要经常对每个页面进行渲染。
为了建立用户友好的站点，很多开发人员转向了静态站点技术。静态站点技术是指在生成网站时将所有 HTML 文件生成并存储好，并在需要时返回给浏览器。这种方式带来了很多好处，例如减少服务器压力、加快网页载入速度等等。但是，这种方式需要手动编写静态页面，而且更新起来也比较困难。
幸运的是，有一种称为 Headless CMS 的技术可以解决这个问题。Headless CMS 是一种将内容管理和网站设计分离的方式，CMS 不负责与用户交互，只在内容被更新时提供 API 以供站点使用。这样，我们就可以使用静态站点技术生成网站，并使用 APIs 来管理内容。
在这篇文章里，我们将介绍如何使用 Headless CMS 和 Nuxt.js 构建一个静态博客。
技术栈
在介绍如何使用 Headless CMS 和 Nuxt.js 构建静态博客之前，我们需要先了解一下我们使用的技术栈。
- Headless CMS：我们使用 Strapi 这个工具来作为 Headless CMS。
- Nuxt.js：Nuxt.js 是一个基于 Vue.js 的开源应用框架，让开发人员可以使用 Vue.js 开发各种应用程序，包括静态站点。
步骤
步骤一：安装 Strapi
首先，我们需要安装 Strapi。你可以通过以下命令来安装：
npm install strapi@beta -g
安装完成后，我们需要在运行 Strapi 之前配置一个 MongoDB 数据库。使用以下命令来安装和启动 MongoDB：
brew install mongodb brew services start mongodb
在安装完成 MongoDB 后，我们需要创建一个 Strapi 项目。使用以下命令：
strapi new my-project
这样，一个 Strapi 项目就创建好了。
步骤二：创建内容类型
接下来，我们需要创建内容类型。首先，登录 Strapi 管理面板。Strapi 管理面板位于 localhost:1337/admin。如果已经安装了 Strapi，可以通过 strapi start 命令来启动 Strapi 服务器，之后通过浏览器访问（http://localhost:1337/admin）。
在 Strapi 管理面板上，创建一个新的“类别”类型，名称为“categories”。类别包括以下两个字段：
- Title - 类别的名称。
- Description - 类别的描述。
然后，创建一个新的“博客文章”类型，名称为“blog-posts”。博客文章类型包括以下几个字段：
- Title - 文章的标题。
- Content - 文章的正文。
- Slug - URL 的 slug。
- Category - 相关类别。
- Image - 文章的首图。
- Created_at - 文章创建时间。
实现以上要求可以通过管理面板上的“Builder”来轻松配置：
步骤三：在 Nuxt.js 中使用 Strapi
现在，我们已经设置好了 Strapi，接下来需要设置 Nuxt.js 项目来使用 Strapi。
首先，我们需要创建一个新的 Nuxt.js 项目。使用以下命令：
npm install -g vue-cli vue init nuxt-community/starter-template my-project cd my-project npm install
启动本地服务器，使用以下命令：
npm run dev
在 nuxt.config.js 文件中添加一个代理以允许 nuxt 服务访问 Strapi：
-- -------------------- ---- -------
-
-- ---
-------- ------------------
------ -
------ -----
--
------ -
-------- ------------------------
-
-在 home 页面通过指定 axios 的 baseUrl 连接 strapi API，获取到设置的博客类别和文章，代码如下：
-- -------------------- ---- -------
----------
-----
-----------
----
--- --------------- -- ----------- -------------------
-- ------------- --
-----
-----
----
--- ----------- -- ------ ---------------
-- ---------- --
-----
-----
------
-----------
--------
------ ------- -
------ -
-------- -------
--
----- ----------- ------ -- -
----- ---------- - ----- --------------------------
----- ----- - ----- --------------------------
------ - ----------- ----- -
-
-
---------步骤四：部署项目
最后一步是部署我们的项目！可以使用 Netlify 将我们的 Nuxt.js 静态站点部署到云上。
我们可以在 package.json 中添加一个 deploy 脚本：
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"generate": "nuxt generate",
"start": "nuxt start",
"deploy": "npm run build && netlify deploy --prod"
},在 Netlify 中创建一个新的应用，并通过 GitHub 连接应用。之后，将你的 ./dist 目录与 Netlify 进行连接并部署你的应用即可。
结论
在本文中，我们学习了如何使用 Headless CMS 和 Nuxt.js 构建静态博客。我们通过 Strapi 实现了检索相关的库分类和文章信息，并将文章数据显示出来。
使用 Headless CMS 能够让我们专注于内容管理，并提供一个可携带联合CMS的静态博客，同时又能够保持服务器和客户端使用时的速度和稳定性。
Nuxt.js 是一个不错的开源应用框架，创建静态站点特别适合。如果你对第一次使用系统不感兴趣，你也可以用你自己开发的自定义前端库来代替。由于以下以及指导意义，你在学习过程中既可学到如何的如何使用 Nuxt.js 以及其他的在web开发中常用的下单技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f13d216fbf9601973812c7