Deploy Static Web Apps with GitHub Pages

GitHub Pages

You can use GitHub Pages to host a website about yourself, your organization, or your project directly from a GitHub repository. It is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process and publishes a website. You can see examples of GitHub Pages sites in the GitHub Pages examples collection.

You can host your site on GitHub's github.io domain or your own custom domain. We'll talk about hosting with a custom domain in later parts of this series.

To publish a user site, you must create a repository owned by your user account that's named <username>.github.io. To publish an organization site, you must create a repository owned by an organization that's named <organization>.github.io. Unless you're using a custom domain, user and organization sites are available at

http(s)://<username>.github.io or http(s)://<organization>.github.io.

The source files for a project site are stored in the same repository as their project. Unless you're using a custom domain, project sites are available at

http(s)://<username>.github.io/<repository> or http(s)://<organization>.github.io/<repository>.

Deploy Your Project

Okay, so much theory. Let's publish our project now.

Create a repository

Head over to GitHub and create a new repository named username.github.io, where username is your username (or organization name) on GitHub.

Clone the repository

  git clone https://github.com/username/username.github.io

Hello World

Enter the project folder and add an index.html file:

  cd username.github.io
  echo "Hello World" > index.html

Push it

Add, commit and push your changes:

  git add .
  git commit -m "Initial Commit"
  git push -u origin master

Done

Fire up a browser and go to https://username.github.io.

Hosted directly from your GitHub repository. Just edit, push and your changes are live.

Whats Next?

How cool is this? A complete web hosting just in seconds and for completely free. 💵🙌💸

In the next part of the series, I'll show you how to deploy VueJs apps with Github Pages. Till then, Have fun. Cheers 🥳