Hosting and publishing a website on the internet used to be a big chore in the past.
There were complex setups, confusing control panels, and free website hosting sites that looked shady (unless you you didn’t). Never mind shelling out tons of dollars each month on a paid, managed web host.
Fortunately, all that has changed with the advent of free and simple static site hosting services like GitHub Pages. In this article, we’ll take a look at how easy it is to set up Github Pages and use them to host a website for free.
By the end of this article, you’ll have your first website. live on the Internet that you can share with anyone with an Internet connection. We’ve divided our guide into four easy steps:
- Create a GitHub account
- Create a code repository
- Upload your website files in your code repository
- Viewing your website online
Prerequisites:
Before we begin, we’ll need to have a couple of things in place. hand:
1. A web page that we can upload to GitHub. If you don’t have one, or if you don’t know how to create one, you can learn how to get started in this video from our in-house web developer Abhishek:
2. An email address to set up your GitHub account.
Got everything you need? Let’s get started!
Hosting a website, step 1: Create a GitHub account
First, you’ll need a GitHub account. If you’re only setting up one, it’s important to pay special attention to the username field.
This will be reflected in your website URL, so select something you’d like to share with your circle (for For example, if you select “johndoe“, your website will be active at johndoe.github.io).
Choose the free plan, which is the that we need to host our website. After this step, you’ll get a short survey that you can choose to complete.
If all goes well, you’ll be redirected to your control panel and asked to verify your email address. You can do it from your email client. For example, this is what email looks like in Gmail.
Once you click the verify email address button, you will be informed that confirmation of your email was successful. Proceed to step two!
Host a Website, Step 2: Create a Code Repository
At this point, you can start creating something called “code repositories”. Sure, this sounds very technical but it simply means a code project. You can learn about repositories and how Git and GitHub differ in our guide.
Our website, along with all its files, is an example of a code project, and we’ll create a repository for it. on GitHub—or, in simpler terms, we’ll upload our website project to GitHub. If you couldn’t find the page to create a new GitHub project, click the following: Create a new GitHub repository.
This is what the page to create a new repository looks like:
There is something important here. The name of the repository (the ‘Repository Name’ field) must be exactly the same as the username you selected when signing up for GitHub, followed by “.github.io“.
So, if you selected the username “johndoe“, the repository name should be “johndoe.github.io” here. In our case, we select “githubpages-testing-cf”, so we will name the repository as “githubpages-testing-cf.github.io”.
Keep it public and click the “Create Repository” button.
Host a Website, Step 3: Upload your website files to your code repository
Having created your code repository, you are now ready to upload your website files.
Don’t be intimidated by all the details; We don’t need to know about any of that right now! Locate “upload an existing file” (in the “Quick Settings” section, just below where you see the repository name) and click it:
On this page, drag and drop all the files in your project folder. If you took the web development short course, this is the folder we call “portfolio”.
After uploading and listing your files, scroll down and add a “confirmation message” which is just a message describing its action.
In our case, we added our project files, so we’ll write something like “project files added”.
When When you’re done, click “Commit Changes” and GitHub will take you to the repository home page.
If you see this, congratulations! You have successfully published your project on GitHub. Your website is already live, but how do you view it online? Easy…
Host a Website Step 4: View Your Website Online
To view your newly published website, open a new tab in your browser and enter the address https:/ /your-username.github.io, replacing your-username with your current GitHub username; so if your username was “johndoe“, enter https://johndoe.github.io.
Our test account username was githubpages-testing-cf, so we’ll write https://githubpages-testing-cf .github.io in your browser’s address bar and hit enter!
Tadaa!!
The portfolio website we built from scratch in our short development course web is now available on the Internet. We may share the address we type into the browser with anyone who has Internet access and can visit our website. Isn’t that absolutely magical?
Summary
Great job! You are off to a great start in the beautiful world of web development by publishing your first portfolio website. If you need more inspiration to design it, we’ve collected a lot of web development portfolio websites and tips in this guide.
The best part? If you so choose, you can continue to host a website exactly that way for years to come. Every time you look back at your first website, you’ll be reminded of the beginning of your journey as you move towards more and more interesting challenges in this new world you’ve found.
If you’d love to learn more about web development, check out some of the articles below.
- How to Become a Web Developer: Everything You Need to Know
- 50 Web Development Buzzwords That all new programmers should learn
- What is GitHub? A complete tutorial for beginners
.