React 博客构建及部署仅需 10 分钟

你好！你认识Dan Abramov吗？他是广受欢迎的 Javascriptreact-redux库的创建者，也是 React 核心团队的成员。

在这篇文章中，我们将使用React、Gatsby及其服务器端渲染/GraphQL 功能，在不到10 分钟的时间内，基于他的网站overreacted.io创建并部署一个博客！

我们的目标：

先决条件

node如果您的系统上尚未安装，请按照nodejs.org上的相应安装说明进行操作。

我们开始吧！

首先我们需要做的就是安装gatsby-cli：

npm i -g gatsby-cli

现在我们可以启动项目了。

gatsby new blazing-fast-blog https://github.com/gatsbyjs/gatsby-starter-blog-theme

此命令克隆项目模板并准备开发环境。

完成后，我们就可以启动应用程序了：

cd blazing-fast-blog ; gatsby develop

我们的页面应该会在几秒钟内加载完毕。

检查它是否正在运行 - http://localhost:8000

启动后，您还可以快速查看此处运行的GraphQL 数据浏览器-> http://localhost:8000/___graphql

目前这对我们来说并不重要，但在开发过程中非常有用（当然，它只能在网站的开发版本上运行）。

我们需要做一些快速调整：

• 打开gatsby-config.json

这是一个可以配置 Gatsby 站点的文件——我们可以添加和配置插件或定义站点元数据。

目前，您可以在该部分调整title、author和。descriptionsiteMetadata

调整完毕后siteMetadata，打开src/gatsby-theme-blog/components/gatsby-plugin-theme-ui/colors.js

在这里，您可以更改默认主题颜色。

src/gatsby-theme-blog/components/gatsby-plugin-theme-ui/colors.js将文件内容替换为：

import merge from "deepmerge"
import defaultThemeColors from "gatsby-theme-blog/src/gatsby-plugin-theme-ui/colors"

const darkBackground = `#282B35`
const darkPrimary = `#F9A6C4`
const lightBackground = `#FFFFFF`
const lightPrimary = `#D23669`

export default merge(defaultThemeColors, {
 primary: lightPrimary,
 lightBackground: lightBackground,
 modes: {
 dark: {
 background: darkBackground,
 primary: darkPrimary,
 },
 },
})

保存更改。现在，访问http://localhost:8000并与overreacted.io进行比较。

只花了短短几分钟就取得了不错的成果，对吧？我们为网站的进一步定制和开发打下了良好的基础。

通过编辑colors.js文件，我们使用了 Gatsby 的主题阴影概念，但在深入了解 Gatsby 的细节之前，让我们先部署我们的网站！

部署

我们会使用它——它免费Netlify提供CI/CD 流水线、SSL 证书、自定义域名、主机托管以及与 GitHub 的集成。一切都几乎是自动完成的——对我来说，他们的免费套餐简直太划算了！

发布网站新版本的流程是怎样的？

1. 您可以编辑网站/创建新内容
2. 你提交并推送到你的 GitHub 仓库
3. Netlify能够检测新的提交，构建页面，运行测试并无缝部署新版本。

要部署我们的网站，首先需要做的就是在我们的 GitHub 帐户上创建一个新的存储库。

• 访问github.com，登录并创建一个新的仓库

创建一个新的 GitHub 仓库后，在终端中导航到我们的项目文件夹。

然后，将更改提交并推送到新创建的 GitHub 存储库（使用正确的 YOUR_USERNAME 和 REPO_NAME）：

git add . 
git commit -m "Initial structure"
git remote add origin https://github.com/${YOUR_USERNAME}/${REPO_NAME}.git 
git push -u origin master

现在是时候访问Netlify.com并注册登录了。

登录后，导航至您的Profile->Sites

点击New site from Git

选择 GitHub 并授权

授权后，应显示存储库列表：

如果您没有看到新的存储库，请点击Configure the Netlify app on GitHub并授予 Netlify 访问您存储库的权限。

完成此操作后，请从列表中选择您的存储库。

下一步，只需点击Deploy site

就这样！稍等片刻，您的网站即可上线运行。您可以在这里查看其网址：

完成并部署！

如果您有自定义域名，您可以按照Netlify 入门指南第二步中的说明，使用您的域名代替。

结论

在这篇文章中，我们仅用了几分钟就创建了一个类似 overreacted.io 的博客，并将其部署到了 Netlify。这​​为我们日后进行博客定制打下了坚实的基础，也让我们有机会在维护博客的同时学习 React、GraphQL 和 Gatsby。

如果你喜欢这篇文章，或者想让我写更多关于 Gatsby 和网站定制/添加功能的文章，请在评论和点赞中告诉我。

感谢阅读！