Creating and Hosting a Personal Site on GitHub
A step-by-step beginner’s guide to creating a personal website and blog and hosting it for free using GitHub Pages.
This guide is meant to help Git and GitHub beginners get up and running with GitHub Pages and Jekyll in an afternoon. It assumes you know very little about version control, Git, and GitHub. It is helpful if you know the basics of HTML and CSS since we’ll be working directly with these languages.
We’ll also be using a little bit of Markdown, but by no means do you need to be an expert with any of these languages.
The idea is to learn by doing, so the code we’ll be implementing in this tutorial is available in this guide or can be downloaded entirely at this GitHub repo. Feel free to copy and paste or type this code directly into your project’s files.
For a little background on why I chose GitHub and GitHub Pages for my personal website (and other projects) because of:
- simplicity
- good performance and reliability
- no databases
- hosting to be free or really cheap
- a custom domain
- the ability to work on my site from anywhere if needed
- to use open source tools supported by an active development community
- to get up and running quickly
- to have version control on my website, preferably Git
- to be able to share my code so others can easily re-use it.
Other Resources You Should Know
In order to make GitHub Pages accessible to a wider audience, this guide focuses on using the web interface on github.com to build your personal website, thereby generalizing and glossing over the standard tools associated with Git and GitHub. To get a lot dirtier with Git and GitHub (ie, the command line and terminal), there are several other great guides you should also know about, probably bookmark, and read after completing this one, or jump over to if that is more your speed: Anna Debenham, Thinkful, and even GitHub itself go above and beyond making the command line or local workflow of GitHub hosting and Jekyll templates accessible to a wider audience.
Also, at the end of this document, there is a pretty good list of resources related to Git, GitHub/Pages, Jekyll, and Markdown that can help you dive deeper into these tools. I’ll do my best to keep this list updated as I find new ones.
What is Git, GitHub, and GitHub Pages?
Git, GitHub, and GitHub Pages are all very closely related. Imagine Git as the workflow to get things done and GitHub and GitHub Pages as places to store the work you finish. Projects that use Git are stored publicly in GitHub and GitHub Pages, so in a very generalized way, Git is what you do locally on your own computer and GitHub is the place where all this gets stored publicly on a server.
Git
Git is a version control system that tracks changes to files in a project over time.
Git is for people who want to maintain multiple versions of their files in an efficient manner and travel back in time to visit different versions without juggling numerous files along with their confusing names stored at different locations. Think of Git and version control like a magic undo button.
I highly recommend this 15 minute, hands-on web tutorial on using Git.
GitHub
GitHub is a web hosting service for the source code of software and web development projects (or other text based projects) that use Git. In many cases, most of the code is publicly available, enabling developers to easily investigate, collaborate, download, use, improve, and remix that code. The container for the code of a specific project is called a repository.
There are thousands of really cool and exciting repositories on GitHub, with new ones added every day. Some examples of popular software development projects that make their code available on GitHub include:
- Twitter Bootstrap, an extremely popular front-end framework for mobile first websites, created by developers at Twitter.
- HTML5 Boilerplate, a front-end template for quickly building websites,
- The JavaScript Visualization Library D3
- Ruby on Rails, the open-source web framework built on Ruby.
GitHub Pages
GitHub Pages are public webpages hosted for free through GitHub. GitHub users can create and host both personal websites (one allowed per user) and websites related to specific GitHub projects. Pages lets you do the same things as GitHub, but if the repository is named a certain way and files inside it are HTML or Markdown, you can view the file like any other website. GitHub Pages is the self-aware version of GitHub. Pages also comes with a powerful static site generator called Jekyll, which we’ll learn more about later on.
Getting Started with GitHub Pages
Don’t worry if some of these concepts are still a little fuzzy to you. The best way to learn this stuff is to just start doing the work, so let’s not waste anymore time and dive right in.
1.) Create your project’s repository. Login to your GitHub account and go to https://github.com/new or click the New repository icon from your account homepage.
2.) Name your repository username.github.io, replacing username with your GitHub username. Be sure it is public and go ahead and tell GitHub to create a README file upon generating the repo.
3.) Create an index.html page by clicking the plus icon next to your repository name and typing the file name directly in the input box that appears.
On the resulting page, put this markup inside of the GitHub text editor:
<!DOCTYPE html>
<html>
<head>
<title>Vaibhav Hariramani, A tech Blogger</title>
</head><body>
<nav>
<div >
<h1>Hi there, I'm Vaibhav Hariramani!</h1>
<p> <a href="/about">Read more about my life...</a></p>
</div><footer>
<ul>
<li><a href="mailto:vaibhav.hariramani01@gmail.com">email</a></li>
<li><a href="https://github.com/vaibhavhariaramani">Github</a></li>
</ul>
</footer></body>
</html>
4.) Commit index.html. At the bottom of the page, there is a text input area to add a description of your changes and a button to commit the file.
5.) Repository Settings Head over to GitHub.com and create a new repository, or go to an existing one.
Click on the Settings tab.
If you scroll down on the settings page, you’ll see the GitHub Pages section near the bottom. Click the Source button to start the process of creating your site.
Select master branch
Congrats! You just built your first GitHub Pages site. View it at http://username.github.io. Usually the first time your GitHub Pages site is created it takes 5–10 minutes to go live, so while you wait for that to happen, give this post a like ❤️.
Visit http://username.github.io to see your website. You can make it look like the page at https://vaibhavhariaramani.github.io/.
Checkout our Next Blog, to learn to create Complete Portfolio website and complete Blog Site.
ps: next blog on portfolio site coming soon’
Thank You for reading
Please give 👏🏻 Claps if you like the blog.
GEEKY BAWA
just a silly Geek who love to seek out new technologies and experience cool stuff.
Do Checkout My other Blogs
Do Checkout My Youtube channel
If you want to get in touch and by the way, you know a good joke you can connect with me on Twitter or LinkedIn.
Thanks for reading!😄 🙌
Made with ❤️by Vaibhav Hariramani
- If you enjoyed this, follow me on Medium for more
- Follow me on Kaggle for more content!
- Let’s connect on LinkedIn
- Interested in collaborating?
- Check out my website.
- Check out my other website.
Don’t forget to tag us
if you find this blog beneficial for you don’t forget to share it with your friends and mention us as well. And Don’t forget to share us on Linkedin, instagram, facebook , twitter, Github
More Resources
To learn more about these Resources you can Refer to some of these articles written by Me:-
Download THE VAIBHAV HARIRAMANI APP
The Vaibhav Hariramani App (Latest Version)
Download THE VAIBHAV HARIRAMANI APP consist of Tutorials,Projects,Blogs and Vlogs of our Site developed Using Android Studio with Web View try installing it in your android device.
Follow me
on Linkedin, instagram, facebook , twitter, Github
Happy coding ❤️ .
