How to use GitHub Pages to host your website, even with multiple repos (2024)

Michelle Mannering for GitHub

Posted on • Updated on

How to use GitHub Pages to host your website, even with multiple repos (4) How to use GitHub Pages to host your website, even with multiple repos (5) How to use GitHub Pages to host your website, even with multiple repos (6) How to use GitHub Pages to host your website, even with multiple repos (7) How to use GitHub Pages to host your website, even with multiple repos (8)

#github #tutorial #webdev

Have you ever tried to host a website and you're blocked on where, or how to post it? There's lots of hosting sites these days, and GitHub is one of them.

GitHub Pages is a feature that allows you to host your website direct from your repo. Let's see how to do this.

Step 1. Make sure your code is on GitHub

Since GitHub Pages runs from a *.html file in your GitHub repo, you need to make sure your code is actually on GitHub.

If you haven't uploaded your code yet, follow these steps:

  1. Go to your profile: github.com/YOUR_USERNAME
  2. Click the "Repositories" tabHow to use GitHub Pages to host your website, even with multiple repos (9)
  3. Click "New"How to use GitHub Pages to host your website, even with multiple repos (10)
  4. Give your repository (repo) a name How to use GitHub Pages to host your website, even with multiple repos (11)
  5. Click private if you don't want people to see your code. Even if your repo is private, the website that goes live will be seen by everyoneHow to use GitHub Pages to host your website, even with multiple repos (12)
  6. Add any of the options you likeHow to use GitHub Pages to host your website, even with multiple repos (13)
  7. Click "Create repository"How to use GitHub Pages to host your website, even with multiple repos (14)

Now you should have a repo, and you can upload your *.html file by clicking on the "Code" tab and then clicking "Add file".

Step 2. Enable GitHub Pages

Now that your *.html file is in your GitHub repo, you can enable GitHub Pages. Make sure you are in the repo with your *.html file and then follow these steps:

  1. Go to the "Settings" tab (note this is the settings tab that is shown next to the "Insights" tab on your repo. This is not your personal GitHub settingsHow to use GitHub Pages to host your website, even with multiple repos (15)
  2. Scroll down until you find "Pages" on the leftHow to use GitHub Pages to host your website, even with multiple repos (16)
  3. Click "Pages"
  4. Click the "Source" dropdown and choose which branch to draw your *.html file fromHow to use GitHub Pages to host your website, even with multiple repos (17)
  5. Click "save"

Now your website is live! It should be available at:
YOUR_USERNAME.github.io

If you ever want to "unpublish" your GitHub Page, click the "Source" dropdown in Step 4 above and choose "none". Now your page is unpublished.

Step 3. Customising your website

Now that your website (or GitHub Page) is live, you can make some customisations. Also read on if you have more than one repo you want as a GitHub Page. Ie. you can't have the same website address for two sites.

Website themes

After you've completed Step 2. above, you'll have more options under the "Pages" settings. You can click "Choose a theme" to add a fancy look (CSS) to your website.

This will take you to a site where you can choose a template to pretty up your website. If you only have a *.html file, a template will make your site look amazing. Otherwise you can write some CSS for your website. We won't go into that here.

Custom domain

Your website is available at the URL GitHub provided, but you can also choose a custom domain. This is a domain you own, and must be purchased through a domain name provider, such as Namecheap.

Once you have purchased a domain, add your domain name under the "Pages" settings, for example https://YOUR_NAME.info. This will direct the GitHub Pages link to this custom domain and your website will appear at your nominated address.

In order for this to work properly, you'll need to setup a few things on your domain name provider's end. For information on how to set those up read the GitHub Docs.

The TL;DR is you'll need to add these A records:

185.199.108.153185.199.109.153185.199.110.153185.199.111.153

And you'll need to add a CNAME record with a value that is the URL of your original GitHub Page, for example:

This is how mine looks in Namecheap. Yours' might look slightly different depending on your domain name provider.

If you add a custom domain to your website, you'll have the option to turn off "Enforce HTTPS". Usually, you'll want to make sure this is ticked to ensure your website is secure. Only untick this if you're using a different method to secure your website.

What if you have multiple repos?

GitHub Pages are published at the URL: YOUR_USERNAME.github.io. So if this link takes your username, what happens if you have multiple repos under your GitHub username? Won't these conflict? Well, GitHub solves this by publishing subsequent repos at the URL:

YOUR_USERNAME.github.io/YOUR_REPO_NAME

All you need to do is ensure the CNAME for each custom domain is pointing towards YOUR_USERNAME.github.io and you have the A records added above. GitHub will do the rest for you. After you add a custom domain, you might need to wait a bit until your custom URL will work. Just be patient while the DNS is flushed through. I may have learned this the hard way!

Enjoy your shiny new website ✨

Once your domain name is properly routed through, your new website will be available at your nominated domain name, or the default github.io address.

This is one of the easiest ways to host a website. Read more about GitHub Pages on the GitHub Pages site. Let me know if you want to see more information on this topic, or what other tutorials you'd like to see.

Top comments (3)

Subscribe

Tommy

Tommy

Hello, world. I like to build things. I like to help people. Naturally, I'm an indie hacker who builds things that help people.

  • Joined

Nov 18 '22

  • Copy link

Note: "GitHub Pages is available in public repositories with GitHub Free and GitHub Free for organizations, and in public and private repositories with GitHub Pro, GitHub Team, GitHub Enterprise Cloud, and GitHub Enterprise Server. For more information, see "GitHub's products." - Source

How to use GitHub Pages to host your website, even with multiple repos (25)

Comment deleted

irishgeoff9

irishgeoff9

ceo of fabform.io

  • Email

    irishgeoff9@gmail.com

  • Location

    New York

  • Joined

Sep 24 '22

  • Copy link

Try fabform.io, If you need to add static website forms to your static website.

For further actions, you may consider blocking this person and/or reporting abuse

How to use GitHub Pages to host your website, even with multiple repos (2024)

FAQs

Can GitHub Pages host multiple pages? ›

As Gabriel mentioned, you should have no problem having a multi-page site on GitHub pages. I host a variety of sites on GitHub, including a Jekyll blog.

Can you use GitHub Pages to host a website? ›

You can use GitHub Pages to host a website about yourself, your organization, or your project directly from a repository on GitHub.com.

How to use Git with multiple repositories? ›

The usual workflow when working with the code synced to two or more repositories looks like this:
  1. make changes in the code of the project;
  2. use git add command to add changed/updated files as usual;
  3. make a commit using git commit command as usual;
  4. push code changes to the first repository: git push github master ;

Can you host dynamic websites on GitHub Pages? ›

Typically, there are two kinds of websites: Static and Dynamic. GitHub supports hosting a static website but if you have a dynamic website, you can choose another service that can provide you with better functionalities and support.

How powerful is GitHub Pages? ›

GitHub Pages is one of the best features of GitHub. It is a service that allows you to host a static website directly from a GitHub repository. This means you can use your repository to store your website's code and files, and GitHub will automatically publish them as a website you can access online.

Can I host an API on GitHub Pages? ›

API documentation is crucial for developers and clients to effectively understand and utilize your APIs. GitHub provides an excellent platform for hosting documentation, allowing easy access and version control. So, in this article, we will guide you through using GitHub to host your API documentation.

Is it good to have many repositories on GitHub? ›

The Git multi-repo approach can offer advantages, especially as an enterprise scales from small beginnings. Easier to manage: as noted in the above section, a growing volume of coding can cause problems (e.g., how Git can slow as a repository scales up).

How many GitHub repos can I have? ›

All personal accounts can own an unlimited number of public and private repositories, with an unlimited number of collaborators on those repositories. If you use GitHub Free, private repositories owned by your personal account have a limited feature set.

How do I combine multiple repos into one? ›

Merging Multiple Git Repositories into a Mono-Repository with Git-Filter-Repo
  1. Understand the need for merging repositories.
  2. Install Git-Filter-Repo.
  3. Clone source repositories.
  4. Rewrite history of source repositories.
  5. Add source repositories as remotes in the target repository.
  6. Import commits from source repositories.
Mar 29, 2024

Can GitHub Pages host backend? ›

Github Pages will not run any backend code. They will just be seen as text files. You may be thinking about Github Codespaces. Note that Github Codespaces isn't free hosting, so dynamic sites won't work if not run.

How do I host a static website on GitHub for free? ›

How to Host a Website on GitHub For Free?
  1. How to Host a Website on GitHub For Free?
  2. Github Login page.
  3. Create new repository.
  4. Name the repository as your username.github.io.
  5. Create new file.
  6. Create index.html and add the HTML code for your website.
  7. commit the HTML code.
  8. Create index.html and add the CSS code for your website.
May 16, 2024

Can I host my website on GitHub as a private repository? ›

Note: To publish a GitHub Pages site privately, your organization must use GitHub Enterprise Cloud. For more information about how you can try GitHub Enterprise Cloud for free, see "Setting up a trial of GitHub Enterprise Cloud."

How do I add another page to GitHub Pages? ›

Adding a new page to your site
  1. On GitHub, navigate to your site's repository.
  2. Navigate to the publishing source for your site. ...
  3. In the root of your publishing source, create a new file for your page called PAGE-NAME.md , replacing PAGE-NAME with a meaningful filename for the page.

How to have multiple pages in HTML on GitHub? ›

You can add more pages to your site by creating more new files. Each file will be available on your site in the same directory structure as your publishing source.

Can I have multiple accounts in GitHub? ›

If you need to use multiple accounts on GitHub.com, you can stay signed in to your accounts and switch between them. For example, switching between a personal account and a service account. For more information, see "Switching between accounts."

Can multiple people work on the same file GitHub? ›

To collaborate with users in a repository that belongs to your personal account on GitHub, you can invite the users as collaborators. If you want to grant more granular access to the repository, you can create a repository within an organization.

References

Top Articles
Latest Posts
Recommended Articles
Article information

Author: Domingo Moore

Last Updated:

Views: 5625

Rating: 4.2 / 5 (73 voted)

Reviews: 88% of readers found this page helpful

Author information

Name: Domingo Moore

Birthday: 1997-05-20

Address: 6485 Kohler Route, Antonioton, VT 77375-0299

Phone: +3213869077934

Job: Sales Analyst

Hobby: Kayaking, Roller skating, Cabaret, Rugby, Homebrewing, Creative writing, amateur radio

Introduction: My name is Domingo Moore, I am a attractive, gorgeous, funny, jolly, spotless, nice, fantastic person who loves writing and wants to share my knowledge and understanding with you.