将Netlify函数和Twitter API v2用作盖茨比博客的CMS

对于冗长的博客标题，我们会提前道歉，但是正如本文所暗示的，我将解释如何使用Netlify Functions通过Twitter v2 API访问Twitter个人资料并将其显示在Gatsby博客上。

这可能对我来说是特定的，但是我想解决我的“数字足迹”所遇到的一个小问题。如您所见，我有这个博客：https://paulie.dev和一个商业作品集：https://www.pauliescanlon.io

这两个站点都建立在我的Gatsby主题之上：gatsby-theme-terminal是开源的，可以在我的GitHub上找到

使用Gatsby主题解决了我的问题之一，因为我能够拥有两个外观和工作方式几乎相同的网站，并且我对主题所做的任何更改都被两个网站继承。这有点像管理自己的多品牌设计系统，但仅是为了您自己。

我希望两个站点都具有相同的“介绍”部分，但是每次我对一个站点进行更改时，都必须对另一个站点进行相同的更改，以确保它们都显示相同的介绍文本。

如果我不是开发人员，那可能很好，但是两次执行某件事是太多IMO的一倍。

这也让我感到沮丧，因为我还希望我的Twitter个人资料描述与两个站点都保持同步，因此，我还是另一个记得更新我的个人信息的地方。

我考虑过的一种选择是连接内容管理系统，这很好，它可以使我的两个站点保持同步，但无法更新我的Twitter个人资料。

因此，我决定对Twitter API进行反向工程，并将其用作CMS来填充我的两个网站。这个想法很简单。我将使用Twitter个人资料描述，就好像它是CMS中的一个字段一样。当然，我对此所做的任何更改都会显示在我的Twitter个人资料上，下面是我将相同信息提取到两个站点中的方式。

...但是我在博客和网站上使用的实际API在这里：https：//paulie-api.netlify.app

Netlify如何描述“功能而不管理服务器的站点”，而功能和意图正是出于这些目的。类似于您创建Express应用并将其部署到某处的方式，但不必麻烦设置服务器端环境，更重要的是，无需进行任何真正的杜比服务器正常运行时间监控。

一组端点，可用于从Twitter获取数据。任何Twitter请求都必须在服务器端完成，并使用一组密钥和令牌。不幸的是，您不能从浏览器中访问Twitter API，因此我们需要一个“服务器”或如上所述的Netlify函数

使用以上两种方法，我已经创建了自己的API端点，该端点断开并单击Twitter API，并返回我的个人资料信息，然后我可以在博客和网站的简介部分中显示这些信息。我已将此API部署到Netlify，并且已与我的两个站点完全分离，但将返回可从我的站点和博客内部的客户端“获取”请求中获取的数据。该网址再次在这里：https://paulie-api.netlify.app

在开始之前，您需要完成几件事。

申请访问Twitter API。这是一个漫长的过程，因此请收录并在此帖子中添加书签，因为Twitter可能需要几天的时间才能接受您的申请。

获得访问权限后，您可以转到开发人员门户并创建一个新项目，并且在该项目中可以创建一个“应用程序”，我称之为“ paulie-api”。

在这里，您将找到访问Twitter API所需的所有API密钥和令牌。记下它们的位置，稍后我们将使用它们。

要运行Netlify功能，我们将使用netlify开发人员而不是gatsby开发人员或yarn开发人员，因此您需要安装Netlify CLI

为了开发自己的API，我发现最简单的方法是同时运行某种“站点”，该站点将访问API端点并在页面上呈现响应。在该示例存储库中，您将看到我建立了一个非常简单的Gatsby站点，该站点的页面使用“获取”来进行获取，渲染和呈现数据。

我已经使用主题UI作为样式，但是自然地您可以选择任何您喜欢的样式。

无论是从头开始，还是将Netlify Functions添加到现有项目，都需要在项目的根目录中添加functions dir来开始。

函数是它自己的应用程序，因此需要它自己的package.json并将对twitter-v2具有一个依赖性

接下来看看.env.example。您需要创建自己的.env文件并添加环境变量，如.env.example中所示。自然地，您需要将GATSBY_TWITTER_USERNAME更改为您自己的Twitter用户名，而Twitter密钥和令牌将是我之前提到的Twitter开发人员门户网站提供的内容

接下来创建一个Twitter客户端，这是我们在发出请求时将密钥和令牌传递到Twitter API的方法

现在，我们需要创建前端将要命中的“端点”，该端点将关闭并从Twitter API中获取数据。

我创建了一个名为twitter-user的目录，并在其中创建了一个新文件，并将其称为twitter-user.js。

在这里，我们可以使用client.js来访问Twitter API端点，并从客户端传递所需的密钥和令牌。

在上面的内容中，您可以看到我们使用客户端来访问users / by / username Twitter API端点，您可以在此处了解更多信息，该端点返回一个数据对象，我以{user：data}的形式传递给回调主体

接下来的内容将很大程度上取决于您如何设置前端，但是在演示中，我有一个名为index.js的页面，该页面使用useEffect从Netlify函数中“获取”数据。

该示例文件包含isLoading和hasError的一些额外位，但是下面的内容足以让您点击Netlify Function，后者依次点击Twitter API并返回您的个人资料信息数据。

process.env.GATSBY_API_URL是我们之前添加到.env的Netlify函数的路径，并且我已经在组件/页面中对/ twitter-user进行了硬编码，因为您可能想创建在不同页面上返回不同数据的端点。

您可能想知道为什么此环境变量以GATSBY_作为前缀。这样Gatsby可以从前端访问它。您可以在此处阅读有关Gatsby环境变量的更多信息

为了使Netlify Functions在本地和部署时均能正常工作，我们需要确保已安装netlify-lambda并将“ start”和“ postinstall”脚本都添加到根package.json（不是package.json 。/职能）

在我们太过着迷之前，需要注意的是，我们将不再使用gatsby开发或yarn开发来启动Gatsby应用程序，如果您这样做的话，我们的Netlify功能将无法运行，并且会出现错误。

相反，运行netlify dev可以使Gatsby站点和Netlify Function同时运行。

并且要确保何时部署一切正常，您需要修改netlify.toml

在大多数情况下，netlify开发人员将尝试通过在项目根目录中查找某些文件来自动确定正在使用的静态站点生成器。如果您在项目的根目录还没有gatsby-config.js，请按照我在这里所做的添加一个...您可能不想使用Theme UI，因此如果您使用的是其他CSS方法，请忽略它。

如上所述，Netlify函数是它们自己的应用程序，因此，当您将其部署到Netlify时，我们需要确保已安装依赖项，并告诉Netlify函数在目录结构中的位置

您还需要确保已将所有相同的.env变量添加到Netlify环境。查看您的网站设置，然后在“构建和部署”下找到“环境”

另外，请确保您已经正确设置了“敏感变量策略”，我将我的设置为“不受限制地部署”，因为我很忙！

完成所有这些设置后，您应该能够启动netlify开发人员访问http：// localhost：8888 /并在页面上看到您自己的Twitter数据，并且一旦部署，您“应该”发现一切都将像在本地一样继续工作。

我不是100％的人，但是我认为您可能必须至少部署一次，以便netlify开发人员知道功能在哪里...即使您是在本地开发，这还是有点奇怪，但是直到您发现它似乎出错至少部署一次。

用手指交叉就足以使您开始使用Netlify Functions，但是如果您觉得其中任何一个都有点“画出了其余的猫头鹰”，请随时在Twitter上找到我。