如何在Github Pages上使用Angular 2设置网站

时间:2016-08-28 04:29:04

标签: javascript node.js angular github-pages

Angular 2 quickstart tutorial之后,我创建了我的网站并希望它在Github Pages上运行。但是,我目前通过在终端中使用npm start命令来运行它。我需要进行哪些更改才能在将其推送到Github后正确加载?

1 个答案:

答案 0 :(得分:3)

在我的拙见中,Angular2快速入门是一个痛苦的但是。一点都不快!!

我建议你开始使用Angular2 CLI(命令行工具)。它快速,易于使用,内置构建过程 ..你得到一个dist文件夹..等等只有优势..

构建过程在这里非常重要,因为如果您想使用gh-pages在GitHub上托管您的应用程序 - 您只能使用 一个命令来执行此操作:

ng github-pages:deploy 

但这是推荐的方式。在你的情况下,它是不同的。

按照快速入门指南,您没有适当的构建过程,因此您可以将整个angular2-quickstart文件夹推送到gh-pages分支上的git repo。

首先:安装git,创建一个github帐户和一个github存储库。

第二:使用CMD或某个终端,导航到angular2-quickstart文件夹,然后运行以下命令:

基本设置

git init --> your local, angular2-quickstart folder, becomes a git repository.

git commit -am "messaage: this stuff goes on master branch.."

git remote add origin <your GitHub repository url here> --> this will add the remote url, where you can push and pull.

git push origin master --> your hole folder will be available on GitHub on the master branch

在GitHub上托管您的应用

git checkout -b gh-pages  -> this creates a new branch called gh-pages based of master, and moves you to it.

git commit -am "your commit message" - you must have at least one commit in order to push.

git push origin gh-pages -> this will push the hole gh-pages branch from local repo - to the GitHub repo and hosting servers.

gh-pages分支上的所有内容都可以在此网址获得:http://your-github-username.github.io/your-repository-name/。它与从本地主机加载的内容相同......

你会看到通过网络电话下载的大量文件 - 这是因为它没有到位的构建过程 - 没有缩小,没有捆绑,没有任何东西..但是工作,我测试了它!祝你好运!