DigitalOcean 上的 Headless Hashnode 入门指南

0 股票
0
0
0
0

介绍

Hashnode 是一个免费的内容发布平台和开发者社区,旨在保持技术爱好者的活跃度。它为用户提供了一个创建和分享博客文章的空间,并围绕各种技术领域构建社区。Hashnode 致力于简化对开发者友好且经过 SEO 优化的技术博客的创建和维护,提供自定义域名、内置编辑器以及与 GitHub 等主流版本控制系统无缝集成等功能。其最新产品 Headless Hashnode 允许您使用 Hashnode 创新的 GraphQL API 从零开始构建博客。您可以从头开始构建博客,也可以使用他们的 Next.js 入门套件。.

在本教程中,我们将在 DigitalOcean Droplets 上设置无头 Hashnode。.

无头哈希节点简介

无头内容管理系统(CMS)是一种将内容管理层和展示层分离的架构。传统的CMS将内容创作、存储和展示都集中在一个系统中,而无头架构则可以将内容存储和展示分开处理,这为设计师和开发人员提供了更大的空间,让他们可以尝试不同的博客呈现方式。.

Headless Hashnode 是一个专门构建的 CMS,可帮助用户构建个人或企业博客,以便他们可以使用 Hashnode 的 WYSIWYG 编辑器、AI 和 SEO 优化工具来管理自己的域名,而无需担心托管期间的内容和分析跟踪。.

开始

先决条件:
  1. DigitalOcean 上的一个帐户
  2. 在 Hashnode 上拥有一个账户。.

 使用 DigitalOcean Droplets

DigitalOcean Droplets 是简单、可扩展且可靠的虚拟机,可以在不到一分钟的时间内轻松部署。.

首先,请前往您的 DigitalOcean 控制面板,然后点击页面右上角的绿色«创建»按钮。在下拉菜单中,选择«Droplets»(它也是第一个选项)。.


在下一个窗口中,您需要指定区域、图像和尺寸以及其他详细信息。强烈建议您选择距离潜在读者最近的区域,即使数据中心已为您自动选择。.

在下一个名为«镜像»的选项中,转到“市场”选项卡,搜索“Ubuntu 上的 NodeJS”。DigitalOcean 的市场提供了一系列即用型工具和资源,称为“一键应用”。您无需手动下载所有依赖项,只需访问市场并运行一个“一键应用”即可。该应用预配置了镜像和设置,以及项目所需的所有软件包和依赖项。您的屏幕应该如下所示:


在下一个窗口中,您可以选择服务器实例的大小。请根据您未来计划发布的博客数量,选择最适合您或您公司的实例。理想情况下,如果您希望将此部署用于生产环境,我们建议至少使用 25 GB 的固态硬盘 (SSD)。我们建议选择高级服务器实例以获得更快的性能,它支持 Intel、AMD 处理器和 NVMe 固态硬盘。您可以根据自身需求选择高级服务器实例,就像选择标准服务器实例一样。.


完成后,您需要选择一种身份验证方式。您可以通过 SSH 密钥或密码登录您的 Droplet。在本教程中,我们将使用密码,因此请添加您选择的任何字符串并记下来。在下一部分中,您可以勾选选项旁边的复选框,免费添加增强的指标监控和警报功能,一切就绪。请确保为您的 Droplet 添加一个简洁的主机名,并在单击“创建 Droplet”之前查看所有详细信息。.


配置一个 Droplet 大约需要一分钟。完成后,点击«开始使用»链接,即可查看 Marketplace 应用的概览以及包含的功能。.

Droplet 设置

要启动您的 Droplet,请接受传入连接并将其重定向到本地终端中的应用程序:

ssh root@YOUR-DROPLET-IP

«将»YOUR-DROPLET-IP”替换为您控制面板中Droplet的IP地址。出现提示时输入密码。.


下一步是更新和升级 Droplet 中的软件包,为此,请运行以下命令:

sudo apt update && sudo apt upgrade -y
curl -fsSL https://get.pnpm.io/install.sh | sh - to install pnpm.

要删除 Droplet 中显示的、占用 3000 端口的默认页面,请使用以下命令。.

cd /var/www
rm -r html
cd ~
cd /etc/nginx/sites-enabled/
rm -r default

如果更改在 5 分钟内没有生效,您可能需要关闭 Droplet 并重新启动。如果发生这种情况,您需要在本地终端中再次通过 SSH 连接到 Droplet。接下来的步骤中,我们将使用 Node.js、npm 和 Nginx,它们已经安装在 Droplet 上。Nginx 负责处理所有到 Next.js 应用程序的路由。.

Nginx 配置

使用以下命令创建一个新的 Nginx 配置文件:

sudo nano /etc/nginx/sites-available/hashnode

粘贴以下配置,并将 server_name 替换为您的 Droplet IP 地址:

server {
listen 80;
server_name YOUR_IP_ADDRESS;
location / {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}

完成后,保存并关闭文件。现在我们需要创建一个符号链接来启用这些设置,方法如下:

sudo ln -s /etc/nginx/sites-available/hashnode /etc/nginx/sites-enabled/

要测试 Nginx 配置是否存在语法错误,您可以运行以下命令:

sudo nginx -t

理想的输出结果应该是这样的:


现在我们可以重启 Nginx 了,可以使用以下命令:

sudo service nginx restart

安装无头哈希节点

请转到右侧目录:

cd /var/www

克隆 Headless Hashnode Github 仓库:

git clone https://github.com/hashnode/starter-kit

选择一个模板并导航到其目录。在本教程中,我们将使用 Personal 主题:

cd starter-kit/packages/blog-starter-kit/themes/personal

复制环境变量文件:

cp .env.example .env.local

然后编辑环境变量文件:

nano .env.local

您需要修改环境变量,使其指向您的 Hashnode 账户。将 NEXT_PUBLIC_HASHNODE_PUBLICATION_HOST 更改为您的 Hashnode 端点,并将 NEXT_PUBLIC_MODE 更改为 production。修改后的文件内容如下:


要安装依赖项,请运行以下命令:

pnpm install

您的屏幕应该如下图所示:


一切准备就绪后,您现在可以运行以下命令将 Headless Hashnode 部署到您的 Droplet。请注意,编译过程需要一分钟左右。您的终端应该显示类似这样的信息:

pnpm dev


编译完成后,您可以访问您的 Droplet IP 地址,查看您的 Headless Hashnode 站点是否已启动并运行!


这样,我们就在 DigitalOcean Droplet 上部署了无头 Hashnode,并使用了 Nginx 提供的反向代理!

设置 PM2 流程管理器

有时,我们正在运行的运行命令可能会因为服务器重启或需要安装更新而停止。我们将使用 PM2 工具来确保应用程序始终运行。即使应用程序崩溃,PM2 也会重新启动。.

Node.js Marketplace 镜像已预装 PM2。为确保您的应用程序始终使用 PM2 运行:

cd /var/www/starter-kit
pm2 start npm --name "hashnode" --start


为确保 PM2 在启动时自动运行,请运行以下命令。这将创建一个脚本,您可以将其复制并粘贴到终端中,以便在启动时启动 PM2 并保存这些设置。.

pm2 startup 
pm2 save

结果

无头CMS工具非常适合自定义用户界面,而Hashnode则提供了一个高度可扩展且灵活的工具。为了提升博客的安全性和SEO,建议您使用Let's Encrypt设置SSL证书并启用HTTPS连接。如果您想添加自己的域名,请记得配置DNS设置。将域名的A记录指向您的Droplet IP地址,以便您可以使用域名访问应用程序。立即注册账号吧!我们期待在DigitalOcean上看到您的博客!

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

您可能也喜欢