DEV Community

loading...

How to deploy your website to Github pages

Chrissie
Frontend web developer - Software Engineering student
・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
Enter fullscreen mode Exit fullscreen mode

3. Add this script in package.json

In the package.json file add this script.

"homepage": "https://[github-username].github.io/[github-repository-name]"
Enter fullscreen mode Exit fullscreen mode

4. Create a deploy script

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

"publish": "gh-pages -d src"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)