GitHub Pages provides free static hosting from a GitHub repository. It's a great option for hosting a portfolio website or showcase work from a project. In this example, we'll deploy a very simple static website from the main branch. See the GitHub Pages documentation for more advanced use-cases using custom workflows.
First, you need a portfolio (or any static website). A great place to learn how to build a portfolio site is the Web Development Project: Personal Portfolio Website Frontend Masters course.
We'll use the final project from that course for this portfolio site.
You'll need a GitHub repo to deploy to GitHub pages. Create a new repository in your GitHub account. You can use any name you want:
Note
There is some build-in GitHub Pages functionality if you name your repository [yourusername].github.io
. The steps in this example will work with any repository name.
After creating your new repository, you can add your portfolio website. If you know how to use GitHub or the Git CLI, go ahead and push up your website. If you are new to GitHub, you can click Upload Files
under the Add file
dropdown:
Once you have your files added, your repo will look something like this:
Note
Make sure your home page is named index.html
Now it's time to deploy your website. Go to Settings > Pages
and make sure Deploy from a branch
is selected. Choose your main
branch and click save:
After a few minutes, your site will be delpoyed and the URL will appear at the top of the Settings > Pages
page. The URL will be https://[username].github.io/[repo-name]
:
The cool thing about GitHub Pages is any time you push changes to your repo, the website will automatically redeploy. You'll see a green checkmark when the deployment has succeeded:
There are other static hosting options available. Check out the Exactly How to Deploy Local Files to Make a Live Website on the Boost Blog.