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 -A
git commit -m 'relevant message'
git push origin gh-pages
当然,比codepen.io更陡峭的学习曲线,但是一旦掌握了它,就会更快,更灵活。
快乐的编码!
PS。感谢Roger Dudler的这本指南 ,让事情变得简单。