Hosting a basic webpage on GitHub Pages
Quick and simple, here’s a guide.
This is a good skill to have, and I think probably the easiest way to get some content up online for the world to see. I love the no-nonsense approach of this. If you use a Markdown file (.md), you can have a well formatted document accessible on a tidy URL very easily, which you can edit whenever you need to using GitHub’s website. Markdown is a text syntax for formatting documents, which is very simple and intuitive.
(GitHub Pages doesn’t handle backend projects (servers, etc), so you would need to use something else for that — Render and Heroku are a couple of options. That’s only relevant for more advanced web projects, though.)
☕ If you found this article interesting or helpful, you can buy me a coffee to support my caffeination needs: ko-fi.com/hortfrancis
What is Git & what is GitHub?
‘Git’ is a ‘version control system’ that allows you to track changes to files over time. When you make changes to a file, Git creates a ‘snapshot’ of that file, which you can then save, known as ‘committing’ a change. This allows you to easily keep track of changes to your code, and collaborate with others. Git is a great way to back-up your files, especially on a large project.
A ‘repository’ (or a ‘repo’) is a collection of files that are stored in Git — like a big folder. Each repository contains all the information about the project, including its history of changes. You can store repos locally on your computer or on GitHub, for free.
Publishing a simple webpage
- Go to github.com and sign up.
- Hit the ‘New’ button, or go to github.com/new
- Enter a name for your new repository.
- Hit ‘Create repository’ (at the bottom of the page)
You’ve now got a brand new repo! Congratulations. The next page looks a bit more complicated, but we only really need to press the ‘creating a new file’ link, in the ‘Quick setup — if you’ve done this kind of thing before’ section (highlighted with a blue background):
Our goal here is just to make a new README.md markdown file. Click that ‘creating a new file’ link or, alternatively, type in github.com/[your username]/[repo name]/new/main and you will be taken to a file editor on GitHub:
The great thing about Markdown syntax is that it looks pretty readable as plain text, but when it’s rendered properly you get a great looking, well-formatted document.
Tap ‘Preview’ to take a look at the text with the Markdown interpreted into nicely formatted text.
Once you’ve written something, head to the bottom of the page, and ‘commit’ your first change.
This should take you to the main page of the repo. In case you need it, the URL is github.com/[your username]/[repo name]
We’ve got our basic webpage, next let’s put it online for the world to see!
GitHub Pages
Go to ‘Settings’ at the right of the main page for your repo (you may have to click the three dots to reveal this link on narrow browser windows).
Once we’re on the ‘Settings’ page, we want to head to ‘Pages’ by finding the button on the left. You can also get here by typing the url in the address bar: github.com/[your username]/[repo name]/settings/pages
The options here that we want are ‘Source’: ‘Deploy from a branch’, and ‘Branch’: ‘main’
A ‘branch’ is way to make changes to a project without affecting the main version. For our purposes, you don’t really need to worry about knowing what a branch is, but think of it like a tree trunk that has different branches growing out of it — each branch represents a separate set of changes that can be made to the project. This allows multiple people to work on the same project simultaneously without interfering with each other’s work. Once the changes have been made and tested, they can be merged back into the main version of the code, creating a new and improved version of the project.
The default branch is called ‘main’ in this case, and we want to ‘build’ our webpage from this.
It’ll probably take a few minutes for GitHub to get your page up and running. When it is, you should see a link on the settings/pages page:
Let’s take a look:
You can definitely use this for more complicated web projects if you like, but I love the idea of just chucking down some info in Markdown and having it displayed attractively on a single page like this. This page is ‘responsive’, meaning it’ll look good on any screen size, from a tiny phone to a 4K TV.
If we want to edit the README.md file, we can go back to the main page of the repo (github.com/[your username]/[repo name]), click the pencil icon and we’re back to the text editor. Alternatively you can go to github.com/[your username]/[repo name]/edit/main/README.md and that’ll take you to the same place. Commit your change at the bottom of the page, and the public webpage you’ve built should be updated after a-minute-or-so.
You can see my take on this mini project here.
☕ If you found this article interesting or helpful, you can buy me a coffee to support my caffeination needs: ko-fi.com/hortfrancis
