使用 Appwrite 和 Hugo 构建开源博客平台
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
你有没有想过要创建自己的博客？有？是什么阻碍了你？是不是觉得搭建博客网站太麻烦？有了 Appwrite 和 Hugo，一切迎刃而解！😎
📢 什么是 Hugo？
Hugo 是一个静态网站生成器，拥有海量精美主题可供选择（您也可以创建自己的主题）。只需一条命令即可完成 Hugo 的安装和运行（请选择适合您操作系统的命令）。要了解更多关于 Hugo 的信息，请从这里brew install hugo开始。
📢 什么是 Appwrite？
正在构建 Web/移动解决方案？后端方面需要帮助？Appwrite可以帮到您——它是一款开源解决方案，包含构建应用程序所需的所有核心 API。它能帮助您更快地构建安全应用。Appwrite 还提供适用于 Web、移动和服务器端语言的 SDK，支持身份验证、实时数据库、文件存储、云函数等功能。点击此处
了解更多新增功能。
既然您已经了解了 Hugo 和 Appwrite，您可能已经猜到我们将用它们做什么了。Hugo 将作为我们的网站生成器，而 Appwrite 则负责后端开发。
让我们开始搭建吧！💻
📝 先决条件
如果安装成功：
- Appwrite 将在本地主机上运行（在浏览器中输入
http://localhost/auth/signin，如果出现登录页面，则一切就绪）。 - 输入命令
hugo version，如果返回版本信息，即可继续操作。
🧠 方法
想必您已经注意到，Hugo 中的内容是 Markdown 格式。我们的目标是将内容存储在数据库中（我们使用 Appwrite），并利用数据库生成 Markdown 文件，最终发布到我们的博客网站上。
🪜 包含步骤
- 选择并安装 Hugo 主题
- 添加一些内容并在本地主机上运行，看看效果如何。
- 在 Appwrite 中创建项目
- 设置数据库，并向其中添加集合
- 从 Appwrite 获取数据
- 在 Hugo 构建过程中，将 Appwrite 中的数据转换为 Markdown 格式
- 验证我们的内容是否已反映在网站上。
▶️ 入门指南
- 您可以按照Hugo 快速入门教程，在几分钟内搭建一个网站。
- 您可以从这里选择不同的主题，并使用以下命令将其下载
git clone https://github.com/guangmean/Niello.git themes/Niello到您的根目录。
注： 我的网站使用了Niello，您可以选择任何您喜欢的样式。
这就是你下载所选主题后文件夹的样子。👇
- 登录 Appwrite 后，首先点击“创建项目”来创建一个项目。给项目命名，然后点击“创建”。
例如：
- 从左侧面板中，我们选择“数据库”（其中将包含我们的博客内容），然后单击“添加数据库”。
- 然后点击“添加收藏集”并给它命名（例如 Hugo Blog）。
- 创建集合后，选择权限级别为“文档级别”。在同一页面上，复制“集合 ID”并妥善保管，我们将在后续步骤中使用它。
- 博客由两个字符串属性“标题”和“正文”组成，因此我们继续在数据库集合中添加属性。
PS -选择“新建字符串属性”，在 “属性 ID”中输入文本“Title”，并添加“Size”。对“Body”重复相同的操作。
- 下一步是从 Appwrite 获取数据，我们使用数据库 API 文档中的代码。我们使用
Collection ID您在上一步中复制的代码。创建一个新.js文件并添加以下几行代码👇
const sdk = new Appwrite();
sdk
.setEndpoint('https://[HOSTNAME_OR_IP]/v1') // Your API Endpoint
.setProject('5df5acd0d48c2') // Your project ID
;
let promise = sdk.database.listDocuments('[COLLECTION_ID]');
promise.then(function (response) {
console.log(response); // Success
}, function (error) {
console.log(error); // Failure
});
注意： 运行上述代码之前，请添加一些文档。
- 我们已经成功获取了数据，现在要将其转换为 Markdown 格式，然后让 Hugo 基于此构建应用。（是时候展现你的 JavaScript 技能了！）😉
在同一个文件（即上面创建的文件）中，也就是我们获取集合数据的地方，我们编写以下代码：
let promise = database.listDocuments('COLLECTION ID');
promise.then(function (response) {
console.log(response);
const template = `
---
title: "\"{{title}}\" "
date: {{date}}
---
{{desc}}
`;
for (let i=0;i<=response.documents.length-1;i++){
const obj= response.documents[i];
const tempObj ={
title: obj.Title,
date: new Date(),
desc: obj.Body
}
const op = render(template, tempObj);
const opPath = `./quickstart/content/posts/${obj.Title.split(" ").join("-")}.md`
fs.writeFileSync(opPath, op)
}
}, function (error) {
console.log(error);
});
对上述代码块的解释：
- 将从 Appwrite 获取的数据放入 Hugo 的 Markdown 模板中
- 运行一个循环，将上述 markdown 文件放入 Hugo 可以构建的路径中（在本例中，路径为：）
content\posts。 - 该循环会一直持续，直到我们 Appwrite 文档集中的所有文档都上传完毕。
完整的代码大致如下：
const sdk = require('node-appwrite');
const fs = require("fs");
const {render} = require("mustache");
// Init SDK
let client = new sdk.Client();
let database = new sdk.Database(client);
client
.setEndpoint('APPWRITE_ENDPOINT') // Your API Endpoint
.setProject('APPWRITE_PROJECT') // Your project ID
.setKey('APPWRITE_API') // Your secret API key
;
let promise = database.listDocuments('COLLECTION_ID');
promise.then(function (response) {
console.log(response);
const template = `
---
title: "{{title}}"
date: {{date}}
---
{{desc}}
`;
for (let i=0;i<=response.documents.length-1;i++){
const obj= response.documents[i];
const tempObj ={
title: obj.Title,
date: new Date(),
desc: obj.Body
}
const op = render(template, tempObj);
const opPath = `./quickstart/content/posts/${obj.Title.split(" ").join("-")}.md`
fs.writeFileSync(opPath, op)
}
}, function (error) {
console.log(error);
});
- 运行一次文件以确保一切正常，输入内容
hugo server -D后，您的网站即可在以下网址上线：http://localhost:1313/
如果你一直看到最后，你的网站看起来会像这样👇
🪜 其他步骤
- 您可以使用Netlify、GitHub Pages或任何其他您喜欢的服务来托管您的网站。
- 如果你愿意，可以使用自己的主题。
感谢阅读，希望对您有所帮助！
如有任何疑问/想向我展示你的精彩项目，请在推特上联系我：@Haimantika
文章来源：https://dev.to/appwrite/building-an-open-source-blogging-platform-with-appwrite-and-hugo-2hf7