How to Create a Website on GitHub Pages: 12 Steps (with Pictures) (2024)

  • Categories
  • Computers and Electronics
  • Software
  • Programming

Download Article

Author Info

Last Updated: October 2, 2022

Download Article

  • Using a GitHub Desktop
  • |
  • Using GitHub Online
  • |
  • Tips

GitHub Pages is a great way to make your own personal site from scratch. It is completely free and only requires a GitHub account. Note, though, that GitHub Pages does not offer the most user-friendly design for making websites (unlike Wix or Squarespace), but it is a great way to gain experience with HTML/CSS/JS and all the elements of a website. This wikiHow will show you how to get started.[1][2]

Steps

Download Article

  1. 1

    Register an account on GitHub, if you do not have one yet. Before you can create your own website on GitHub pages, you need to create an account on GitHub. If you already have an account on GitHub, make sure to login. Both can be accessed from the upper right toolbar.

  2. 2

    Create a repository on GitHub. Make sure to name the repository "[your GitHub username here].github.io". This will initialize your GitHub website.

  3. Advertisem*nt

Method 1

Method 1 of 2:

Using a GitHub Desktop

Download Article

  1. 1

    Download GitHub desktop, if you do not have it already installed. Installing GitHub desktop is as simple as going to https://desktop.github.com/ and clicking on the big purple "Download" button. Then run the installer. This is needed in order to push changes to your repository.

  2. 2

    Install a code editor. You need one in order to get syntax highlighting on GitHub. Popular choices include Atom, Visual Studio Code, Sublime Text, and Notepad++, given their feature-rich and minimalistic feel. After installing a code editor, you are ready to get started.

  3. 3

    Create a file called "index.html". You can do so in your code editor or online. You can also go to your repository's location on your hard drive and create an "index.html" file in the repository's folder on your drive.

  4. 4

    Add your HTML. You will need to learn HTML in order to be able to code a basic webpage. It will also be useful for you to learn CSS and JavaScript so you can add styling and functionality to your webpage.

    • Remember to save the file.
  5. 5

    Commit the changes. Go back to GitHub desktop and click on the blue Commit to master button. Then click on Push Origin. This will upload the changes to GitHub.

    • If you plan to make more changes, you will want to pull the origin as well. Click on the Pull origin button in GitHub desktop to download the latest commit to your machine.
  6. 6

    View your webpage. Go to "[your GitHub username here].github.io" in a web browser. You may need to bypass your browser's cache by holding Ctrl or Command while clicking on the refresh button to view the new webpage.

  7. Advertisem*nt

Method 2

Method 2 of 2:

Using GitHub Online

Download Article

  1. 1

    Create a file called "index.html". Click on Add file then click on Create new file. This will open a file editor. Add "index.html" to the "Name your file" field.

  2. 2

    Add your HTML. You will need to learn HTML in order to be able to code a basic webpage. It will also be useful for you to learn CSS and JavaScript so you can add styling and functionality to your webpage.

    • Remember to save the file.
  3. 3

    Commit the changes. Click on the green Commit new file button to save the file to GitHub.

  4. 4

    View your webpage. Go to "[your GitHub username here].github.io" in a web browser. You may need to bypass your browser's cache by holding Ctrl or Command while clicking on the refresh button to view the new webpage.

  5. Advertisem*nt

Expert Q&A

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

      Advertisem*nt

      Tips

      • To add subpages, simply create a new folder on GitHub and add an "index.html" file into that folder.

        Thanks

        Helpful0Not Helpful0

      • If you register a domain name, you can have GitHub Pages use that domain name instead of the default.

        Thanks

        Helpful0Not Helpful0

      • GitHub pages repositories must be public, unless if you have a premium account.

        Thanks

        Helpful0Not Helpful0

      Submit a Tip

      All tip submissions are carefully reviewed before being published

      Submit

      Thanks for submitting a tip for review!

      Advertisem*nt

      You Might Also Like

      A Complete Guide to Making Your Own Website
      Carrd Tutorial: How to Make Your Own One-Page WebsiteHow toMake a Website With WordHow toGet a Free Web Site

      Advertisem*nt

      About This Article

      wikiHow is a “wiki,” similar to Wikipedia, which means that many of our articles are co-written by multiple authors. To create this article, volunteer authors worked to edit and improve it over time. This article has been viewed 38,692 times.

      How helpful is this?

      Co-authors: 4

      Updated: October 2, 2022

      Views:38,692

      Categories: Programming | Making a Website

      • Print
      • Send fan mail to authors

      Thanks to all authors for creating a page that has been read 38,692 times.

      Is this article up to date?

      Advertisem*nt

      How to Create a Website on GitHub Pages: 12 Steps (with Pictures) (2024)

      FAQs

      How do I create a website using GitHub Pages? ›

      Creating your site
      1. On GitHub, navigate to your site's repository.
      2. Decide which publishing source you want to use. ...
      3. Create the entry file for your site. ...
      4. Configure your publishing source. ...
      5. Under your repository name, click Settings. ...
      6. In the "Code and automation" section of the sidebar, click Pages.

      How to create a portfolio website on GitHub? ›

      It's a fantastic way to highlight your work, share your story, and stand out in the tech world.
      1. Step 1: Set Up a GitHub Account. ...
      2. Step 2: Create a New Repository. ...
      3. Step 3: Choose a Theme. ...
      4. Step 4: Customize Your Portfolio. ...
      5. Step 5: Project Pages. ...
      6. Step 6: Local Testing with Jekyll (Optional) ...
      7. Step 7: Commit and Push Changes.
      Oct 14, 2023

      How do I create my own website? ›

      Here's how to create your own website in 6 steps:
      1. Plan your website. First, think about the type of site you're creating and your target audience. ...
      2. Choose a template. ...
      3. Customize your website. ...
      4. Get a domain name. ...
      5. Optimize for search engines. ...
      6. Publish and promote your website.

      Can I create a website on GitHub for free? ›

      This is all possible thanks to the GitHub Pages feature, which is GitHub's very own free hosting service. Using GitHub Pages, you can create a website by simply publishing static HTML, JavaScript, and CSS files from GitHub's repository.

      How do I embed an image into a website? ›

      The HTML <img> tag is used to embed an image in a web page. Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image. The <img> tag is empty, it contains attributes only, and does not have a closing tag.

      How do I upload images on GitHub? ›

      On GitHub.com, navigate to the main page of the repository. Above the list of files, select the Add file dropdown menu and click Upload files. Alternatively, you can drag and drop files into your browser. To select the files you want to upload, drag and drop the file or folder, or click choose your files.

      How do I show pictures on GitHub? ›

      First upload the image directly to your GitHub repository and give the reference using a relative URL. Then Drag and drop the image into the "Issues" section or any comment box in your repository to upload the image. Once the image is uploaded, click on it to open the image file.

      Should I put my portfolio website on GitHub? ›

      Although it's not mandatory, it's common for recruiters to want to see your GitHub and sometimes also ask for a Portfolio, so why not combine the two? GitHub is the ideal place because there you can showcase examples of your code, your progress, your studies, and initiatives you've been involved in.

      Can I host my portfolio on GitHub Pages? ›

      Having an online portfolio is important for showcasing your skills and accomplishments. GitHub Pages provides a convenient and free platform for hosting your portfolio website.

      How to create a portfolio website? ›

      1. Step 1: Determine a Goal for Your Online Portfolio. ...
      2. Step 2: Choose Between Manual Coding or a Website Builder. ...
      3. Step 3: Highlight Your Best Work. ...
      4. Step 4: Create a Compelling About Section. ...
      5. Step 5: Create a Strong Call to Action. ...
      6. Step 6: Make Your Portfolio User-Friendly.
      May 3, 2024

      How many websites can you make with GitHub Pages? ›

      For more information about how custom domains affect the URL for your site, see "About custom domains and GitHub Pages." You can only create one user or organization site for each account on GitHub. Project sites, whether owned by an organization or a personal account, are unlimited.

      Can you host dynamic websites on GitHub Pages? ›

      While it's not possible to build dynamic websites using GitHub Pages, you can use easily build your own using a CMS such as WordPress, or static site generators like Gatsby or Hugo.

      How much does it cost to host a website on GitHub? ›

      GitHub Pages is GitHub's answer to project pages, and it allows you to serve any static website straight from your repository. Since GitHub pages support custom domains, you can host a static website on GitHub pages free of charge, with deploys straight from Git.

      Can I host a WordPress site on GitHub Pages? ›

      You can host your WordPress website on GitHub for free.

      Can GitHub host a dynamic website? ›

      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 do I embed a GitHub file into my website? ›

      Embed public markdown files
      1. Ensure your GitHub repository is set to public. ...
      2. In GitHub, navigate to the markdown (. ...
      3. Copy the entire URL from GitHub. ...
      4. In zeroheight, choose the Embed option from the toolbar.
      5. Paste the URL from GitHub into the embed block.

      References

      Top Articles
      Latest Posts
      Article information

      Author: Lakeisha Bayer VM

      Last Updated:

      Views: 6513

      Rating: 4.9 / 5 (49 voted)

      Reviews: 80% of readers found this page helpful

      Author information

      Name: Lakeisha Bayer VM

      Birthday: 1997-10-17

      Address: Suite 835 34136 Adrian Mountains, Floydton, UT 81036

      Phone: +3571527672278

      Job: Manufacturing Agent

      Hobby: Skimboarding, Photography, Roller skating, Knife making, Paintball, Embroidery, Gunsmithing

      Introduction: My name is Lakeisha Bayer VM, I am a brainy, kind, enchanting, healthy, lovely, clean, witty person who loves writing and wants to share my knowledge and understanding with you.