Articles

How to Build a Website on GitHub Pages: Complete Step-by-Step Guide

Learn how to make a website on GitHub Pages for free, with no command line or Git required.

What are GitHub Pages?

GitHub Pages, a tool provided by GitHub, lets you easily create and deploy a website online. GitHub allows you to store all the files and code for your website in a repository. You can then use GitHub Pages to generate a personal URL and share your site with friends, family, and the world!

For this tutorial, you need a GitHub account and basic HTML knowledge. You don’t need to know Git or the command line. (But if you do want to learn how to use these tools, check out our Learn Git & GitHub and Learn the Command Line courses.)

Related Course

Learn Git & GitHub

Use our beginner friendly Git course to integrate Git and GitHub and manage versions of your projects using Git branches. Try it for free

Create and host a website using GitHub Pages

Step 1: Create your GitHub repository

To get started, let us create a new repository named username.github.io, where username is your GitHub username.

Screenshot of the create a new repository page

You have the option here to use a template, add a description, make your repository private, and initialize some additional files. These items make it easy for other developers to learn about your repository: what it’s about, who can access it, who can use the code, etc. For simplicity, we’re going to skip those items for now. Your site will work without them.

Click “Create Repository”.

Step 2: Create your first web page

You should be redirected to the repository page, which shows an empty repository. It’s time to add a file! On that page, click the “creating a new file” link.

Screenshot of the repository page with a rectangle around the creating a new file link

Name your file index.html. Now, copy and paste the following code into the file.

<html>


<body>
  <h1>YOUR NAME</h1>
  <p>Welcome to my website!</p>
  <img src="https://content.codecademy.com/articles/github-pages-via-web-app/happy-ice-cream.gif" />
</body>


</html>

You can customize the text that says YOUR NAME and Welcome to my website!.

Screenshot of the create index.html page after everything is filled out

Step 3: Commit your changes

Changes to your repository are called commits. Each commit is a snapshot of your repository at a given time.

It’s time to create our first commit! In the first textbox, name your commit “Create index.html.” Commits usually start with a verb describing changes made to the repository.

Press the “Commit new file” button.

Step 4: Access your live website

Your website is now accessible at https://username.github.io! (Remember to replace username with your GitHub username.)

An animated gif of the website you created

If you’d like, you can develop your website by adding more HTML and CSS! Your site should update a few minutes after each commit.

Step 5: Troubleshooting

If your site isn’t appearing after 10 minutes, try these additional steps:

  1. Within your username.github.io repo, go to Settings and scroll down to GitHub Pages. Under Source, make sure that your repo is linked to your web page. If you see None, then select the main branch.

  2. Within the same GitHub Pages section, go to Theme Chooser and select any theme.

Repo Settings, GitHub Pages section

Difference between GitHub and GitHub Pages

In GitHub, code is stored in a repository, or repo. You can think of it as a special folder that lives online. GitHub hosts that folder so that it is accessible to you and your teammates from anywhere in the world.

In our case, our repository will contain HTML and CSS code that defines a website. But you can’t SEE the website anywhere. GitHub just displays the code like any other text. GitHub Pages essentially connects your repository to a unique URL so that, when you go to that URL – say username.github.io – in your browser, you’ll find your website displayed.

Conclusion

Creating and publishing a website with GitHub Pages is a beginner-friendly way to get your work online — no command line or Git knowledge required. In this tutorial, you learned how to create a GitHub repository, build a basic HTML file, and deploy it as a live website using just your browser. GitHub Pages makes it easy to host personal portfolios, resumes, or fun projects on a public URL, all for free.

To take your skills further, explore Codecademy’s Learn Git and GitHub course to understand version control and collaboration tools, or Learn the Command Line to work more efficiently with GitHub behind the scenes.

Frequently asked questions

1. Is GitHub free or paid?

GitHub offers both free and paid plans. For most personal projects and portfolios, the free plan is more than enough, as it includes unlimited public repositories and access to GitHub Pages. Paid plans add features like private repositories with more collaborators, advanced permissions, and CI/CD tools.

2. Can I use React on GitHub Pages?

Yes, you can deploy React apps to GitHub Pages. After building your React app using a tool like create-react-app, you can push the build output to a special branch (often gh-pages) and link it through GitHub Pages.

3. How do I push code to GitHub?

To push code to GitHub, you need to install Git locally and use commands like git init, git add, git commit, and git push. This allows you to sync changes from your computer to your GitHub repository. If you prefer a visual approach, you can also use the GitHub Desktop app or upload files directly via the GitHub web interface.

3. Can I make a professional website on GitHub Pages?

Yes. GitHub Pages supports static sites, making it ideal for professional portfolios, resumes, and documentation using HTML, CSS, or frameworks.

4. Can I host my WordPress website on GitHub for free?

No. GitHub Pages only supports static sites. WordPress requires PHP and a database, which GitHub Pages does not support.

Codecademy Team

'The Codecademy Team, composed of experienced educators and tech experts, is dedicated to making tech skills accessible to all. We empower learners worldwide with expert-reviewed content that develops and enhances the technical skills needed to advance and succeed in their careers.'

Meet the full team

Related articles

Learn more on Codecademy

Contents