4.7 KiB
| title | localeTitle |
|---|---|
| Use Github Static Pages to Host Your Front End Projects | 使用Github静态页面来托管您的前端项目 |
优点
我喜欢Codepen.io，它是一个简单易用的工具，可用于简单的前端实验。但随着fcc项目变得越来越复杂，我意识到本地编码会给我带来一些麻烦。我的文本编辑器和代码套件组合速度更快。
- 自动完成
- 编译所有东西（codepen真的拖着试图编译Jade）
- 更好的自动刷新
- 内置凉亭
- Git版本控制
- 改善了屏幕房地产体验
Git到Github
由于我已经在本地保存，并使用git进行版本控制，我想也可以上传到Github。此外，Github还为前端项目提供了一个非常棒的免费服务，称为Github Pages 。只需更新您的仓库，您的更改即会生效。
它的工作原理很简单。 Github检查您的存储库是否有一个名为gh-pages的分支，并提供位于该分支中的任何代码。这里没有后端内容，但HTML，CSS和JS就像魅力一样。
首先要做的事情
让我们为您的项目创建一个新文件夹。我将以Camper News项目为例。
到达您的工作目录并创建一个新目录。您可以在终端中执行此操作（或不执行此操作）。
现在，进入项目目录，并且（这次在终端中确定）使用命令git init 。注意，本教程假设您已安装git 。
好的，太棒了。现在我们准备工作了。
下一步
在campNews目录中创建一些文件。我不知道，也许是index.html，可能是app.css和app.js，或者你喜欢的任何命名约定。将您的代码放在这些文件中。好的，现在我们已经为第一次提交做好了准备。它需要两个步骤 。
git add -A将准备所有这些新文件及其中的新代码git commit -m 'relevant message'将把你所做的所有工作提交到你当前所在的分支（默认为'master'）
这整件事的关键
好的，到目前为止我们仍然在当地。我们需要做一些事情来完成我们的工作并将其转移到github。在这一点上，我喜欢切换分支。请记住 - github仅从gh-pages提供服务，如果你到目前为止，你的分支被称为'master'。让我们创建一个新的（本地）gh-pages分支。
git checkout -b gh-pages将创建它，将所有工作从master复制到gh-pages并切换到分支。唷。
git branch -d master将摆脱master分支。听起来很疯狂我知道，但我们需要它做什么？只需将gh-pages视为新的主分支。
现在，为了以防万一， git add -A再次git add -A和git commit -m 'relevant message' 。并准备离开您的编辑和终端，并第一次上网。
转到您的github配置文件并创建一个新的repo。将其命名为相关内容，例如campNews。
创建后，进入并获取HTTPS克隆URL。 （忽略我的屏幕截图中的文件，此时您的仓库将为空）。
把它们放在一起
你可以离开网络世界。回到终端！让我们将我们的本地项目连接到这个github仓库。所需要的只是一个命令。
git remote add origin <server>只需用刚刚复制的HTTPS url替换服务器。所以我的命令看起来像这样：
git remote add origin https://github.com/gkobilansky/campNews.git 。
好的，到目前为止我们已经：
- 创建了我们的项目
- 用git对它进行了版本控制
- 进行了一些改变
- 将其切换到'gh-pages'分支
- 将它连接到github
最后一步！
将项目推送到github。同样，简单：
git push origin gh-pages
该命令将确保您的最新提交上传到github。一旦你完成了至少一次，你的项目应该是http：// username .github.io / repository ，所以对我来说它是http://gkobilansky.github.io/campNews 。
完成所有操作后，该过程将重复：
git add -Agit commit -m 'relevant message'git push origin gh-pages
当然，比codepen.io更陡峭的学习曲线，但是一旦掌握了它，就会更快，更灵活。
快乐的编码！
PS。感谢Roger Dudler的这本指南 ，让事情变得简单。