loading...

How to deploy your website to Github pages

chrissiemhrk profile image Chrissie ・2 min read

Github pages allow us to easily deploy websites as long as they don't have any backend. In this article, I'm going to show you how I deploy websites using Github pages.

1. Create a repo

You can't deploy on Github pages without a repository that contains all your files so make sure you have the repo ready.

2. Install gh-pages

Next, you have to install the package gh-pages in your repository.

npm install gh-pages

3. Add this script in package.json

In the package.json file add this script.

"homepage": "https://[github-username].github.io/[github-repository-name]"

4. Create a deploy script

Inside the scripts object in package.json file add the following script.

"publish": "gh-pages -d src"

This script will deploy to Github pages anything in the src directory. You can change src to the name of the directory containing the files you want to deploy.

5. Run the script

Next, run the publish script in your command line to deploy to gh-pages.

npm run publish

It may take a bit of time but when it's done you'll see a line that says published.

6. Change the source branch in the repo settings

For your website to be deployed successfully, you'll have to go into the settings of your repository. In the Github pages section change the source branch from master to gh-pages. This branch was created when the publish script was run succesfully.

Alt Text

Once done, go to the url provided and you'll see your live website.

Posted on by:

chrissiemhrk profile

Chrissie

@chrissiemhrk

Front-End web developer - Software Engineering student - Open Source enthusiast - UX/UI design passionate

Discussion

pic
Editor guide