This tutorial is going to walk you through the process of hosting your website on Github. It’s a very easy process and we will make it even easier with this step by step guide. First we will walk through the free way, then I will show you how to get a domain name for only $0.99 cents.
I’ll be breaking this tutorial into several steps:
Getting Started
Setting up Github Pages
Creating a Repository
Creating an index.html Page
Uploading files to GitHub
Making changes to your website
Adding a custom Domain name (Namecheap)
Hosting a website on GitHub is completely free and you can get the website up and running in a few minutes. This tutorial will guide you step by step to achieve this.
Pre-requisite:
The only thing you need to have is a GitHub account.
Step 1: Goto https://github.com/new to create a New Repository.
Step 2: Give a meaningful name to your repository, for example, github-website-demo
Step 3: Leave everything as default and click on Create Repository. Your website repository has been created!
Step 4: Goto Settings of the newly created repository from the top right corner and scroll down until you see GitHub Pages section. Under Source, select master branch and click on Save. This will enable GitHub Pages for your repository. If you visit your repository page now at https://yourname.github.io/repositoryname/, your website will be up and running!
This article is a step-by-step guide on how to host a website on GitHub.
Hosting a website on GitHub Pages is free of charge and easy to set up. It requires little technical knowledge, and you can achieve it in less than thirty minutes.
If you are not sure about the advantages of hosting your site on GitHub, or if you don’t know how to start, this tutorial is for you!
Advantages of Hosting on GitHub
GitHub Pages offers several advantages:
It is free of charge.
You don’t need to configure it – just create an account and upload your files.
It is an excellent way to practice Git, without the risk of breaking anything.
It offers HTTPS support by default.
What do we need?
We require the following:
A GitHub account (obviously!) – create one here if needed.
A text editor (e.g., Visual Studio Code).
The problem:
When I started to work on my website, I wanted to have a way to host it. My options were:
Hosting it on my own server and pay for the hosting and domain name. Host it on a free hosting service. Host it on GitHub Pages.
I wanted to save money, so my first option was out of the question (I’m a student at the time). The second option required me to write some code and configure the server myself, didn’t sound appealing to me. So I decided to go for the third option: Host it on GitHub Pages.
Why you should use GitHub Pages:
It’s free! You don’t need any knowledge of servers or domains. It’s easy! You can edit your website from anywhere as long as you have internet access and a web browser. It’s fast! Because your website will run in data centers around the world (CDN), your website will be delivered fast to people visiting your website from all over the world. It’s backed up! GitHub is constantly making backup of your files, so don’t worry about losing your content. It uses HTTPS by default! Which means that people can browse your site safely without anyone being able to read what they are doing online
So you want to host your website on GitHub? Well, here’s how to do it.
Step 1: Sign up for GitHub
Sign up for GitHub if you haven’t already. It’s free, and they won’t spam you with useless emails. I’m assuming you know your way around version control software and the command line, but if not, I recommend learning Git first.
Step 2: Create a repo
Create a new repository on GitHub called username.github.io, where username is your username (or organization name) on GitHub. This is important; if you’re just doing this for yourself and not an organization, make sure it’s named like this, otherwise it won’t work!
Don’t check the “Initialize this repository with a README” box. You don’t need one yet because you’re going to clone it using the command line in step 4.
Step 3: Clone the repo to your computer
First things first: go to the terminal and navigate to wherever you want to host your website files (I’ll be using ~/Sites/). Once there, type the following code: $ git clone https://github.com/yourusername/yourusername.github.io**
This will clone your empty repository onto
In this post, I’ll walk you through the steps of setting up a GitHub pages website, and customizing it with a theme.
GitHub Pages is a static site hosting service that takes HTML, CSS and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process, and publishes a website. You can host your site on GitHub’s github.io domain or your own custom domain.
First thing you need to do is create an empty repository (new repository) named username.github.io where username is your GitHub username. If you have never used GitHub before, you can learn how to create a new repo here: How To Create A Repo On Github
Checkout the Code
Navigate to the main page of your new repository on github.io and copy the URL of your empty repo, by clicking the clipboard button at the top right corner of the page as shown in image below
Next open your terminal or command prompt and clone that repo by running:
git clone [YOUR-REPO-URL]
cd [YOUR-REPO]
If you have never cloned a Git repo before, here is a handy guide for cloning repositories: How To Clone A Github
Codespaces is a powerful but simple development environment in your browser and built with GitHub.
Codespaces is powered by Visual Studio Code, a streamlined code editor with support for development operations like debugging, task running, and version control. It includes a built-in command-line interface (CLI) for managing SQL databases and deploying app updates.
Codespaces will be available in both free and paid versions, but it’s not yet clear whether the paid version will offer more storage or deeper integrations with other services.