在本文中,我将与您分享我在GitHub Pages上发布Angular应用程序时学到的东西。我发现GitHub Pages是发布网站的非常有效且简单的一个平台。因此,在本文中,我将以发布应用程序的相同方式来解释该过程。
我已经在Angular中开发了这个简单的Todo应用程序,其中我将通过以下简单步骤来说明如何在GitHub Pages上进行部署...
在GitHub上部署本地存储库
GitHub Pages提供了一种非常方便的方法来从GitHub存储库中部署静态网站。因此,您需要在GitHub.com上拥有一个帐户才能关注本文。
首先,您需要将代码放在本地存储库中,位于github.com的远程存储库中,因此,如果您没有GitHub帐户,则需要立即创建它。
然后,登录到GitHub帐户并创建一个存储库,您将在其中上传本地代码。在这里,我创建了一个名为todo-app的存储库。
请注意,新创建的存储库的URL(https://github.com/sanjaysaini2000/todo-app.git)将用于为本地存储库设置远程存储库,以便将本地存储库代码推送到GitHub存储库
假设您已经在机器上安装了git,并且已经在本地存储库的master分支中提交了代码,请在app文件夹中打开git bash,然后使用GitHub存储库URL运行以下命令以将代码上传到github. com存储库。
git remote add origin <your GitHub repository URL>
git push -u origin master
刷新您的GitHub存储库,并检查您的代码是否已推送到新创建的GitHub存储库中。
构建您的代码以生成可部署项目
现在,我们需要在生产模式下构建代码,以创建将在GitHub Pages上部署的可分发文件。默认情况下,这个可部署代码是在app文件夹下的/dist/文件夹中生成的,但是我们需要在app文件夹下的“docs”文件夹中生成。
因此,我们需要在angular.json文件中进行少量更改,并将outputpath值更改为“ docs /”。
还要注意的一点是,您的URL将作为
https://username.github.io/respositoryname托管在Github Pages上。
就我而言,它是https://sanjaysaini2000.github.io/todo-app。
在生成可分发文件以部署在GitHub Pages上时,需要此URL来设置我们网站的基本URL。
因此,在使用git bash窗口中base-href选项中的网站URL运行以下命令,以在docs文件夹中生成可分发文件。
ng build - -prod –base-href=” https://username.github.io/respository-name/”
请注意,用户名和存储库名称将是您的GitHub用户名和存储库名称。
转到您的app文件夹,并检查docs文件夹是否已创建并包含所有可分发文件。
现在,通过在git bash窗口中运行以下命令,将该文件夹提交到本地存储库中,并将其推入GitHub存储库中。
git add .
git commit -m "generated deployables"
git push -u origin master
配置GitHub存储库以在GitHub Pages上发布
将docs文件夹推送到GitHub存储库后,您需要打开存储库设置,然后转到GitHub Pages部分,然后从source下拉列表中选择“ master branch / docs folder”。就是这样!
现在,在浏览器窗口中打开已部署应用程序的GitHub Pages URL,以检查您的应用程序是否已成功部署在GitHub Pages上。
todo-app的链接:https://sanjaysaini2000.github.io/angular-todo-app/(我不得不创建另一个名为angular-todo-app的存储库,因此请不要与本网站URL中的其他存储库名称混淆。)
您可以使用另一种方法将Angular应用程序部署在GitHub Pages上—使用angular-cli-ghpages软件包。您可以通过Google获得更多详细信息,但就我个人而言,我发现上述方法比使用该软件包更好、更清晰。
可以在下面留下问题和/或评论。
好看的人才能点