{"id":4171,"date":"2023-11-04T23:14:06","date_gmt":"2023-11-04T23:14:06","guid":{"rendered":"http:\/\/localhost:10003\/how-to-deploy-an-angular-app-to-github-pages\/"},"modified":"2023-11-05T05:47:58","modified_gmt":"2023-11-05T05:47:58","slug":"how-to-deploy-an-angular-app-to-github-pages","status":"publish","type":"post","link":"http:\/\/localhost:10003\/how-to-deploy-an-angular-app-to-github-pages\/","title":{"rendered":"How to Deploy an Angular App to GitHub Pages"},"content":{"rendered":"

In this tutorial, we will learn how to deploy an Angular application to GitHub Pages. GitHub Pages is a static site hosting service provided by GitHub which allows you to host your website directly from your GitHub repository. Deploying your Angular app to GitHub Pages is a convenient way to make your application accessible to the public.<\/p>\n

By the end of this tutorial, you will have a fully deployed Angular app on GitHub Pages that you can share with others.<\/p>\n

Prerequisites<\/h2>\n

Before we begin, make sure you have the following prerequisites:<\/p>\n

    \n
  1. Node.js and npm installed on your machine. You can download and install them from the official Node.js website<\/a>.<\/li>\n
  2. Angular CLI installed globally. You can install it by running the following command in your terminal:
    \nnpm install -g @angular\/cli<\/code><\/li>\n<\/ol>\n

    Step 1: Create a New Angular App<\/h2>\n

    First, we need to create a new Angular app. Open your terminal and run the following command to create a new Angular app:<\/p>\n

    ng new my-angular-app\n<\/code><\/pre>\n
    This command will create a new directory called my-angular-app<\/code> with the basic structure of an Angular app.<\/p>\n
    Navigate to the app’s directory by running:<\/p>\n
    cd my-angular-app\n<\/code><\/pre>\n
    Step 2: Build the Angular App<\/h2>\n
    Next, we need to build our Angular app for production. GitHub Pages only supports static sites, so we need to ensure that our app is bundled and optimized for deployment.<\/p>\n
    To build the app, run the following command:<\/p>\n
    ng build --prod\n<\/code><\/pre>\n
    This command will compile and bundle your Angular application into the dist<\/code> directory.<\/p>\n
    Step 3: Create a GitHub Repository<\/h2>\n
    In order to deploy the app to GitHub Pages, we need to create a new repository on GitHub.<\/p>\n
      \n
    1. Go to GitHub<\/a> and sign in to your account (or create a new account if you don’t have one).<\/li>\n
    2. Click on the New repository<\/strong> button to create a new repository.<\/li>\n
    3. Choose a name for your repository (e.g., my-angular-app<\/code>) and optionally provide a description.<\/li>\n
    4. Make sure to keep the repository public since GitHub Pages only works with public repositories.<\/li>\n
    5. Click the Create repository<\/strong> button to create the repository.<\/li>\n<\/ol>\n
      Step 4: Connect the Local App to the GitHub Repository<\/h2>\n
      To connect the local app to the GitHub repository, we need to add the remote repository URL to the app’s configuration.<\/p>\n
        \n
      1. Open the .git\/config<\/code> file in your app’s root directory.<\/li>\n
      2. Add the following lines to the file, replacing username<\/code> with your GitHub username and repository-name<\/code> with the name of your GitHub repository:<\/li>\n<\/ol>\n
        [remote \"origin\"]\n    url = https:\/\/github.com\/username\/repository-name.git\n    fetch = +refs\/heads\/*:refs\/remotes\/origin\/*\n<\/code><\/pre>\n
        Save the file and close it.<\/p>\n
        Step 5: Deploy the App to GitHub Pages<\/h2>\n
        We are now ready to deploy our Angular app to GitHub Pages.<\/p>\n
          \n
        1. Open your terminal and navigate to your app’s root directory.<\/li>\n
        2. Run the following command to deploy the app:
          \nngh --dir=dist\/my-angular-app<\/code><\/li>\n<\/ol>\n
          This command will build your app and deploy the contents of the dist\/my-angular-app<\/code> directory to the gh-pages<\/code> branch of your GitHub repository.<\/p>\n
          Step 6: Configure GitHub Pages<\/h2>\n
          In order to access your deployed app on GitHub Pages, we need to configure the settings of your repository.<\/p>\n
            \n
          1. Go to your GitHub repository page.<\/li>\n
          2. Click on the Settings<\/strong> tab.<\/li>\n
          3. Scroll down to the GitHub Pages<\/strong> section.<\/li>\n
          4. Under the Source<\/strong> dropdown, select the gh-pages<\/code> branch.<\/li>\n
          5. Click on the Save<\/strong> button.<\/li>\n<\/ol>\n
            After saving, GitHub will provide you with the URL where your app is deployed. It may take a few minutes for the changes to propagate.<\/p>\n
            Step 7: Access Your Deployed App<\/h2>\n
            Congratulations! You have successfully deployed your Angular app to GitHub Pages. To access your deployed app, simply navigate to the URL provided by GitHub in the previous step.<\/p>\n
            Note that it may take a few minutes for the changes to propagate, so if you don’t see your app immediately, wait for a while and try again.<\/p>\n
            Updating and Redeploying Your App<\/h2>\n
            If you make changes to your app and want to update the deployed version on GitHub Pages, follow these steps:<\/p>\n
              \n
            1. Build your app by running ng build --prod<\/code> in the app’s root directory.<\/li>\n
            2. Deploy the updated version by running ngh --dir=dist\/my-angular-app<\/code> in the app’s root directory.<\/li>\n
            3. Wait for the changes to propagate and access your updated app using the same URL provided by GitHub.<\/li>\n<\/ol>\n
              Repeat these steps whenever you need to update your deployed app.<\/p>\n
              Conclusion<\/h2>\n
              In this tutorial, we have learned how to deploy an Angular app to GitHub Pages. We covered the necessary steps to create a GitHub repository, connect it to your local app, and deploy the app using the Angular CLI and the ngh<\/code> tool. We also learned how to configure GitHub Pages to make our app accessible to the public.<\/p>\n
              Now you can easily share your Angular app with others by simply deploying it to GitHub Pages. Happy deploying!<\/p>\n","protected":false},"excerpt":{"rendered":"
              In this tutorial, we will learn how to deploy an Angular application to GitHub Pages. GitHub Pages is a static site hosting service provided by GitHub which allows you to host your website directly from your GitHub repository. Deploying your Angular app to GitHub Pages is a convenient way to Continue Reading<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[1547,1546,1545,1543,1542,1544,1541],"yoast_head":"\nHow to Deploy an Angular App to GitHub Pages - Pantherax Blogs<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/localhost:10003\/how-to-deploy-an-angular-app-to-github-pages\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Deploy an Angular App to GitHub Pages\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, we will learn how to deploy an Angular application to GitHub Pages. GitHub Pages is a static site hosting service provided by GitHub which allows you to host your website directly from your GitHub repository. Deploying your Angular app to GitHub Pages is a convenient way to Continue Reading\" \/>\n<meta property=\"og:url\" content=\"http:\/\/localhost:10003\/how-to-deploy-an-angular-app-to-github-pages\/\" \/>\n<meta property=\"og:site_name\" content=\"Pantherax Blogs\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-04T23:14:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-05T05:47:58+00:00\" \/>\n<meta name=\"author\" content=\"Panther\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Panther\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"Article\",\n\t            \"@id\": \"http:\/\/localhost:10003\/how-to-deploy-an-angular-app-to-github-pages\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/how-to-deploy-an-angular-app-to-github-pages\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Panther\",\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\"\n\t            },\n\t            \"headline\": \"How to Deploy an Angular App to GitHub Pages\",\n\t            \"datePublished\": \"2023-11-04T23:14:06+00:00\",\n\t            \"dateModified\": \"2023-11-05T05:47:58+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/how-to-deploy-an-angular-app-to-github-pages\/\"\n\t            },\n\t            \"wordCount\": 754,\n\t            \"publisher\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t            },\n\t            \"keywords\": [\n\t                \"\\\"Angular app deployment tutorial\\\"]\",\n\t                \"\\\"deploying Angular app on GitHub Pages\\\"\",\n\t                \"\\\"deploying Angular app to GitHub Pages\\\"\",\n\t                \"\\\"deploying Angular app\\\"\",\n\t                \"\\\"GitHub Pages\\\"\",\n\t                \"\\\"step-by-step deployment guide\\\"\",\n\t                \"[\\\"angular app deployment\\\"\"\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"http:\/\/localhost:10003\/how-to-deploy-an-angular-app-to-github-pages\/\",\n\t            \"url\": \"http:\/\/localhost:10003\/how-to-deploy-an-angular-app-to-github-pages\/\",\n\t            \"name\": \"How to Deploy an Angular App to GitHub Pages - Pantherax Blogs\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#website\"\n\t            },\n\t            \"datePublished\": \"2023-11-04T23:14:06+00:00\",\n\t            \"dateModified\": \"2023-11-05T05:47:58+00:00\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/how-to-deploy-an-angular-app-to-github-pages\/#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"http:\/\/localhost:10003\/how-to-deploy-an-angular-app-to-github-pages\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"http:\/\/localhost:10003\/how-to-deploy-an-angular-app-to-github-pages\/#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"http:\/\/localhost:10003\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"How to Deploy an Angular App to GitHub Pages\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"http:\/\/localhost:10003\/#website\",\n\t            \"url\": \"http:\/\/localhost:10003\/\",\n\t            \"name\": \"Pantherax Blogs\",\n\t            \"description\": \"\",\n\t            \"publisher\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t            },\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"http:\/\/localhost:10003\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": \"required name=search_term_string\"\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Organization\",\n\t            \"@id\": \"http:\/\/localhost:10003\/#organization\",\n\t            \"name\": \"Pantherax Blogs\",\n\t            \"url\": \"http:\/\/localhost:10003\/\",\n\t            \"logo\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\",\n\t                \"url\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t                \"contentUrl\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t                \"width\": 1024,\n\t                \"height\": 1024,\n\t                \"caption\": \"Pantherax Blogs\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\"\n\t            }\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\",\n\t            \"name\": \"Panther\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/image\/\",\n\t                \"url\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t                \"contentUrl\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t                \"caption\": \"Panther\"\n\t            },\n\t            \"sameAs\": [\n\t                \"http:\/\/localhost:10003\"\n\t            ],\n\t            \"url\": \"http:\/\/localhost:10003\/author\/pepethefrog\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Deploy an Angular App to GitHub Pages - Pantherax Blogs","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/localhost:10003\/how-to-deploy-an-angular-app-to-github-pages\/","og_locale":"en_US","og_type":"article","og_title":"How to Deploy an Angular App to GitHub Pages","og_description":"In this tutorial, we will learn how to deploy an Angular application to GitHub Pages. GitHub Pages is a static site hosting service provided by GitHub which allows you to host your website directly from your GitHub repository. Deploying your Angular app to GitHub Pages is a convenient way to Continue Reading","og_url":"http:\/\/localhost:10003\/how-to-deploy-an-angular-app-to-github-pages\/","og_site_name":"Pantherax Blogs","article_published_time":"2023-11-04T23:14:06+00:00","article_modified_time":"2023-11-05T05:47:58+00:00","author":"Panther","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Panther","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/localhost:10003\/how-to-deploy-an-angular-app-to-github-pages\/#article","isPartOf":{"@id":"http:\/\/localhost:10003\/how-to-deploy-an-angular-app-to-github-pages\/"},"author":{"name":"Panther","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7"},"headline":"How to Deploy an Angular App to GitHub Pages","datePublished":"2023-11-04T23:14:06+00:00","dateModified":"2023-11-05T05:47:58+00:00","mainEntityOfPage":{"@id":"http:\/\/localhost:10003\/how-to-deploy-an-angular-app-to-github-pages\/"},"wordCount":754,"publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"keywords":["\"Angular app deployment tutorial\"]","\"deploying Angular app on GitHub Pages\"","\"deploying Angular app to GitHub Pages\"","\"deploying Angular app\"","\"GitHub Pages\"","\"step-by-step deployment guide\"","[\"angular app deployment\""],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/localhost:10003\/how-to-deploy-an-angular-app-to-github-pages\/","url":"http:\/\/localhost:10003\/how-to-deploy-an-angular-app-to-github-pages\/","name":"How to Deploy an Angular App to GitHub Pages - Pantherax Blogs","isPartOf":{"@id":"http:\/\/localhost:10003\/#website"},"datePublished":"2023-11-04T23:14:06+00:00","dateModified":"2023-11-05T05:47:58+00:00","breadcrumb":{"@id":"http:\/\/localhost:10003\/how-to-deploy-an-angular-app-to-github-pages\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/localhost:10003\/how-to-deploy-an-angular-app-to-github-pages\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/localhost:10003\/how-to-deploy-an-angular-app-to-github-pages\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/localhost:10003\/"},{"@type":"ListItem","position":2,"name":"How to Deploy an Angular App to GitHub Pages"}]},{"@type":"WebSite","@id":"http:\/\/localhost:10003\/#website","url":"http:\/\/localhost:10003\/","name":"Pantherax Blogs","description":"","publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/localhost:10003\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/localhost:10003\/#organization","name":"Pantherax Blogs","url":"http:\/\/localhost:10003\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/","url":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","contentUrl":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","width":1024,"height":1024,"caption":"Pantherax Blogs"},"image":{"@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7","name":"Panther","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/person\/image\/","url":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","contentUrl":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","caption":"Panther"},"sameAs":["http:\/\/localhost:10003"],"url":"http:\/\/localhost:10003\/author\/pepethefrog\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/4171"}],"collection":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/comments?post=4171"}],"version-history":[{"count":1,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/4171\/revisions"}],"predecessor-version":[{"id":4387,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/4171\/revisions\/4387"}],"wp:attachment":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/media?parent=4171"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/categories?post=4171"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/tags?post=4171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}