GitHub Pages: A Platform for Hosting Websites Straight from Your Repos!
tHub Pages is a hosting service provided by GitHub that allows users to host static websites directly from their GitHub repositories. It’s a convenient and straightforward way to showcase projects, create personal blogs, or publish documentation without the need for complex server setups.
But, there is one limitation, since it’s a static service, it does not support server-side scripts (PHP, Python, etc.).
1. Create a new GitHub repository
As mentioned above, we’ll use GitHub Pages to host our static website. In this first step, you will need to create a new repository on your account.
Note: If you don’t have a GitHub account yet, you can create one
To do so, open the “Create a new repository” page on GitHub.
Feel free to choose a funky name for your repository! 🎸🤘 But, take care because this name will be one part of your website URL.
I will name my repository:ranger-
2. Clone the repository on your computer
Once you created your repository, you will be redirected to its page. There, you can copy/paste the HTTPS or SSH link and clone the repository on your computer.
$ git clone [HTTPS or SSH URL]enter into directory
$ cd [directory name]3. Create a static website
create an index.html file. It will be the entry point of our website.
$ nano index.html and copy and paster into index.html Below code that I will use.
<!DOCTYPE html>
<html>
<head>
<title>welcome my Website</title>
</head>
<body>
<h1>my name is nipul patel! ⭐</h1>
</body>
</html>
4. Push your code to GitHub
Are you satisfied with your index.html file? If not, don’t worry. You’ll learn how to update it later in the coming steps! ⏭
When your code is ready, you will need to save it on GitHub. You can type the commands below to do it:
$ git add index.html
$ git commit -m "this is github page code"
$ git push origin main
Until here, you must be doing the same thing as for your other GitHub projects.
To verify that everything is working correctly, you can open your repository on GitHub and verify that the index.html file is displayed. If so, you’re ready for the next step!
5. Open your repository settings
Let’s deploy your website and make it available to the world! 🌐
On your repository page, you have a menu at the top. Click on the image below on the last option called “Settings”, then “Pages” in the sidebar.
After clicking on “Pages”, you will land on the GitHub Pages configuration. That’s where you will ask GitHub to deploy your website online and create an URL for it.
Two settings are available:
- The deployment branch: which branch of your repository will be deployed.
- The deployment folder (by default “/ root”): which repository folder you want to use as an entry point. I recommend you stick to the default option. But, you will see that you can also select “/docs” if you want to create a GitHub website for your documentation pages (stored under the “/docs” repository.
Let’s stick to the most default options and select “main” as your deployment branch and keep “/ (root)” as the deployment folder.
Once you click on the “Save” button, the page reloads
Note: As you can see, the URL is based on your GitHub username and repository name.
https://github-username.github.io/repository-name/
Let’s click on your URL to see the online version of your website.
6. Add a new page
Now that everything is set up let’s return to our IDE and create an about.html page.
As we did with the index.html Feel free to create the code of your choice!
Here is the template I will use for this new page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Introduction to GitHub</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
section {
padding: 20px;
text-align: center;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Introduction to GitHub</h1>
</header>
<section>
<h2>What is GitHub?</h2>
<p>GitHub is a platform for version control and collaboration. It allows developers to work together on projects, track changes to code, and manage code repositories.</p>
<h2>Why Use GitHub?</h2>
<p>GitHub offers a range of features including:</p>
<ul>
<li>Version control with Git</li>
<li>Collaboration tools like pull requests and issues</li>
<li>Project management features like project boards and milestones</li>
<li>Hosting for documentation and websites</li>
</ul>
<h2>Getting Started</h2>
<p>To get started with GitHub:</p>
<ol>
<li>Create a GitHub account</li>
<li>Create a new repository or contribute to existing ones</li>
<li>Learn basic Git commands like <code>git init</code>, <code>git add</code>, <code>git commit</code>, and <code>git push</code></li>
<li>Explore collaboration features such as pull requests and issues</li>
</ol>
</section>
<footer>
<p>© 2024 Your Name. All rights reserved.</p>
</footer>
</body>
</html>Then, let’s create a button on the homepage (index.html) to open the about page with a click.
<!DOCTYPE html>
<html>
<head>
<title>welcome my Website</title>
</head>
<body>
<h1>my name is nipul patel! ⭐</h1>
<a href="./about">Read the about page</a>
</body>
</html>7. Update your website
A new page is born! Let’s make it real! 🆕
The last step of this tutorial will teach you how to update your static website after its first release.
Now that everything is configurated, we will refer to step 4, “Push your code to GitHub”. In this previous part, we pushed our code to our repository. Here, the process will be the same with our new updates.
We want to save our about.html page and update the index.html with the new changes.
Let’s do it using the same Git commands as step 4.
$ git add index.html about.html
$ git commit -m "Add an about page"
$ git push origin main
Once it’s done, wait a few minutes, come back to your website URL, reload, and your changes should appear!
Thanks for following this tutorial! I hope you learned more about the GitHub Pages while reading it.