使用 Stackbit、GatsbyJS 和 DEV -1 创建博客网站

一年半前，我在 Medium 上开始了我的博客之旅，至今已写了 98 篇博客。写技术文章很快就成了我的习惯。

我在 Medium 上已经有了不错的关注度，但自从dev.to上线后，我也开始在那里转载我的文章。我在 dev.to 上收获了很多关注者和浏览量。

现在是时候创建自己的博客网站了，我之前一直在考虑用 GatsbyJS 来做。用 GatsbyJS 创建博客网站的方法有很多，但我找到了Ben Halpern （dev.to 的创建者）的一篇关于他们与 Stackbit 合作的文章。

您只需按照本文中非常简单的流程操作，您的个人博客网站将立即准备就绪。

您只需遵循 4 个步骤。

1. 访问Stackbit Creation Workflow并选择一个主题。我选择了Fjord。

选择主题

1. 然后你需要选择你的静态站点生成器。这里我选择了 Gatsby。

选择盖茨比

1. 然后您需要连接到您的Github和DEV帐户。

连接 DEV 和 Github

1. 接下来，您需要点击“创建您的项目”，stackbit 将为您创建一个新的博客网站。然后，您需要连接到 Netlify 帐户以保持该网站的正常运行。

网站已上线

通过遵循这些简单的步骤，我的博客网站https://nabendu-blog-d8fee.netlify.com/上线了。

现场直播

现在，每当我在 DEV (dev.to) 上发布帖子时，它都会反映在这里。这实际上使 DEV 成为我网站的无头 CMS。

现在，正如您从上面看到的，有一些工作要做，比如编辑主页，购买一个好的域名并连接到 netlify，从 gatsby 添加一些插件。

现在，stackbit 在我的github上创建了一个仓库。所以我要去那里按照说明操作。

Stackbit 指令

但首先我将在我的桌面上克隆我的存储库

git 克隆

接下来，我将切换到目录并执行 npm install

npm 安装

现在，我们需要前往Stackbit 仪表板来获取我们的 API 密钥。

API 密钥

然后我们需要将此密钥分配给STACKBIT_API_KEY

然后按照 GitHub 的说明，运行以下命令。它似乎会获取所有帖子。

获取所有帖子

然后按照说明运行 npm run develop

npm 运行

编译成功后，打开http://localhost:8000/。这样我们就成功创建了本地开发环境。

本地主机

现在，让我们在 VSCode 中打开项目。我们需要编辑的主要内容是主页。内容来自 src -> pages -> index.md

索引.md

我们现在将更新index.md中的内容

更新了 index.md

让我们提交更改并将其推送到我们的 github。

推送到 github

它还将开始在 netlify 中更新网站。

网站正在更新

一段时间后，这些变化就会被推向生产。

网站已更新

这篇文章的第一部分到此结束。在下一部分（也是我的第 100 篇博客）中，我将购买一个好域名并连接到 Netlify，同时添加一些 Gatsby 插件，例如 SEO、Google Analytics（谷歌分析）。