Deployment to Github Pages

Deploying Your Static App to GitHub-Pages

Intro

This quick walk-thru will show you how easy it is to deploy your static web application so that it can be accessed by anyone with Internet access, anywhere in world!

Any GitHub repository containing an index.html and other static assets can become a website by simply creating a gh-pages branch and pushing it to the origin remote.

What is a static application?

A static application is an application that consists solely of static assets.

Static assets are files that are not "processed" by the web server in any way, they are simply delivered by the web server as they are requested by the browser.

Typical static assets include:

• html files

• css stylesheets

• javascript files

• image files

Deploying with ghpages

Ensure your project is ready to deploy

Make sure that all changes to your code are committed to main in your local repository.

Although not necessary, go ahead and push the latest commit to origin: $ git push origin main

Create a gh-pages Branch

You will learn more about git branches in the next unit, however, deploying on ghpages requires that we create a new branch:

• Ensure that you're in your project's directory and in the main branch

• Run $ git checkout -b gh-pages

Deploy the gh-pages Branch

All that's left to get the app deployed is to push the gh-pages branch to the origin remote: $ git push origin gh-pages

Browsing to the Website

Your website should now be up and running at the following URL: https://<user-name>.github.io/<repo-name>/

Be sure to substitute your GitHub user-name for <user-name> and your project's repo name for <repo-name>.

Note: It might take up to 15 minutes for the app to be available.

Updating your Application's Deployment

Now that your repo has two branches, be sure to continue development on the main branch.

$ git checkout main switches to the main branch.

When you have commits on main that you want to deploy, it's time to merge those commits into the gh-pages branch:

• Checkout the gh-pages branch: $ git checkout gh-pages

• Merge the commits from main: $ git merge main

• Deploy the changes: $ git push origin gh-pages

Now your deployed application is up to date!

Be sure to switch back to the main branch - happy coding!