盖茨比乔布斯

by Hu Chen

胡Hu

如何使用盖茨比创建您的博客并通过手机进行处理 (How to use Gatsby to create your blog and work on it from your phone)

Recently, I decided to migrate my blog to Gatsby. Gatsby is a blazing fast static site generator based on React.

最近，我决定将博客迁移到Gatsby 。 Gatsby是基于React的出色的快速静态站点生成器。

问题 (The Issue)

人们为什么喜欢在Medium等平台上写作，而不是使用静态网站生成器？ (Why do people love to write on platforms like Medium rather than using static site generator?)

There are two kinds of people: people who write on platforms like Medium and people who code the blog themselves using static site generators.

有两种类型的人员：在Medium平台上编写的人员，以及使用静态网站生成器自己编写博客的人员。

There are lots of advantages to writing on public platforms like Medium over static site generators. If you write in public platforms, you can write on a laptop, and edit on your phone. Once you’ve finished writing, you just need to click the “Publish” button. Everything is done, your blog is live, and you can reach your audience right away.

与静态站点生成器相比，在诸如Medium这样的公共平台上进行书写有很多优点。 如果您在公共平台上书写，则可以在笔记本电脑上书写，也可以在手机上进行编辑。 完成编写后，只需单击“发布”按钮。 一切都完成了，您的博客已启用，您可以立即覆盖受众。

On the other hand, if you write a blog in static site generator, you will need to remember all the scripts, preview the blog on localhost, build the blog for production, commit and push your changes to GitHub, and deploy your site to the public. If anything goes wrong, you might have to repeat some of the steps and wait a few minutes until the blog online is what you want.

另一方面，如果您在静态站点生成器中编写博客，则需要记住所有脚本，在localhost上预览博客，构建用于生产的博客，将更改提交并推送到GitHub，并将站点部署到GitHub。上市。 如果出现任何问题，您可能必须重复一些步骤，然后等待几分钟，直到您想要的在线博客为止。

You will end up spending much more time doing unimportant things other than the actual writing.

与实际写作相比，您最终将花费更多的时间进行不重要的事情。

为什么要在盖茨比而不是公共平台上写作？ (Why should you write on Gatsby instead of public platforms?)

I guess this is why people eventually give up writing using a static site generator and write on Medium instead. But there is something Medium or Wordpress cannot provide: the more you write, the more you want to keep your writings in a secure place, in a simple format, just like you might keep your diary books for years.

我想这就是为什么人们最终放弃使用静态站点生成器来写而改为在Medium上写的原因。 但是，Medium或Wordpress无法提供某些功能：您写的越多，就越想将自己的作品以一种简单的格式保存在安全的地方，就像您可能将日记本保存多年一样。

But imagine that one day you want to migrate everything you wrote from Medium to somewhere else. That is when you hope you have written everything in Markdown and have a site hosting those Markdown files.

但是想象一下，有一天您想将您编写的所有内容从Medium迁移到其他地方。 那就是当您希望您已在Markdown中编写所有内容并拥有一个托管这些Markdown文件的站点时。

但是，如何使在盖茨比写作和在中型写作一样容易？ (But how can I make writing in Gatsby as easy as writing on Medium?)

Writing using a static site generator does not need to be difficult. I always believe that the easier it is to write and publish your blog, the more you will write. After trying and researching different setups, I am pretty happy with the result.

使用静态站点生成器进行写就没有困难。 我始终认为，撰写和发布博客越容易，您写的内容就越多。 在尝试并研究了不同的设置之后，我对结果非常满意。

In my setup with Travis CI, git push is the new "Publish" button. All you need to do is to commit and push your code. And I will also share how to edit the blog on your phone.

在Travis CI的设置中， git push是新的“发布”按钮。 您需要做的就是提交并推送您的代码。 我还将分享如何在手机上编辑博客。

I’ve divided this post into five sections:

我将这篇文章分为五个部分：

1. How to create a Gatsby blog

   如何创建盖茨比博客

2. Setting up Github Pages to host your blog

   设置Github Pages来托管您的博客

3. Seting up Travis for automatic deployment

   设置Travis以进行自动部署

4. Adding a new blog and publishing it

   添加新博客并发布

5. Bonus: How to write a blog on your phone

   奖励：如何在手机上写博客

1.如何创建盖茨比博客 (1. How to create a Gatsby blog)

There are plenty of tutorials on how to setup a blog using Gatsby that discuss all the powerful features Gatsby provides. This post will not focus on that, but I will still show some basic steps to get your blog up and running.

关于如何使用Gatsby设置博客的大量 教程 ，讨论了Gatsby提供的所有强大功能。 这篇文章不会专注于此，但是我仍然会展示一些基本步骤来启动和运行您的博客。

I assume you are already a JavaScript developer and know some basics of npm, yarn, and continuous integration. For this tutorial, I will be using yarn but feel free to use npm.

我假设您已经是JavaScript开发人员，并且了解npm ， yarn,和持续集成的一些基础知识。 对于本教程，我将使用yarn但可以随时使用npm 。

First, install gatsby-cli and create a new repo using Gatsby's official blog starter.

首先，安装gatsby-cli并使用Gatsby的官方博客启动器创建一个新的gatsby-cli 。

$ yarn global add gatsby-cli

$ gatsby new gatsby-blog https://github.com/gatsbyjs/gatsby-starter-blog

$ cd gatsby-blog

$ gatsby develop

Now, open localhost:8000 in your browser and you should see the generated blog in your browser.

现在，在浏览器中打开localhost:8000 ，您应该在浏览器中看到生成的博客。

2.设置Github Pages来托管您的博客 (2. Setup Github Pages to host your blog)

Now, let’s host the blog publicly.

现在，让我们公开托管该博客。

There are plenty of options to host your site for free, but I prefer to put both source code and production code in a single place. Since I commit my code to GitHub, I prefer to host my site using GitHub Pages. But feel free to use other services to host your static site.

有很多选项可以免费托管您的网站，但是我更喜欢将源代码和生产代码放在一个地方。 由于我将代码提交到GitHub，因此我更喜欢使用GitHub Pages托管网站。 但是，请随时使用其他服务来托管您的静态站点。

Note: Later I will need to use Travis CI to automatically deploy the website after each commit, so you might also need to check which platforms they support for deployment.

注意：以后，每次提交后，我将需要使用Travis CI自动部署网站，因此您可能还需要检查它们支持哪些平台进行部署。

Now, create a repo named username.github.io. This will be the repo of both the source code for your site and the generated production build.

现在，创建一个名为username.github.io的仓库。 这将是您网站的源代码和生成的生产版本的回购。

Because GitHub Page serves content from the master branch, you will need to deploy the content of the public folder generated by the yarn build command to the master branch. We will need to put our source code into another branch. We’ll call it develop.

因为GitHub的页面提供从内容master分支，你将需要部署的内容public在生成的文件夹yarn build命令到master分支。 我们需要将源代码放入另一个分支。 我们称之为develop 。

Let’s create an initial commit and rename the branch to develop.

让我们创建一个初始提交，并将分支重命名为develop 。

$ git init

$ git add .

$ git commit -m “Initial Commit”

$ git branch -m develop

Now, we need to push our code into GitHub. If you have already created the repo named username.github.io, push your code into the repo.

现在，我们需要将代码推送到GitHub中。 如果您已经创建了名为username.github.io的存储库 ，则将代码推送到该存储库中。

$ git remote add origin git@github.com:username/username.github.io.git

$ git push -u origin develop

Make sure that there is no master branch in your GitHub repo, and that the default branch is set to develop.

确保您的GitHub存储库中没有master分支，并且默认分支设置为develop 。

3.设置Travis以进行自动部署 (3. Setup Travis for automatic deployment)

This is an important step. Although we can use yarn deploy to deploy, that is another three steps: generate public folder, deploy to GitHub Page, wait and check online.

这是重要的一步。 尽管我们可以使用yarn deploy进行部署，但这是另外三个步骤：生成公用文件夹，部署到GitHub Page，等待并在线检查。

But we can get rid of those steps with Travis CI. Travis CI is a hosted, distributed, continuous integration service used to build and test software projects hosted on GitHub.

但是我们可以使用Travis CI摆脱这些步骤。 Travis CI是一项托管，分布式，连续集成服务，用于构建和测试GitHub上托管的软件项目。

If your project is public on GitHub, Travis CI is free. Now, create a Travis account by connecting to your GitHub and add your repo in Travis.

如果您的项目在GitHub上公开，则Travis CI是免费的。 现在，通过连接到GitHub创建一个Travis帐户，并在Travis中添加您的仓库。

创建一个 。 项目根目录中的travis.yml文件 (Create a .travis.yml file in the project root)

language: node_js

cache:

directories:

- ~/.npm

notifications:

email:

recipients:

- chen@huchen.me

on_success: always

on_failure: always

node_js:

- '9'

git:

depth: 3

script:

- yarn build

deploy:

provider: pages

skip-cleanup: true

keep-history: true

github-token: $GITHUB_TOKEN

local-dir: public

target-branch: master

on:

branch: develop

You can also view on Gist. Let me explain this config:

您也可以在Gist上查看。 让我解释一下这个配置：

• notifications: I asked Travis to send me an email on both success and failed to build. By default, it only sends an email if the status changed (for example, if it was success but changed to failed, or if it was failed, and changed to fixed the build). But I wanted to receive email even if it was success so I could double-check online.

  通知 ：我要求Travis向我发送有关成功和失败的电子邮件。 默认情况下，它仅在状态更改时发送电子邮件(例如，状态为成功但更改为失败，或者状态为失败并更改为修复内部版本)。 但是，即使成功了，我也希望收到电子邮件，因此我可以在线进行仔细检查。

• git:depth:3: I asked Travis to use depth 3 when cloning the project, as it will help make the build faster.

  git：depth：3 ：我要求Travis在克隆项目时使用depth 3 ，因为它将帮助加快构建速度。

• script: The script Travis needs to run is yarn build, which creates static files in the public folder for further deployment.

  脚本 ：Travis需要运行的脚本是yarn build ，它将在public文件夹中创建静态文件以进行进一步部署。

• deploy: I asked Travis to deploy to GitHub Pages after yarn build script success. It uses the $GITHUB_TOKEN I set in the Travis repo setting (I will come to this next), pushes contents in public folder into GitHub master branch, and should only trigger deploy on the develop branch. Click here to read more about deploying config.

  deploy ：在yarn build脚本成功后，我要求Travis部署到GitHub Pages。 它使用$GITHUB_TOKEN的特拉维斯我一套回购设置(我会来这下)，推送内容的public文件夹到GitHub的master分支，只应在触发部署的develop分支。 单击此处以了解有关部署配置的更多信息。

为Travis创建令牌以推送到GitHub (Create a token for Travis to push to GitHub)

You’ll need to generate a personal access token with the public_repo or repo scope (repo is required for private repositories) to allow Travis to push code to the GitHub repo. This is because Travis runs yarn build and needs to push the public folder into the master branch where GitHub Pages is serving.

您需要生成一个具有public_repo或repo范围的个人访问令牌 (私有存储库需要repo)，以允许Travis将代码推送到GitHub存储库。 这是因为特拉维斯运行yarn build并须推动public文件夹到master分支，其中GitHub的页面是服务。

Once a token is created, you will need to copy and paste it into your Travis repo settings.

创建令牌后，您需要将其复制并粘贴到Travis存储库设置中。

Now, add .travis.yml in git and push changes to GitHub.

现在，在git中添加.travis.yml并将更改推送到GitHub。

$ git add .travis.yml

$ git commit -m “Add Travis config file”

$ git push origin develop

Now, you can check the status on Travis. You should see Travis’ status changed to yellow (running). If everything is ok, it will turn green in a few minutes, and you should receive an email about the successful build. You can visit https://username.github.io to view your blog you just created.

现在，您可以在Travis上查看状态。 您应该看到Travis的状态更改为黄色(正在运行)。 如果一切正常，几分钟后它将变为绿色，您将收到有关成功构建的电子邮件。 您可以访问https://username.github.io来查看刚刚创建的博客。

4.添加一个新博客并发布 (4. Add a new blog and publish)

Here comes the fun part. Now I will demonstrate how easy it is to publish a new blog using this process.

这里是有趣的部分。 现在，我将演示使用此过程发布新博客是多么容易。

Now, let’s add a new blog.

现在，让我们添加一个新博客。

1. Create a file index.md in src/pages/new-blog; . You will need to create a new folder new-blog as well.

   在src/pages/new-blog;创建文件index.md src/pages/new-blog; 。 您还需要创建一个新文件夹new-blog 。

2. Put some simple content in index.md.

   将一些简单的内容放在index.md 。

---

title: Hello New Blog

date: "2018–04–16T23:46:37.121Z"

---

Hello World

3. Commit this new file and push into GitHub

3.提交这个新文件并推送到GitHub

$ git add .

$ git commit -m “Add a new blog”

$ git push origin develop

4. Wait for Travis to finish and check online. After you receive an email a few minutes later, you can check https://username.github.io again. You should see your new blog in the list.

4.等待Travis完成并在线检查。 几分钟后收到电子邮件后，可以再次检查https://username.github.io 。 您应该在列表中看到新博客。

5.奖励：如何通过手机撰写博客 (5. Bonus: how to write the blog from your phone)

I want to remove another barrier to writing your blog. I was only able to write my blog when I was with my laptop, but I wondered: could I use my phone to craft ideas and edit?

我想消除编写您的博客的另一个障碍。 我只有在笔记本电脑上时才能写博客，但我想知道：我可以用手机来制作想法和编辑吗？

It turned out to be pretty easy. All you need to do is to add your Desktop and Documents files to iCloud Drive and put your repo either in Desktop or Documents. It may take some time initially, but once everything is uploaded, the updates are instant and I can view my edits in my laptop, my iPhone, and iPad at the same time without any issues.

事实证明这很容易。 您需要做的就是将您的桌面和文档文件添加到iCloud Drive中 ，并将您的存储库放入桌面或文档中。 最初可能需要一些时间，但是一旦上传了所有内容，更新就会立即生效，我可以同时在笔记本电脑，iPhone和iPad上查看自己的修改，而不会出现任何问题。

There are plenty of markdown apps on iPhone. Personally, I find IA Writer is the best: it supports all platforms, it is elegant and focused on writing, and it supports iCloud Drive very well.

iPhone上有很多降价应用。 我个人认为IA Writer是最好的：它支持所有平台，优雅且专注于编写，并且很好地支持iCloud Drive。

Although I can also setup my iPhone to do git commits and pushes, I feel it is not necessary. If the most difficult part of writing a blog is already done, using a laptop to do the final checking and committing the code is not a big issue for me. git push is as simple as clicking the "Publish" button on Medium.

尽管我也可以将iPhone设置为执行git commit和push，但我觉得没有必要。 如果写博客最困难的部分已经完成，那么使用笔记本电脑进行最终检查并提交代码对我来说不是什么大问题。 git push就像单击Medium上的“发布”按钮一样简单。

而已！ (That’s it!)

We have come to the end of this tutorial. Thank you for reading this far.

我们到了本教程的结尾。 感谢您阅读本文。

This post is just the tip of the iceberg of Gatsby’s features. I am amazed by its flexibility and powerful features. You should definitely checkout its official tutorial.

这篇文章只是盖茨比功能冰山一角。 它的灵活性和强大的功能令我惊讶。 您绝对应该查看其官方教程 。

翻译自: https://www.freecodecamp.org/news/how-to-write-a-blog-using-gatsby-from-your-phone-e92a99851a04/

盖茨比乔布斯