In this tutorial, we are going to learn about using the GitHub to host our website, without paying anything at all, using GitHub Pages.
It’s important that you follow this link as a prerequisite to this tutorial.
A beginner may not be sure of whether to invest in buying server space, and GitHub gets their work done, for free, in a much clean and elegant manner, using a feature provided by GitHub called “GitHub Pages”.
Firstly, let us ask all the technologies we are going to use give their quick and sweet introduction.
|CSS||A style sheet language used to set style for the HTML elements.|
|Jekyll||Jekyll is a parsing engine bundled as a ruby gem used to build static websites from dynamic components such as templates, partials, liquid code, markdown etc. and helps transform your plain text into static websites and blogs. Jekyll is known as “a simple, blog aware, static site generator”.|
|GitHub||The famous web based GIT Repository Hosting Service, and in this case, it will help us host our website.|
Step 1 Create/ Sign into your GitHub account.
Step 2 Create a new GitHub Repository
Go into your dashboard and find a “New Repository” button. Click on it to create a new repository and name it as “<your-GitHub-username>.github.io” (without double quotes).
For example:- If my username is hemangsk, my new repository’s name should be Hemangsk.github.io
While creating a new repository, GitHub asks for a variety of details to be filled about the new repository, You need not worry about it at all, Just make sure you make the Repository – “public“.
Step 3 Dealing with the repository page
NOTE: Once you click on Create Repository, you land up on the repository page. Here’s where all the action takes place
Now the repository page comes and here’s what you have to do,
- Get all your HTML and CSS files ready in a folder, let’s name it WEB, in your computer.
- Push(Upload) it on that repository. Now there are several ways to do it, like using Git, or the GitHub client on Windows, or manually.
- What you have to do is to manually copy paste each of your HTML and CSS files to that repository, suppose you have a index.html file in WEB folder in your computer.
- Open the repository page
- Click on New File button on that GitHub’s repository page.
- Name your file as “index.html”.
- Minimize the repository page and open the index.html file in your computer.
- Copy its contents.
- Maximize the repository page
- Paste the copied contents
- Click on “commit changes”
- index.html file is now pushed/uploaded to your repository.
- Repeat these steps for all the rest of the files in your “WEB” folder.
Here we go! Your website is now up and running.
Now you can use GitHub to test your HTML5 & CSS3 projects, showcase them to real world, on a real and beautiful website!
So that’s how GitHub pages work, really easy! You can make unlimited repository sites plus one user site. “User” site is what we just created. Repository sites are created in exactly the same way.
You can put all your doubts in comments section, and I’ll get back to you.
Have a great day!
About the Author: Hemang Kumar is n open source developer and a sophomore at USICT, New Delhi pursing BTech CSE, loves to design code, web and user interfaces.He can be reached at https://www.linkedin.com/in/
If you also wish to showcase your blog here,please see GBlog for guest blog writing on GeeksforGeeks.
- How to Publish a Static Website on GitHub?
- How to host a website on IBM Cloud
- Top 10 Free Resources For App And Website Themes
- How DHCP server dynamically assigns IP address to a host?
- GIT | An Introduction to Github
- How to Upload a Project on Github?
- An Ultimate Guide to Git and Github
- Bitbucket vs GitHub vs GitLab
- Creating Repository in GitHub
- How to add a README to your GitHub profile?
- List of useful Github Commands
- Using Bitbucket as an extension to GitHub capabilities
- 5 GitHub Repositories that Every New Developer Must Follow
- Top 10 Useful GitHub Repos That Every Developer Should Follow
- How to Deploy Your React Websites on GitHub?
- What is GitHub Student Developer Pack and How to Get it?
- How to Upload Project on GitHub from Android Studio?
- Downloading gists from Github made simple
- Fetch top 10 starred repositories of user on GitHub | Python
- Making your first Open Source Pull Request | Github