Ever wondered how you can deploy your static HTML site for free and seamlessly? Now you can do it with GitHub Pages!
GitHub Pages is a feature of GitHub that enables you to deploy your static site and get a free domain based on your username. The domain name format is <USERNAME>.github.io. So if your username is faizbyp, it will be faizbyp.github.io.
In this article we'll use Visual Studio Code. So let's get started!
Let's make the site
First, make a directory named <USERNAME>.github.io, this will also be the name of your repository. Then open the folder in Visual Studio Code or any text editor that you prefered.
If you already have a repo named
<USERNAME>.github.io, the next repo you deploy to GitHub Pages will be available in the same domain in<USERNAME>.github.io/<REPO_NAME>format.
Then, create an index.html file and make changes to the file as you want. I will make a simple 3 section site page with Bootstrap 5.3 Alpha.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<title>A Site Page</title>
</head>
<body>
<header class="vh-100 d-flex justify-content-center align-items-center bg-primary">
<h1 class="text-white">Hello, DEV!</h1>
</header>
<section class="vh-100 d-flex justify-content-center align-items-center">
<h1>This is just a simple site</h1>
</section>
<section class="vh-100 d-flex justify-content-center align-items-center bg-dark">
<h1 class="text-white">A simple footer</h1>
</section>
</body>
</html>
Preview the code here
Publishing to GitHub
Now the HTML is done. The next thing is, initialize the repo and publish it to GitHub.
Simply go to Source Control tab in VS Code, and then click Publish to GitHub. Don't forget to login to your GitHub account (if you haven't). Then publish it as a public repository.
Free GitHub account doesn't allow a private repo to be deployed to GitHub Pages. So don't forget to make it public if your account is on a free tier.
Then go to your GitHub repo link. Go to Settings. Click Pages menu in "Code and automation". Select your deployment source and wait for a few seconds.
Voila! Your site is now live on the internet. Now share it to your friends and colleagues so they know you've made a site.
Conclusion
There are a lot of opportunity to the GitHub Pages. Technologies are growing so fast nowadays, so it's up to you to utilize the technologies available. Keep learning, and as Steve Jobs said, "Stay hungry, stay foolish".
Top comments (0)