超级会员免费看
使用 Nuxt.js 和 Storyblok 创建独立网站并自动化部署
1. 添加新功能
在完成一系列步骤后，你可以尝试为你的作品集添加更多功能，例如格式美观的联系信息表，或者易于管理的简历部分。凭借已有的基础，你应该能够自行实现这些功能。
2. 生成独立网站
现在我们有了一个功能齐全的作品集网站。这种类型的网站内容非常静态，它不会根据访问者的不同而改变，并且代码可能不会每天更新。这意味着我们可以优化要部署到公共网络的输出内容。
我们创建的作品集是静态网站生成的理想用例。通常情况下，Nuxt 会作为一个活跃的进程在服务器上运行，它可以直接响应请求并实时获取数据，比如之前构建的测验服务器。但在发布时我们不需要实时数据，因此可以利用 Nuxt 的另一个功能。当生成静态网站时，Nuxt 最初会作为一个应用程序运行，并对所有内部链接进行索引。对于每个内部链接，它会从服务器获取一次数据，然后将输出写入静态文件集合。
以下是具体操作步骤：
1. 我们需要稍微修改
package.json
中的脚本，以便传递访问数据所需的 API 密钥：
"scripts": {
"build": "nuxt build",
"dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 nuxt dev --dotenv .env --https --ssl-cert localhost.pem --ssl-key localhost-key.pem",
"generate": "nuxt generate --dotenv .env",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
}
- 在终端中运行以下命令：
npm run generate
运行该命令后，你会看到正在生成静态网站所需的文件。完成后，Nuxt 生成过程会返回一个命令，用于将网站作为静态网站进行测试：
npx serve .output/public
运行这个命令将启动一个简单的 HTTP 网络服务器，此时没有 Nuxt 进程在运行，只是浏览器在运行 HTML、CSS 和 JavaScript 文件。来自内容管理系统（CMS）的所有内容现在都已打包到网站中，不过图像除外，它们由 Storyblok CDN 提供服务，该 CDN 针对此用途进行了优化。
3. 发布静态网站
任何网络主机现在都能够提供这些静态文件，这是静态生成网站的好处之一，在托管方面有很大的自由度。不过，我们有一些后续要求，因此选择 Netlify（https://app.netlify.com/）来满足我们的需求。如果你注册，应该可以免费使用其免费套餐。注册时，选择最适合你的类别并为你的团队取一个名称。
接下来，我们使用 Netlify Drop 方式进行部署：
1. 选择 “Try Netlify Drop”，这会将你重定向到一个拖放空间，你可以将项目的
./output/public
文件夹中的输出文件直接拖放到这里。请确保拖放的是
public
文件夹，而不是单独的内容。
2. 完成上传后，你将首次进入仪表盘。点击 “Open production deploy” 按钮，你将进入已发布的作品集网站。子域名由 Netlify 生成，包含随机字词，你可以通过 “Domain management” 部分进行更改。
Netlify 的免费套餐提供处理域名的功能，你可以将自己的域名指向这个空间。
静态生成网站的缺点是，我们部署的网站与内容和 Nuxt 服务器完全分离。这意味着如果我们更新内容或更改代码中的功能，需要重新生成网站并手动将输出上传到 Netlify，虽然可行但并不理想。幸运的是，通过一些额外的努力和配置，我们可以在内容或代码发生更改时自动进行部署。
4. 代码更改时自动构建和部署
Netlify 环境并不了解我们的应用程序，它只是一个用于部署 Web 应用程序的工具，我们无法将 Netlify 直接连接到本地开发环境，因此需要将源代码也托管到在线平台。
GitHub（https://github.com/）与 Netlify 有很好的集成，非常适合托管和管理代码版本。简单来说，GitHub 可以检测到仓库中的代码何时更新，并在发生这种情况时触发某些操作。
以下是具体的操作步骤：
1.
创建新的 GitHub 仓库
：在 GitHub 上创建一个新的空仓库。
2.
将代码关联到仓库
：使用终端执行以下命令将代码推送到 GitHub：
git init
git branch -m master main
git remote add origin https://github.com/{YOUR_USERNAME}/{REPOSITORY_NAME}.git
git add .
git commit -am "published source to git"
git push -u origin main
-
连接 Netlify 和 GitHub 仓库
：
- 在 Netlify 仪表盘上，导航到 “Site Configuration | Build & Deploy”，点击 “Link repository” 按钮。
- 授权 Netlify 访问你的 GitHub 账户。完成后，你将看到你的仓库列表，选择刚刚创建的作品集仓库继续。
-
修改 Netlify 部署设置
：
-
将 “Build command” 更改为
npm run generate。 -
将 “Publish directory” 更改为
./output/public。 -
添加环境变量，将
.env文件的内容添加进去，键为NUXT_STORYBLOK_ACCESS_TOKEN，值为你的访问令牌，并确保保存设置。
-
将 “Build command” 更改为
部署后，Netlify 会从仓库读取代码，在代码发生更改时自动拉取最新版本。然后，它会在虚拟环境中运行
npm run generate
脚本进行静态网站渲染，最后将输出文件夹的内容部署到网站域名。
需要注意的是，由于我们的应用程序没有运行测试，因此没有验证代码是否功能正常。最好确保代码的关键功能能够正常工作。
5. 内容更改时自动构建
如果我们能在内容更改时也实现类似代码更改时的自动化操作就好了。幸运的是，有一种非常方便的方法可以实现这一点，即使用 Webhook 触发操作。Storyblok 会跟踪内容何时准备好发布，并可以在 Netlify 平台上触发一个操作，就像代码更改时一样执行构建。不过这次，Nuxt 在生成过程中会获取内容的最新版本。
以下是设置步骤：
1.
在 Netlify 中创建 Webhook
：
- 导航到 “Site configuration”，然后在 “Build & Deploy” 下找到 “Build hooks” 部分。
- 点击 “Add build hook” 按钮，为其取一个有意义的名称，例如 “Deploy on Content Change”。设置默认构建主分支，保存后，你将获得一个唯一的 URL，格式类似于
https://api.netlify.com/build_hooks/UNIQUE_IDENTIFIER
。
2.
在 Storyblok 中配置调用 Webhook
：
- 导航到 “Settings” 和 “Webhook” 部分，管理 Webhook。
- 创建一个新的 Webhook，同样取一个有意义的名称。
- 在 “Endpoint URL” 区域粘贴从 Netlify 获得的端点。
3.
选择触发事件
：
- 触发器决定了我们希望在哪些事件上调用 Webhook。建议尽量选择较少的触发器，因为每次构建过程都需要时间，连续调用 Webhook 会使请求排入队列，导致你的更改需要更长时间才能显示出来。
保存这些设置后，更改作品集的一些内容。如果你没有运行 Nuxt 开发服务器，仍然可以使用右侧面板编辑内容，甚至可以使用 “Show form view” 按钮将其扩展以填满屏幕。保存后，你可以在 Netlify 仪表盘的 “Deploys” 部分看到它触发了一个新的构建。
通过将不同的平台和系统连接起来，我们创建了一个可以渲染静态网站的单一应用程序。我们可以结合许多专业解决方案的优势来构建一个强大的可部署产品。Storyblok 的实时预览和使用 Nuxt 作为框架的开发体验，使得这类项目非常容易上手和构建。同时，我们也看到 Nuxt 并不总是需要作为服务器运行，它可以一次性从服务器生成数据并存储输出，这种方法比实时数据获取更可持续，性能也更好。
此外，我们创建的平台可以记录你在学习过程中的历程，建议用你自豪的项目或成就完善这个作品集。在实际开发中，代码往往是实用的，可能并不总是完美优化的，但这些示例有效地实现了预期目标。随着对项目的深入了解，你会自然地确定哪些方面需要优化。
总之，希望你为自己在不同主题、技术和应用程序开发中所付出的努力感到自豪，通过这个过程，你的 Vue.js 知识和经验也得到了不断提升。
使用 Nuxt.js 和 Storyblok 创建独立网站并自动化部署
6. 技术总结与回顾
在整个创建独立网站并实现自动化部署的过程中，我们运用了多种技术和工具，以下是对这些技术的总结：
| 技术/工具 | 作用 | 相关操作 |
|---|---|---|
| Nuxt.js | 用于构建静态网站，提供了服务器端渲染、路由管理等功能 |
修改
package.json
脚本，运行
npm run generate
生成静态文件
|
| Storyblok | 内容管理系统，提供网站所需的内容 | 配置 Webhook 实现内容更新时自动构建 |
| Netlify | 用于部署静态网站，支持域名管理和自动化部署 | 通过 Netlify Drop 部署，连接 GitHub 仓库实现代码更改自动部署 |
| GitHub | 代码托管平台，与 Netlify 集成实现版本控制和自动化部署 | 创建仓库，将代码推送到 GitHub，连接 Netlify 仓库 |
下面是整个流程的 mermaid 流程图：
graph LR
classDef startend fill:#F5EBFF,stroke:#BE8FED,stroke-width:2px;
classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px;
classDef decision fill:#FFF6CC,stroke:#FFBC52,stroke-width:2px;
A([开始]):::startend --> B(添加新功能):::process
B --> C(生成独立网站):::process
C --> D(修改 package.json 脚本):::process
D --> E(运行 npm run generate):::process
E --> F(测试静态网站):::process
F --> G(发布静态网站):::process
G --> H(注册 Netlify):::process
H --> I(使用 Netlify Drop 部署):::process
I --> J(连接 GitHub 仓库):::process
J --> K(修改 Netlify 部署设置):::process
K --> L(代码更改自动部署):::process
C --> M(内容更改自动构建):::process
M --> N(在 Netlify 创建 Webhook):::process
N --> O(在 Storyblok 配置 Webhook):::process
O --> P(选择触发事件):::process
P --> Q(保存设置并测试):::process
Q --> R([结束]):::startend
7. 实际应用与拓展
我们创建的静态网站和自动化部署方案具有广泛的实际应用场景，以下是一些拓展思路：
- 个人作品集 ：展示个人的项目经验、技能和成就，吸引潜在的雇主或合作伙伴。通过不断更新作品集内容，利用自动化部署功能，确保网站始终展示最新的信息。
- 小型企业网站 ：为小型企业提供一个低成本、易于维护的网站解决方案。企业可以通过 Storyblok 管理网站内容，如产品信息、服务介绍等，利用 Netlify 的自动化部署功能，及时更新网站内容。
- 博客网站 ：搭建个人或团队博客，分享技术文章、生活感悟等内容。通过自动化部署，在撰写新文章后，网站能够自动更新，提高发布效率。
8. 常见问题与解决方案
在实际操作过程中，可能会遇到一些常见问题，以下是一些解决方案：
-
生成静态网站失败
：检查
package.json脚本是否正确修改，确保 API 密钥等环境变量配置正确。可以查看终端输出的错误信息，根据提示进行排查。 - Netlify 部署失败 ：检查 GitHub 仓库连接是否正常，确保 Netlify 能够访问仓库代码。同时，检查 Netlify 部署设置是否正确，如构建命令、发布目录等。
- Webhook 未触发 ：检查 Netlify 和 Storyblok 中 Webhook 的配置是否正确，确保端点 URL 一致。同时，检查触发事件的设置是否符合预期。
9. 未来展望
随着技术的不断发展，我们可以进一步优化和拓展这个静态网站和自动化部署方案：
- 引入更多功能 ：如添加搜索功能、评论系统等，提升网站的用户体验。
- 优化性能 ：通过压缩文件、使用 CDN 等方式，提高网站的加载速度。
- 集成更多工具 ：如与 Google Analytics 集成，分析网站流量和用户行为，为网站优化提供数据支持。
通过不断学习和实践，我们可以利用这些技术和工具，构建更加复杂、功能强大的网站应用程序。希望大家在这个过程中不断提升自己的技术能力，创造出更多有价值的作品。
扫一扫
3114
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
