Why do you want a GitHub website?
Because it is easy and free. Before you begin, let’s take a look at some pros and cons, And see if it’s suitable for your needs.
Pros
It takes care of the domain name for you, and you don’t need to worry about getting charged for storage or high traffic. All you need is a free GitHub account.
Cons
You can’t host a dynamic site on GitHub Pages, only a static site. Which means you can’t host a server that listens to incoming traffic like using express.js or flask, you can only host a site that’s static. However, it can be a dynamic static site – You can still run scripts on it, it just that it those scripts has to be preloaded.
Another con is that if you are running the GitHub page with a free account, your GitHub repo (your website files and directories) will be public. Which means everyone can see and visit your files. So you better not include anything confidential in your website folder.
That being said, it is still good for hosting a simple website which you don’t mind sharing the code. Say your personal resume, a simple company website, or a simple blog. Or you just want to test your own dynamic static web app.
Prerequisite
- A computer with internet.
- Basic computer literacy.
- A free GitHub account.
Step-by-step guide on how to create a free GitHub page
- Create a GitHub account.
After logged in, create a new repository. Make sure to select “Public”.
Once you have created an empty repo, tap “create new file”.- Copy and paste the sample code from below, and name it index.html to create this file.
It should look like this. Click commit changes.
Go to Settings tab > Pages on the side > Branches – select main and click save.
Now go back to your repo and wait for a few minutes.
Refresh the page, and you’ll see a GitHub page is successfully published.
Great job! Your GitHub Page is now ready via this link!
Sample Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Website</title>
<link rel="stylesheet" href="./style.css">
<link rel="icon" href="./favicon.ico" type="image/x-icon">
</head>
<body>
<main>
<h1>Welcome to My Website</h1>
</main>
<script src="index.js"></script>
</body>
</html>What’s next?
Well, if you are a beginner, I really suggest you to go through the free courses on freeCodeCamp.org, it will cover almost everything you need to know about web development to get you started.
While a GitHub page is easy to set up, it comes with some limitations and might limit what you can do as you further progress in web development. Getting to know different developing technology like React, Next, Flask, Express.js, etc is crucial if you’re getting serious about it. In that regard, GitHub Page just won’t cut it. You’ll need to find something else like Netlify, Digital Ocean, and eventually a self-hosted VPS with Docker instances to host every part of a website yourself.
Cloudflare vs GitHub Pages
Although, GitHub page is easy to set up and good for beginners, these days I tend to use Cloudflare pages, not only it is free with unlimited traffic, but also takes care of setting up custom domain if you have the domain purchased via Cloudflare. On top of that, your repo can be private too. So, pretty much a better version of GitHub page. You might want to check that out too.
*If the guide is unclear to you, you can follow the official guide from GitHub here.
