Congrats! You created a nice (or maybe not so nice) web site or web app using your newly (or oldly) acquired CSS, HTML and JS skills. You’re so excited you want to share this thing, but none of your non-tech friends know how to use github and no one wants to unzip a folder, then open it up on their desktop. You writhe in agony, unable to release your beautiful masterpiece to the world. Life doesn’t need to be this way.
While Heroku is great for deploying node projects, and you can always shell out some bucks to push your site to a live server, if you just want a FREE option to show off your static web page, github provides that.
It seems so simple in retrospect, but getting my gitpage set up for the first time was a real hassle. Follow the steps below and you can add a git page as well as subpages that users can actually visit to see your work.
**NOTE: Gitpages can sometimes take up to 15 minutes before rendering your ‘site’
*CREATING A GITPAGE*
1. Create a new repo that is named `<>.github.io` where <> is your GitHub username. Double check that you use exactly your username. (For example, janedoe.github.io would be the GitHub pages repo name for the GitHub user “janedoe”)
2. Create a new project folder
3. Add an HTML file named `index.html` and code out a basic webpage (or use a previous page)
4. Add, commit, and push your changes into the repository
5. Navigate to `<>.github.io` and you will find that your new web page has gone live!
1. Create a new repository on your GitHub account. *You can name this repository whatever you would like.*
2. Add your static project (HTML, CSS && JS) to this repository, and then navigate into your repository’s `Settings` tab.
3. Scroll down to the GitHub Pages section and then, in the section labeled `Source`, select that you would like to use the `master` branch as your source.
4. Navigate to `<>.github.io/<>` and you will find that your new web page has gone live! (For example, if your GitHub username is `johndoe` and the project is `cssDemo`, your URL would be `johndoe.github.io/cssDemo`)