gatsby_如何使用Gatsby和MDX从头开始构建编码博客

gatsby

I have been a Gatsby user since around version 0 back in May 2017.

自2017年5月左右发布第0版以来，我一直是Gatsby用户。

Back then, I was using a template called Lumen. It was just what I needed at the time. Since then I have gone from using a template to creating my blog.

那时，我使用的模板叫做Lumen 。当时正是我所需要的。从那以后，我从使用模板转到了创建博客。

Over the years I have built my own Progressive Disclosure of Complexity with Gatsby to where I am now.

多年来，我已经与盖茨比建立了自己的渐进式复杂度披露体系，直至现在。

那是什么意思？ (What does that mean?)

It means that although there are an awesome amount of Gatsby starters and themes out there to get you up and running in minutes, this post is going to focus on what you need to do to build your own blog. Starting with the most basic “Hello World!” to deploying your code to production.

这意味着，尽管那里有大量的盖茨比启动器和主题可以让您在数分钟内启动并运行，但本文将着重于构建自己的博客所需的工作。从最基本的“ Hello World！”开始将代码部署到生产中。

你要建造什么 (What you’re going to build)

You’re going to build a developer blog with MDX support (for some React components in Markdown goodness), so you will be able to add your own React components into your Markdown posts.

您将建立一个具有MDX支持的开发者博客(针对Markdown的一些React组件)，因此您将能够在Markdown帖子中添加自己的React组件。

There’ll be:

将会有：

Adding a Layout添加布局
Basic styling with styled-components具有样式化组件的基本样式
Code blocks with syntax highlighting带有语法突出显示的代码块
Copy code snippet to clipboard将代码段复制到剪贴板
Cover images for the posts帖子的封面图片
Configuring an SEO component配置SEO组件
Deploying it to Netlify部署到Netlify

此操作方法适用于谁？ (Who is this how-to for?)

People that may have used Gatsby before as a template and now want to get more involved in how to make changes.

以前可能使用Gatsby作为模板的人，现在希望更多地参与如何进行更改。

If you want to have code syntax highlighting.

如果要突出显示代码语法。

If you want to use styled-components in an app.

如果要在应用程序中使用样式化组件。

I really want to avoid this!

我真的很想避免这种情况！

要求 (Requirements)

You’re going to need a basic web development setup: node, terminal (bash, zsh or fish) and a text editor.

您将需要一个基本的Web开发设置：节点，终端(bash，zsh或fish)和文本编辑器。

I do like to use codesandbox.io for these sort of guides to reduce the barrier to entry but in this case I have found there are some limitations with starting out from scratch on codesandbox.io which doesn’t make this possible.

我确实喜欢将codesandbox.io用于此类指南，以减少进入的障碍，但是在这种情况下，我发现从codesandbox.io的白手起家存在一定的局限性，这无法实现。

I have made a guide on getting set up for web development with Windows Web-Dev Bootstrap and covered the same process in Ubuntu as well.

我已经为使用Windows Web-Dev Bootstrap进行Web开发设置做了一个指南，并且也介绍了Ubuntu中的相同过程。

Ok? Time to get started!

好？是时候开始了！

你好，世界 (Hello World)

To kick this off with the Gatsby ‘hello world’, you’ll need to initialise the project with:

要使用盖茨比“ hello world”开始这一工作，您需要使用以下代码初始化该项目：

npm init -y
git init

I suggest that you commit this code to a git repository, so you should start with a .gitignore file.

我建议您将此代码提交到git存储库，因此您应该以.gitignore文件开头。

touch .gitignoreecho "# Project dependencies
.cache
node_modules# Build directory
public# Other
.DS_Store
yarn-error.log" > .gitignore

Ok now is a good time to do a git init and if you’re using VSCode you’ll see the changes reflected in the sidebar.

好了，现在是进行git init的好时机，如果您使用的是VSCode，您会在侧边栏中看到更改。

基本的问候世界 (basic hello world)

Ok a Gatsby hello world, get started with the bare minimum! Install the following:

好的，盖茨比世界你好，请从最低限度开始！安装以下内容：

yarn add gatsby react react-dom

You’re going to need to create a pages directory and add an index file. You can do that in the terminal by typing the following:

您将需要创建一个页面目录并添加一个索引文件。您可以在终端中输入以下命令来执行此操作：

# -p is to create parent directories too if needed
mkdir -p src/pages
touch src/pages/index.js

Now you can commence the hello word incantation! In the newly created index.js enter the following:

现在您可以开始打招呼了！在新创建的index.js输入以下内容：

import React from 'react';export default () => {return <h1>Hello World!</h1>;
};

Now you need to add the Gatsby develop script to the package.json file, -p specifies what port you want to run the project on and -o opens a new tab on your default browser, so in this case localhost:9988:

现在，您需要将Gatsby开发脚本添加到package.json文件， -p指定要在其上运行项目的端口，并且-o在默认浏览器上打开一个新标签，因此在本例中为localhost:9988 ：

"dev": "gatsby develop -p 9988 -o"

And now it’s time to run the code! From the terminal type the npm script command you just created:

现在该运行代码了！在终端中，输入您刚刚创建的npm脚本命令：

yarn dev

Note I’m using Yarn for installing all my dependencies and running scripts. If you prefer you can use npm, just bear in mind that the content on here uses yarn, so swap out commands where needed.

注意我正在使用Yarn来安装我的所有依赖项并运行脚本。如果愿意，可以使用npm，请记住这里的内容使用yarn，因此请在需要的地方换出命令。

And with that the “Hello World” incantation is complete