如何使用 Gatsbyjs 和 AWS 创建精彩博客
别担心，我仍然计划把我的所有博文都发布在 dev.to 上。除了强大的社区之外，dev.to 最棒的功能之一就是能够使用规范 URL 指向你的原始博文。
声明完毕，让我们深入了解一下我是如何利用 GatsbyJS、TailwindCSS，以及我所有网站托管相关的首选工具 Amazon Web Services，来建立我自己的博客blog.kylegalbraith.com 的。在这篇文章中，我将讨论以下主题：
- 开始使用 Gatsby + TailwindCSS 构建静态网站博客。
- 设置您的初始博客。
- 实现 SEO 和社交共享的常见功能部分。
- 加分点：配置 AWS 基础设施来托管您的博客。
听起来是个不错的计划，对吧？我们开始吧。
GatsbyJS + TailwindCSS == 太棒了
我之前在关于“边学边做”简报发布的文章中讨论过 TailwindCSS 。它是一个非常棒的实用型 CSS 框架，附带许多开箱即用的功能。
此外，在我的“通过使用它学习 AWS”课程中，我们使用 GatsbyJS 创建一个演示静态网站，然后我们可以使用它来学习核心 AWS 概念，例如托管、保护和部署静态网站。
因此，我决定在我的博客中将它们融合在一起。我希望拥有 Gatsby 这类静态网站生成器的简洁性，并能够使用 TailwindCSS 快速设置样式。因此，我创建了一个Gatsby 入门项目（也称为样板项目），其中列出了使用预配置了 Tailwind 的 Gatsby 静态网站生成器所需的所有配置。
首先，您需要gatsby-cli从 NPM 安装。
npm install --global gatsby-cli
接下来，您需要使用该项目在您选择的目录中创建一个新的 Gatsby 项目gatsby-starter-tailwind-seo-social。
gatsby new kylegalbraith-blog https://github.com/kylegalbraith/gatsby-starter-tailwind-seo-social
kylegalbraith-blog这将在当前目录中创建一个新文件夹。此文件夹内包含 Gatsby 网站和 TailwindCSS 的所有样板文件和初始配置。如果我们运行一个快速develop命令，就可以看到初始网站的样子。
cd kylegalbraith-blog
gatsby develop
我们最终应该看到的是类似这样的情况。
到目前为止，我同意吗？非常好。
下载启动项目后，您可以在 Visual Studio Code 或您常用的 IDE 中打开它。查看文件夹结构，您会发现一些不同的东西。
首先要熟悉的是src目录。这是构成你博客的所有代码所在的位置。GatsbyJS 是一个基于 React 的静态网站生成器，因此所有内容都以组件、静态资源、布局和页面的形式定义。
如果展开组件文件夹并打开Header组件，您会看到如下代码。
import React from "react";
import Link from "gatsby-link";
import logo from "../../images/favicon.png";
import config from "../../config/config";
const Header = () => {
return (
<nav className="bg-grey-lightest">
<div className="container mx-auto p-4 md:p-8">
<div className="text-center lg:text-left">
<Link to="/" className="lg:inline-flex items-center no-underline text-grey-darkest hover:text-black">
<div className="mb-4 flex-1 pt-5">
<img
src={logo}
alt="The blog of Kyle Galbraith, Software Engineer & Entrepreneur"
className="w-24 h-24 border-indigo-darkest mr-4 rounded-full" />
</div>
<div className="flex-2">
<h1 className="text-5xl ml-2 font-hairline text-indigo-darkest">
{config.authorName}
</h1>
<span className="block ml-2 mt-2 font-hairline text-indigo-darkest">
{config.siteDescription}
</span>
</div>
</Link>
</div>
</div>
</nav>
);
};
export default Header;
这是 Gatsby 博客的标题组件。目前，这仍然是一个样板博客。让我们通过修改 中的一些配置设置来让它更丰富一些src/config/config.js。您可以更新authorName和siteDescription以匹配您的信息。
module.exports = {
siteTitle: "Your Blog Title",
shortSiteTitle: "Your Short Blog Title",
siteDescription: "This is an awesome blog that you are going to make your own.",
siteUrl: "https://blog.kylegalbraith.com",
pathPrefix: "",
siteImage: "images/facebook-cover.jpg",
siteLanguage: "en",
authorName: "Kyle Galbraith Was Here",
authorTwitterAccount: "kylegalbraith",
authorSocialLinks: [
{ name: "github", url: "https://github.com/kylegalbraith" },
{ name: "twitter", url: "https://twitter.com/kylegalbraith" },
{ name: "facebook", url: "http://facebook.com/kyle.galbraith459" }
]
};
现在这些字段已更新，您可以通过再次从命令行运行来在浏览器中实时查看更改。此命令默认gatsby develop在端口启动 localhost 服务器。8000
然后你就可以在浏览器中查看你的更改了。如果你继续develop运行该命令，任何对组件的更改都将在浏览器中热加载。
很酷吧？你可以更改任何配置设置，使其与你的博客详情相匹配，组件也会自动更新。
更改内容很酷，但您可能还想添加自己的样式。前往组件Footer，让我们将外部 div 的背景颜色从bg-grey-lightest更改为bg-indigo。
import React from "react";
import config from "../../config/config";
const Footer = () => (
<div className="bg-indigo">
<div className="text-center max-w-xl mx-auto p-4 md:p-8 text-sm">
<p>
<a
href={config.siteUrl}
className="no-underline text-indigo-darkest hover:text-grey-darkest"
>
This blog is powered by <a href="https://www.gatsbyjs.org/">GatsbyJS</a> using the gatsby-starter-tailwind-seo-social from <a href="https://blog.kylegalbraith.com">Kyle Galbraith</a>.
</a>
</p>
</div>
</div>
);
export default Footer;
现在，你的博客页脚应该是蓝色的。通过使用 TailwindCSS，你可以使用许多预构建的实用程序类，这些类可以让你快速开发新的 UI 组件或更改现有组件的样式。
但有时，您需要将自定义 CSS 应用于组件。这可以通过在index.tailwind.css下方添加自定义样式来实现src/layouts。滚动到底部，您会看到body元素中已经定义了一个自定义样式，用于添加背景渐变。让我们将渐变更改为其他样式。
body {
background: #1f4037;
background: -webkit-linear-gradient(to right, #99f2c8, #1f4037);
background: linear-gradient(to right, #99f2c8, #1f4037);
}
要更新样式表，你需要从 运行 npm 脚本package.json。该build:css脚本将运行tailwind命令并输出最终的 CSS。
npm run-script build:css
...
> tailwind build ./src/layouts/index.tailwind.css -c ./tailwind.config.js -o ./src/layouts/index.css
Building Tailwind!
Finished building Tailwind!
现在再次检查本地主机，您可以看到背景渐变已更新。
这就是 Gatsby + TailwindCSS 博客设置的样板。您可以利用现有的Tailwind 实用类，也可以添加和扩展自己的类来进一步优化博客样式。您还可以构建自己的组件，为博客添加新功能。
设置实际的博客内容
Gatsby 是一个极其简洁的博客平台，允许你使用 Markdown 语言撰写博客文章。正如你在样板启动器中看到的那样，已经创建了一篇博客文章。点击该博客文章，你会看到一篇加载了美味培根 ipsum 的博客文章。
如果你查看博客文章的 URL，你应该会看到以下格式，2018/08/01/a-sample-gatsby-plus-tailwind-blog-post/这是由目录下的文件夹结构定义的pages。
博客文章写在 markdown 文件夹中，index.md图片是文章顶部定义的封面图片。这也是在 Facebook 和 Twitter 上分享时使用的图片。
但是 markdown 帖子如何变成 HTML 帖子呢？
好吧，其实不然。它实际上是由位于gatsby-config.js和gatsby-source-filesystem中的两个插件处理的gatsby-transformer-remark。第一个插件从目录中加载文件pages，并将它们输入到转换器中，转换器将 Markdown 语法转换为正确的 HTML。
您可以通过在该目录下创建新目录08并初始化新的markdown文件来创建新的博客文章。
mkdir pages\2018\08\02\new-post
touch pages\2018\08\02\new-post\index.md
现在您可以向新的 markdown 文件添加一些新内容。
---
title: This is a new post
date: "2018-08-02"
cover: ""
---
A brand new blog post from here.
如果您刷新本地主机博客，您应该会看到有一篇新的博客文章，其标题来自您的 markdown 文件。
很简单吧？
现在您已经知道如何使用 Gatsby 快速开发您的新博客并使用 Tailwind 来设计它以满足您的需求，让我们探索一下这个启动项目中内置的 SEO 和社交共享组件。
SEO和社交分享
如果你在博客上辛勤写作，就需要确保你的内容能够被那些觉得有用的人看到。这可以通过优化文章的搜索引擎优化 (SEO) 来实现，让其他读者更容易分享你的内容。
幸运的是，它已内置于 Gatsby 启动项目中。
templates您可以查看目录下的blog-post.js文件。这是定义每篇博文在博客上如何显示的模板。
return (
<div className="text-left p-4 bg-grey-lightest shadow-lg">
<Seo data={post} />
{
post.frontmatter.cover &&
<Img sizes={post.frontmatter.cover.childImageSharp.sizes} alt={post.frontmatter.title} className="w-full" />
}
<h1 className="text-3xl lg:text-5xl text-indigo-darker font-normal mt-6 mb-2">
{post.frontmatter.title}
</h1>
<p className="block mb-8 pb-4 border-b-2">
📅 {post.frontmatter.date} – {config.authorName}
</p>
<div className="blog-content" dangerouslySetInnerHTML={{ __html: post.html }} />
<div className="mt-16 pt-8 social-content text-center border-t">
<p className="font-light">Did you enjoy this post? Share the ❤️ with others.</p>
<Social url={url} title={post.frontmatter.title} />
</div>
<ul
className="mt-8 border-t-2 pt-4"
style={{
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-between',
listStyle: 'none',
paddingLeft: 0
}}
>
<li>
{
previous &&
<Link to={previous.fields.slug} rel="prev" className="text-indigo-darker hover:text-indigo-lighter">
← {previous.frontmatter.title}
</Link>
}
</li>
<li>
{
next &&
<Link to={next.fields.slug} rel="next" className="text-indigo-darker hover:text-indigo-lighter">
{next.frontmatter.title} →
</Link>
}
</li>
</ul>
</div>
)
查看返回的 HTML 模板，可以看到有两个自定义组件Seo正在Social被使用。那么它们到底在做什么呢？
如果您查看该Seo组件，您会发现它正在返回一个 React Helmet 组件。
<Helmet
htmlAttributes={{
lang: config.siteLanguage,
prefix: "og: http://ogp.me/ns#"
}}
>
<title>{title}</title>
<meta name="description" content={description} />
<link rel="shortcut icon" href={favicon} />
<meta property="og:url" content={url} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={image} />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:image" content={image} />
<meta name="twitter:description" content={description} />
<meta
name="twitter:creator"
content={config.authorTwitterAccount ? config.authorTwitterAccount : ""}
/>
</Helmet>
该组件接收单个博客文章，并返回标题、描述和网站图标所需的 HTML。这些标签对 SEO 至关重要。它还会返回 Facebook、og:url和 Twitter所需的元标签twitter:description。您新 Gatsby 博客中的每篇博客文章都会通过使用您文章中的内容自动获得此优化。
但您也希望您的内容易于分享。那么，让我们来看看该Social组件为每篇博文添加了哪些功能。
<ul className="list-reset inline-flex">
<li className="p-4">
<TwitterShareButton
url={url}
title={tweet}
className="button">
<TwitterIcon
size={32}
round={true} />
</TwitterShareButton>
</li>
<li className="p-4">
<FacebookShareButton
url={url}
quote={title}
className="button">
<FacebookIcon
size={32}
round={true} />
</FacebookShareButton>
</li>
</ul>
这里，该react-share组件用于创建 Twitter 和 Facebook 的分享按钮。每个按钮都预先填充了博客文章的标题和 URL，这样当用户点击时，他们就能看到即将发布的内容。
加分点：配置 AWS 基础设施来托管你的博客
如果您想开始学习亚马逊网络服务，那么这个奖励部分适合您。
本部分文章假设您已设置 AWS 账户并对该平台有初步了解。如果您对 AWS 完全陌生，可以考虑购买我的 AWS 学习课程包，该课程专注于通过实际使用来教授您该平台。在我的课程中，我们将重点学习 AWS 的核心服务，例如 S3、CloudFront、Lambda 和 API Gateway，并通过实际使用它们来托管、保护和交付静态网站。
启动项目中包含一个deployment文件夹。在这个文件夹中，我包含一个 Terraform 模板，用于配置 AWS 资源来托管您的博客。此模板在您的 AWS 账户中预置以下资源。
- 配置为静态网站托管的 S3 存储桶。存储桶名称必须与您博客的 URL 匹配。例如，我的博客位于
blog.kylegalbraith.com，因此存储桶名称为blog.kylegalbraith.com。 - 位于您的 S3 网站存储桶前端的 CloudFront CDN 分发版。它还配置为通过您传入的 ACM 证书启用 SSL。如果您不熟悉如何在 AWS 中为静态网站添加 SSL，请查看此博客文章。
那么，如何实际部署这套基础设施呢？好问题。以下是为你的博客部署 AWS 基础设施时应遵循的步骤。
- 确保您已安装并配置AWS CLI以与您的 AWS 账户交互。
- 安装Terraform并将其添加到您的，
PATH以便您可以从任何地方执行它。 - 现在您可以从目录中初始化 Terraform 模板
deployment。
cd deployment
terraform init
...
Initializing provider plugins...
- Checking for available provider plugins on https://releases.hashicorp.com...
- Downloading plugin for provider "aws" (1.30.0)...
- 初始化提供程序后，您可以运行
terraform plan以下命令来可视化地了解将要创建的资源。您可以通过标志将必要的变量传递variables.tf到命令中，如下所示。plan-var
terraform plan \
-var blog_url=blog.yourcoolsite.com \
-var acm_certificate_arn=arn:aws:acm:us-east-
1:yourAccountId:certificate/yourCert
...
The refreshed state will be used to calculate this plan, but will not be
persisted to local or remote state storage.
------------------------------------------------------------------------
An execution plan has been generated and is shown below.
Resource actions are indicated with the following symbols:
+ create
Terraform will perform the following actions:
+ aws_cloudfront_distribution.blog_distribution
- 该
plan方法会告知您将要配置哪些资源。要启动配置，您必须运行terraform apply，并传递与之前相同的变量。
terraform apply \
-var blog_url=blog.yourcoolsite.com \
-var acm_certificate_arn=arn:aws:acm:us-east-:yourAccountId:certificate/yourCert
...
Do you want to perform these actions?
Terraform will perform the actions described above.
Only 'yes' will be accepted to approve.
Enter a value: yes
aws_s3_bucket.blog: Creating...
- 该
apply命令需要几分钟才能完成，同时会创建 S3 存储桶和 CloudFront 分配。如果您想跳过上面的审批步骤，请将相应-auto-approve标志传递给该apply命令。 - 命令完成后，
apply您将拥有一个全新的 CloudFront 发行版，该发行版已配置 S3 网站存储桶作为您的博客托管的源站。下一步是更新您的 DNS 记录，以便将您的博客流量路由到 CloudFront 发行版。
配置好 AWS 基础设施后，您现在可以将 Gatsby 博客部署到 S3 存储桶了。具体操作如下：运行build脚本package.json，然后从 AWS CLI 运行 S3 复制命令。
npm run-script build
aws s3 cp public/ "s3://blog.yourcoolsite.com/" --recursive
此脚本运行build:css生成最终 TailwindCSS 的配置。然后，它会gatsby build生成生产版本并将内容输出到public目录中。之后，只需将该目录的内容复制到托管博客的 S3 存储桶即可。
结论
我更喜欢尽可能顺畅的流程。如果流程繁琐且需要大量手动操作，我就会感到心不在焉，因为这通常意味着要把时间花在不重要的事上。一天只有24小时，所以把时间浪费在繁琐的手动流程上并不理想。
过去，创建博客总是让我有这种感觉。我的旅程始于编写原始的 HTML，这并不好玩。后来我尝试了 WordPress 之类的工具，虽然更好用，但速度仍然很慢，开销也很大。最后，我换用了dev.to和Medium之类的平台，这很棒，因为它简化了创作流程，让我可以专注于内容。
但是，我仍然需要在自己拥有的某个东西上展示我的内容。Gatsby 解决了这个问题，并且做得非常好。Gatsby的人们创建了一个很棒的开源项目，拥有一个强大而充满活力的社区。
希望您已经了解使用 Gatsby 和 Tailwind 等工具创建并运行博客是多么简单。创建完成后，您可以将其部署到 AWS（如您在此处所见）或任何其他静态网站托管平台。
如果您有任何疑问或在尝试阅读这篇文章时遇到问题，请随时在下面给我留言。
感谢阅读！
附言：您渴望了解亚马逊网络服务吗？
想了解更多关于 AWS 的信息吗？我最近发布了一本电子书和视频课程，希望能帮您从海量信息中脱颖而出。它专注于在 AWS 上托管、保护和部署静态网站。目标是让您在使用过程中学习与此问题相关的服务。如果您一直想学习 AWS，但又不确定从哪里开始，不妨看看我的课程。
鏂囩珷鏉ユ簮锛�https://dev.to/kylegalbraith/how-to-make-an-awesome-blog-using-gatsbyjs-and-aws-33nc