Deployment to Github Pages
Last updated
Last updated
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.
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
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
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.
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!
