github部署_在几分钟内部署Github页面

github部署

So last Thursday night I couldn’t sleep, and after a few minutes of losing a starring contest with the wall I decided this was the perfect opportunity to try deploying an app on Github Pages. (true story)

因此，在上周四晚上，我无法入睡，在输掉了与众不同的比赛之后，我决定这是尝试在Github Pages上部署应用程序的绝佳机会。 (真实的故事)

Let me preface by saying it’ll prob take me longer to type this article up than it did to deploy my app. BOLD statement I know! Quote me on it I’m ready.

首先，请允许我说出这篇文章输入的时间比部署我的应用程序花费的时间更长。 我知道大胆的声明！ 引用我已经准备好了。

创建应用程序步骤1 (Creating the App Step 1)

I’m going to make few assumptions here. One, that you have a github account and two, that you know how to set up a repo. Full disclosure this is a React App walk through. However it’s pretty straightforward and most steps are transferable or intuitive when moving to another setup.

我将在这里做一些假设。 一是您有一个github帐户，二是您知道如何设置存储库。 全面披露这是一个React App演练。 但是，这非常简单，在转移到其他设置时，大多数步骤都是可转移的或直观的。

First step make a github repo for your app. Your repo name will become part of your URL so name accordingly. Also unless you’re paying for github, this repo has to remain public to work.

第一步，为您的应用程序创建一个github存储库。 您的回购名称将成为您URL的一部分，因此请相应地命名。 另外，除非您为github付费，否则此回购协议必须保持公开状态才能工作。

To test github pages, you can fire up almost any application I decided to make a quick Portfolio Website for myself using create-react app. You can also just deploy a simple html boiler plate even. This served as great draft for an actual Portfolio I plan on moving to my own domain in a few days. Finished product:

要测试github页面，您可以启动几乎所有我决定使用create-react app为自己创建快速投资组合网站的应用程序 。 您甚至还可以部署一个简单的html样板。 这是我计划在几天内迁移到我自己的域的实际投资组合的很好的草稿。 完成的产品：

The key here is that once your app is done or at a point where you’re ready to deploy, make sure the app is already pushed up to github.

这里的关键是，一旦您的应用程序完成或准备部署，请确保该应用程序已推送到github。

部署应用程序步骤2 (Deploying the App Step 2)

How exciting! Your app is up and running, let’s go! First thing you need to do is add gh-pages to your dependencies. In your terminal run:

多么激动人心！ 您的应用程序已启动并正在运行，开始吧！ 您需要做的第一件事是将gh页添加到您的依赖项中。 在您的终端运行中：

use npm install gh-pages — save-dev

使用npm安装gh-pages — save-dev

I also took this app as an opportunity to use yarn as my dependency manager, if you’re doing the same the docs say to use yarn add gh-pagesbut I found that I needed to use the above flags, so if you run into an issue installing use

我还以这个应用程序为契机，将yarn用作我的依赖项管理器，如果您执行相同的操作，则文档上说要使用yarn add gh-pages但是我发现我需要使用上述标志，因此如果遇到安装使用时出现问题

yarn add gh-pages — save-dev .

yarn添加gh-pages-save-dev。

Okay great job we’re almost there. Now go back to your github repo and click on settings.

好的，我们快到了。 现在回到您的github仓库并点击设置。

go to Settings

前往设置

in your settings scroll all the ay down to the Section called github pages.

在您的设置中，将所有ay向下滚动到名为github页面的部分。

For now set this source to the master branch and save. You’ll see this immediately gives you a link, if not refresh the page.

现在，将此源设置为master分支并保存。 如果没有刷新页面，您会立即看到一个链接。

Copy this link we’re going to need it! Go back to your create react app. and in your package.json file make and new line under private and add a hompage key pointing at a value of your url so paste it here. Looks like this:

复制此链接，我们将需要它！ 返回到您的create react应用。 并在package.json文件中的private下添加新行和换行，并添加指向您的url值的hompage键，因此请将其粘贴到此处。 看起来像这样：

Now under the scripts we need to add a couple keys. We’ll be adding in the “predeploy” key and “deploy”.

现在，在脚本下，我们需要添加几个键。 我们将添加“ predeploy”键和“ deploy”。

If you’re using npm as your dependency manager. (meaning if you’ve been using npm to install your dependencies) add the following lines under your script tag

如果您使用npm作为依赖项管理器。 (这意味着如果您一直在使用npm来安装依赖项)，请在脚本标签下添加以下几行

“predeploy”: “npm run build”,
“deploy”: “gh-pages -d build”

it’ll look something like this in your package.json.

在package.json中看起来像这样。

As a mentioned previously I used yarn so my lines look like this

如前所述，我使用了纱线，所以线条看起来像这样

"predeploy": "yarn build","deploy": "gh-pages -d build"

关键时刻！ (Moment of truth!)

now that your dependencies are all squared away lets commit one last time

现在您的依赖关系都已消除，让我们最后一次提交

git add .git commit -m”adding configurations to dependencies”

but instead of git push now try running

但是现在尝试运行而不是git push

npm run deploy

or if using yarn

或者使用纱线

yarn run deploy

now let’s go back to your github pages settings one last time. Now you should see an option for a gh-pages branch

现在，让我们最后一次回到您的github页面设置。 现在您应该看到gh-pages分支的选项

select and save it! Congrats the setup is done! ✅ It takes a few minutes so if you visit your url now it may give you a 404 but be patient after a few page refreshes you should see your app!

选择并保存！ 恭喜安装完成！ ✅这需要几分钟，因此如果您现在访问URL，它可能会给您404，但请耐心等待几页刷新后，您应该会看到您的应用！

阿西德斯 (Asides)

• after deploying don’t for get to make one last git add ., git commit, git push, to save your configs.
  部署后，不要再做最后一个git add。，git commit，git push来保存您的配置。
• If you have multiple pages in your app first of all make sure that your internal routes are pointing at your new github url.
  如果您的应用中首先有多个页面，请确保您的内部路由指向您的新github网址。

利弊 (Pros and Cons)

Github pages is quick and easy for testing, this is really great to see your app in action. However github page is only really made to support single page apps. If you have a MPA I suggest only using this to “see” the app in it’s glory but not to use it. This is a result of github providing you with one homepage route and a single route for each application. So any additional “/something” you add don’t have a real url and therefore cannot perform restful things. You can see this in action on my portfolio if you try to hit the back button or if you try to submit an email to the form. From my local host 3000 I can submit emails no problems. However because the form doesn’t live on the homepage when I deployed to github pages it is not really connected to my app. Therefore I’ll be moving this particular MPA app to a new host supporting my additional urls. But again for SPA apps this is a great easy way to see your app in action!

Github页面可以快速轻松地进行测试，这对于您的应用程序的运行真的很棒。 但是，github页面实际上仅是为了支持单页面应用程序而制作的。 如果您有MPA，建议您仅使用它来“看”应用程序的荣耀，而不要使用它。 这是github为您提供一个主页路由和每个应用程序一个路由的结果。 因此，您添加的任何其他“ /某物”都没有真实的网址，因此无法执行轻松的操作。 如果您尝试点击“后退”按钮或尝试向表单提交电子邮件，那么您可以在我的投资组合中看到这一点。 从我的本地主机3000，我可以毫无问题地提交电子邮件。 但是，由于当我部署到github页面时该表单并不存在于主页上，因此它并未真正连接到我的应用程序。 因此，我将把这个特定的MPA应用程序移动到支持我的其他URL的新主机上。 但是对于SPA应用程序而言，这再次是查看应用程序运行情况的简便方法！

again if you want to see the finished product link here.

如果您想在此处查看成品链接，请再次输入。

As always I would love to hear from you the reader, if you have any feedback or questions, don’t hesitate to reach out.

与往常一样，如果您有任何反馈或问题，我很乐意听取您的意见，请随时与我们联系。

翻译自: https://medium.com/swlh/deploy-github-pages-in-minutes-32d1b22b5c93

github部署