如何安装 Ghost Blog 和 5 美元的 Digital Ocean Droplet 服务 10 万+ 读者

2025-06-07

如何安装 Ghost Blog 和 5 美元的 Digital Ocean Droplet 服务 10 万+ 读者

这篇文章最初发表在我的博客上，我经常在那里写一些关于远程工作、编程学习以及科技女性的文章。后来，有朋友问我在哪个平台上运营我的博客，发现它在上线后的90天内就达到了10万的页面浏览量，于是我决定写这篇文章。

博客的回归

今年早些时候，我决定开通一个博客。就像世界上的其他人，他们的妈妈，他们的狗一样，我也想找个地方分享我的想法。

然而，当我真正要开始写博客时，我却不知从何入手。市面上大约有 2847 个平台可以为我的博客提供支持，我陷入了抉择的困境。我应该选择 Wordpress、一个自定义网站，还是干脆把发布工作交给 Medium？

我很快确定的唯一一件事就是我想把博客托管在自己的域名上。一开始我寻找的是无头CMS工具，但很快发现，设计一个全新的前端并不是最有效的时间利用方式。

我问了几个朋友的建议，Ghost这个名字不断出现。显然，它是一个经过精心优化的平台，拥有类似 Medium 的 UI，而且是由一位独立开发者开发的——所有这些我都很喜欢。所以我决定尝试一下，在做了一些额外的研究后，我决定使用 5 美元的 Digital Ocean Droplet 来提供服务。

三个月过去了，我的博客浏览量已经超过10万， Ghost 和 Digital Ocean 的组合完全支撑了它。我可以肯定地说，我对自己的选择很满意。

最近，几位读者联系我，寻求帮助组建同样的出版团队。这个过程相对较快，但不一定直观，所以我想把这些说明整理成一篇简单的博客文章！

PS：本博文不由任何第三方赞助。

附言：如果您更喜欢自己编写前端，我建议您使用Butter，这是我在研究过程中偶然发现的一个工具，它可以轻松集成到任何后端。由于 Butter 的文档非常详尽，我实际上只用了几分钟就将 Butter 集成到我的 Node 应用程序中，但我最终还是选择了 Ghost 前端。

幽灵高级版？

Ghost 是一个“全栈”发布平台，允许您设置博客的前端和后端。如果您需要，Ghost 还提供服务器支持，您可以通过 Ghost Premium 轻松选择。它很简单，可以快速设置，但最基本的套餐每月收费 29 美元。据我所知，Ghost Premium 的大多数其他功能在非高级版中均可使用，包括集成、代码注入和主题。主要区别在于无需设置服务器。

因此，本文假设您不想选择高级版，而是更倾向于更便宜的服务器选项，例如 5 美元的 Digital Ocean Droplet 一键安装。虽然并非完全“一键式”，但以下步骤也能让您的新博客在几分钟内启动并运行。让我们开始吧！

使用 Digital Ocean Droplet 进行 Ghost 设置

请注意，本节将逐步介绍如何为域名（例如：domain.xyz）或子域名（例如：blog.domain.xyz）设置自托管 Ghost ，但不包括子目录（例如：domain.xyz/blog）。与子目录相关的其他步骤本文将不予介绍。

设置Digital Ocean Droplet

  • 设置 Ghost 的第一步是跳转到Digital Ocean 市场。搜索“Ghost”并导航到 Ghost droplet 页面。如果您已登录，也可以在平台左侧导航栏中导航到“市场”找到它。
  • 点击“创建 Ghost Droplet”。这是“Digital Ocean 一键安装”的设置，它将为您创建并启动一个专属服务器！
  • 在创建之前，Digital Ocean 会将您带到一个页面，您需要在其中选择 Droplet 的大小。我建议您从最低级别开始，即标准版 5 美元/月。请注意，此选项不会立即显示，因此您需要导航到左侧才能找到它。除非您已经拥有一个庞大的博客，否则我不会担心流量或服务器问题。我的 5 美元/月 Droplet 成功支撑了一篇在 Hacker News 热门文章上超过 24 小时的运行，拥有数百名活跃读者，并且完全没有出现任何故障。
  • 至于其他设置条件，您可以自行决定启用，并且大多数都是可选的。您需要选择数据中心区域，该区域应最接近您预计大多数用户/读者所在的区域。我没有选择任何其他附加组件或 SSH 密钥，因为它们不是设置必需的，而且我的路由是通过 Cloudflare 完成的，它提供了我的安全层。
  • 为 Droplet 命名后（名称可以随意），Digital Ocean 将需要几分钟来创建 Droplet。创建完成后，您将看到一个 IP 地址（例如：134.209.253.151）。

一旦设置好 droplet，您就可以访问您的个人 IP。

  • 如果您在浏览器中访问该 IP，您将看到下面的 Ghost 安装页面，这意味着 Droplet 已在该 IP 地址上设置并由 Digital Ocean 托管。如果您没有看到此页面，则表示 Droplet 尚未正确设置。如果您看到此页面，则表示您已设置好 Droplet，现在可以将其连接到域名了！

如果您在您的 IP 上看到此页面，则表示您已正确安装了 droplet。

连接到自定义域

  • 如果您尚未为 Ghost 博客购买自定义域名，则需要先购买。请记住，此过程适用于您希望使用的全新域名（例如：blog.xyz），或为托管在其他地方的现有域名添加子域名（例如：blog.domain.xyz）。
  • 首先，您需要将域名添加到 Digital Ocean 并设置您的 Digital Ocean DNS 记录。为此，请点击右侧的“添加域名”按钮。

在 Digital Ocean 中添加您的域名。

  • 在输入框中输入您的域名，然后点击“添加域名”。您将看到类似下图所示的 DNS 记录。

一旦您的域名添加到 Digital Ocean 中，您就会看到 DNS 记录填充。<br>

  • 在 Digital Ocean 端设置好 DNS 记录后，您需要在外部域名设置中配置 A 记录。具体设置取决于您之前的域名设置方式，但可能在您的域名注册商（例如 Namecheap、GoDaddy 等）中找到，或者如果您已经将 DNS 重新路由到 Cloudflare 等第三方，则需要在那里更新 DNS 记录。在非 Digital Ocean 的 DNS 记录中，您需要将 A 记录指向您 Droplet 的 IP 地址，其中“名称”指的是您希望托管博客主页的域名或子域名。

例如，如果您希望 blog.domain.xyz 来存放博客，您可以为“博客”设置指向 IP 的 A 记录（例如：134.209.253.151）。

使用下面的示例作为示例，但请注意，您应该只设置**一个**或另一个。

第三方设置中的 DNS 记录示例。

  • 在两端设置 DNS 记录后，它们可能需要一些时间才能传播。一些第三方机构表示，这可能需要长达 48 小时，但通常只需几分钟即可完成。
  • DNS 记录传播完成后，您应该会在刚刚配置的域或子域中再次看到相同的 Ghost 安装页面。例如，此页面现在不仅会显示在 134.209.253.15 上，还会显示在 makerstats.com 上。如果您没有看到此页面，则可能需要检查 DNS 设置是否已正确设置并传播。

如果 DNS 已设置并传播，您应该会在您的域或子域上看到此页面。

安装 Ghost

  • 这三步安装过程的最后一部分是安装 Ghost 软件。为此，请返回 Digital Ocean 并打开右侧的控制台。这将在新选项卡中打开控制台，并请求登录。

访问 Digital Ocean 控制台。

  • 输入您的用户名（始终为“root”），然后输入您启动 droplet 时 Digital Ocean 通过电子邮件发送给您的密码。

在 Digital Ocean 控制台中输入您的登录详细信息。

  • 然后，终端会提示您立即更新密码。这是强制性的。它会首先提示您输入当前的 UNIX 密码（与电子邮件中的密码相同），然后添加两次新密码。如果操作正确，您应该会看到安装初始化，几秒钟后，您将看到以下屏幕。

Ghost 安装正在初始化。

  • 按回车键开始安装，您将看到程序正在下载。

您应该会看到表明 Ghost 正在安装的提示。

  • 程序会提示您输入域名（在这种情况下，请确保它是您的实际域名或子域名，而不是 IP 地址）和电子邮件地址。电子邮件地址可以是您的任何邮箱地址，仅用于 SSL 流程。
  • 如果一切操作正确，您将会看到以下内容！

Ghost 已安装！

  • 为了确保一切设置正确，您现在可以访问您的域名或子域名，您应该会看到一个来自 Ghost 的基本博客模板（如下例所示）。请注意，如果您通过 Cloudflare 进行路由，并且遇到与路由相关的问题或过多的重定向，则可能是您的 SSL 出现了问题。我可以在“加密”选项卡中通过将 SSL 从“灵活”设置为“完全”来解决这个问题。

应该在您的域或子域中找到的模板博客。

  • 现在，如果您导航到 yourdomain.xyz/ghost 或 subdomain.domain.xyz/ghost，您应该会看到设置页面。

Ghost 的注册页面。

  • 完成注册步骤后，您将进入此页面！这是您的 Ghost 门户，您可以在此进行自定义、上传内容、添加集成等操作。

可以随时通过您的域/ghost 或子域/ghost 找到 Ghost 门户。

恭喜！您已成功设置 Ghost。您可以随时通过您的链接 yourdomain.xyz/ghost 或 subdomain.domain.xyz/ghost 访问您的编辑平台。现在就可以开始运行您的博客了！

Ghost 入门：自定义

在您的门户中，左侧边栏有多个选项卡，可让您进一步自定义博客。下面我将针对每个选项卡介绍一些技巧。

一般的

在此选项卡中，您将输入一组非常标准的信息，包括您的出版物名称、封面、徽标（网站图标）、时区等等。别忘了更新您的社交帐户！我一开始忘了更新，结果把 Ghost 社交帐户设为默认帐户超过一周了。

另外值得注意的是，Ghost 会自动为颜色较浅的封面图片添加滤镜，以便文字清晰显示。您可以稍后在代码注入部分进行编辑。

常规设置页面。

设计

导航

导航部分非常直观，您可以设置导航栏，它显示在博客的所有页面上。您可以设置指向任何页面的链接，无论是博客内部还是外部的，但大多数人使用它来导航到标签/分类页面。

导航栏。

导航设置。

鬼魂主题

我认为 Ghost 目前的一个缺点是从设计角度来看，自定义功能有限。你可以下载整个模板，进行修改，然后重新上传。我决定放弃这种方法，而且我感觉很多学习本教程的人也会这么做。

门户中提供幽灵主题。

对于那些不想编辑整个模板的人来说，您可以选择探索Ghost 主题市场。除了六个免费主题外，还有几十个付费 Ghost 主题，价格从 19 美元到 59 美元不等：

从总体上看，付费主题的成本是可以承受的，并且与 Wordpress 等其他网站上的付费主题相当，但使用 Ghost 安装要容易得多。

标签

您需要为您的文章选择标签。这些标签包括：

  1. 文章按以下方式分组
  2. 可以添加到您的导航栏

在门户中设置标签。

您可以添加任意数量的标签，以及唯一的 URL 和描述。例如，这是我博客的“远程工作”类别。您还可以设置元数据，即页面共享或显示在搜索结果中时显示的信息。

我个人选择为所有分类页面选择相同的背景图片。我没有单独上传，而是决定在平台的代码注入部分使用 CSS 全局设置图片。

.site-header {
background-image: -webkit-image-set(
    url(https://images.unsplash.com/photo-1501769214405-5e5ee5125a02?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=998&q=80) 1x,
       url(https://images.unsplash.com/photo-1501769214405-5e5ee5125a02?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=998&q=80) 2x
)}
Enter fullscreen mode Exit fullscreen mode

代码注入

说到代码注入，还有其他几种方法可以自定义设计，无需直接编辑主题，只需在页眉/页脚中设置样式或添加脚本即可。以下是我选择使用代码注入的一些方法。

谷歌分析

确保在标题中添加 Google Analytics 跟踪 ID。您可以直接从 Google Analytics 复制脚本。

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-ID"></script>
<script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'UA-ID');
</script>
Enter fullscreen mode Exit fullscreen mode

附加脚本

我还在我的 Mailchimp 模式中添加了一个脚本，我相信您可以发挥您的想象力来添加其他可能值得添加的脚本。

信任栏

我决定添加一个“信任栏”，用于展示我推荐过的地方。为此，我在标题底部（styling 和 script 标签下方）添加了一个 div。下面是一些基本的 HTML 代码，可以帮助您入门，样式也包含在下方。

<div id="trustbar">
As seen in:
<a href="https://www.producthunt.com/@stephsmith" target="_blank"><img src="https://stephsmith.io/featured/producthunt.png" class="trust-img"></a>
<a href="https://news.ycombinator.com/item?id=19163316" target="_blank"><img src="https://stephsmith.io/featured/hackernews.png" class="trust-img"></a>
<a href="https://hackernoon.com/a-year-of-sponge-3b4f48d00042" target="_blank"><img src="https://stephsmith.io/featured/hackernoon.png" class="trust-img"></a>
</div>
Enter fullscreen mode Exit fullscreen mode

附加样式

<style>
/* Styling the trust bar */
    .trust-img{
        height: 20px;
        margin: 0 5px;
    }
    .trust-img:hover {
    height:22px;
    opacity: 0.8;
    }
    #trustbar{
        text-align: center;
        padding: 20px 0;
    }

/* Editing styles for description and nav bar */
    .site-description
    {
        font-weight: 500 !important;
    }    
    .site-nav {
        font-weight: 800 !important;
        text-shadow: 1px 1px rgba(0,0,0,0.3) !important;
    }    
/* Editing colour of bottom footer */
   .site-footer {
       background-color: rgb(245, 248, 251);
    }
    .site-footer-content, .site-footer-content a {
        color: grey;
    }
    }
/* Editing filter over cover image */
    .site-header:before{
        background: rgba(0, 122, 237, 0.23);
    }
</style>
Enter fullscreen mode Exit fullscreen mode

页脚

我在页脚中唯一添加的内容是我的 Disqus 评论脚本。它看起来类似这样：

<!-- disqus -->
<script>
    // Only inject comments if you're on a post page.
    var article = $('.post-template main article');
    var disqusSite = 'YOUR_ACCOUNT';
    if (article.length) {
        article.after('<div id="disqus_thread"></div>');
        // this is the code you get from disqus
        (function() {
            var d = document, s = d.createElement('script');
            s.src = '//' + disqusSite + '.disqus.com/embed.js';
            s.setAttribute('data-timestamp', +new Date());
            (d.head || d.body).appendChild(s);
        })();
    }
</script>
Enter fullscreen mode Exit fullscreen mode

集成

Ghost 以对开发者友好而闻名，这包括轻松访问集成。在“集成”选项卡中，您可以找到一系列集成。您可以自行探索，但我特别建议您设置与 Zapier 的集成，它可以帮助您将 Ghost 中的任何新订阅者直接“转移”到您的第三方列表（例如 MailChimp）。只需点击“配置 Zap”，您就会直接进入 Zapier 进行设置。设置完成后，您的步骤应该如下所示。

Ghost 和 Mailchimp 集成利用 Zapier。

结论

就这样！希望你完成了以上每个步骤后，就能在超酷的 5 美元 Digital Ocean Droplet 上运行一个完整的 Ghost 博客应用。接下来，就看你如何为你的精美新博客添加素材了。如果任何步骤不清楚或无法正常工作，请随时给我留言——我很乐意提供帮助！

祝您写作愉快！

附言：如果您喜欢这篇文章，请在Twitter上打个招呼或考虑订阅我的每周博客。

文章来源：https://dev.to/stephsmithio/step-by-step-setting-up-ghost-with-a-digital-ocean-droplet-1nb8
Devto 翻译
PREV
使用 Cypress 测试可访问性
NEXT
代码审查的 5 条黄金法则