几个简单步骤教你在GitHub Pages上部署Angular应用！

在本文中，我将与您分享我在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获得更多详细信息，但就我个人而言，我发现上述方法比使用该软件包更好、更清晰。

可以在下面留下问题和/或评论。

好看的人才能点