How to make your own website on GitHub Pages

I wrote this guide in 2019 for a course where everyone had to put a personal website online. GitHub Pages hosts it for free, and you only need a browser, Git and a text editor. Every step has a screenshot, so you can check that your screen looks the same before you move on.

GitHub has changed since 2019

The screenshots are from 2019 and some buttons have moved. The Pages settings now live under Settings → Pages, new repositories use a branch called main instead of master, and the green Code button replaced “Clone or download”. The steps are otherwise the same.

1. Create a GitHub account

1. Go to github.com and click Sign up at the top right. Pick your username carefully: your site will live at yourusername.github.io.

   

2. Fill in the form.

   

3. Choose the Free plan.

   

4. The “customize” page is optional. You can skip it.

   

5. GitHub sends you an email. If it isn’t in your inbox, check spam.

   

6. Open it and click Verify email address.

   

2. Copy the website template

1. Open the personal website template.

   

2. Click Fork at the top right. This copies the template into your own account.

   

3. If you see a “Forking…” page, wait a few seconds or refresh. If you don’t see it, that’s fine too.

   

4. When it’s done you’re on your own copy, and the Fork button is greyed out.

   

5. Open your repositories: https://github.com/yourusername?tab=repositories (use your username).

   

   You should see the template in the list.

   

6. Click personal_website_template, or go straight to https://github.com/yourusername/personal_website_template.

   

   

7. Click Settings.

   

   

8. Rename the repository to yourusername.github.io. If your username is ali, the name is ali.github.io.

   

9. Scroll down to GitHub Pages and set the source to the master branch (on today’s GitHub: Settings → Pages, branch main). If it’s already set, leave it.

   

10. Open yourusername.github.io in your browser. You should see the template site. It can take a minute or two the first time.

    

3. Install Git and download your site

1. Go to git-scm.com/downloads.

   

2. Click the button for your system. I used 64-bit Windows 10, so I clicked Windows.

   

3. The download should start on its own. If it doesn’t, go to git-scm.com/download/win

   

   and pick the installer that matches your Windows (for most people, 64-bit Git for Windows Setup).

   

4. Run the downloaded .exe.

   

5. Click Next on every screen. The defaults are fine.

   Show all eight installer screens

   

6. On the last screen click Install,

   

   then Finish.

   

7. To check that it worked, type cmd in the Windows search box

   

   and open Command Prompt.

   

   Type git and press Enter. If you see a list of Git commands, Git is installed.

   

8. Back on GitHub, open your yourusername.github.io repository.

   

9. Click Clone or download (today: the green Code button) and copy the URL.

   

10. In Command Prompt, make a folder for your projects and clone the site into it:

    cd /d C:\
    md dev
    cd dev
    git clone https://github.com/yourusername/yourusername.github.io.git
    

    Git prints a few lines while it downloads. When it stops, the site is on your computer.

    

4. Open the site in VS Code

1. Open Visual Studio Code, then File → Open Folder (Ctrl+K Ctrl+O).

   

2. Pick the C:\dev\yourusername.github.io folder and click Select Folder.

   

3. You should see the site’s files on the left.

   

4. Open _config.yml. Most of the site’s settings are in this one file.

   

5. Make it yours

1. Change the title, your name, the description and the colour skin.

   

   Further down, fill in your bio, email and social links.

   

2. The pages themselves are Markdown files: cv.md, courses.md, blog.md and so on. Edit them like any text file.

   

3. To put your changes online, save, then commit and push from the same folder:

   git add .
   git commit -m "My first changes"
   git push
   

   GitHub rebuilds the site after every push. Refresh yourusername.github.io after a minute and you’ll see your changes.