蓋茨比喬布斯

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:

我將這篇文章分為五個部分：

How to create a Gatsby blog
如何創建蓋茨比博客
Setting up Github Pages to host your blog
設置Github Pages來托管您的博客
Seting up Travis for automatic deployment
設置Travis以進行自動部署
Adding a new blog and publishing it
添加新博客并發布
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.

現在，讓我們添加一個新博客。

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 。
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.

這篇文章只是蓋茨比功能冰山一角。它的靈活性和強大的功能令我驚訝。您絕對應該查看其官方教程。