Using GitHub to Host a Webpage
GitHub is the cool place to find open-source code, where users (often strangers) "fork" (copy) each other's code and collaborate to improve project hosted on each others' "repositories" (folders) at the same time. The great thing about GitHub is that it also lets you host your own (secure!) webpages and even allows you to customise your own domain and favicon.
The first thing to do is to go to GitHub and create an account. There are two types of webpages you can create on GitHub. The first is the User or Organisation home page - (create repository after your user name e.g. www.debbiediscovers.github.io). The second is what they call a project page, or gh-pages, (create a repository which can be called whatever you like e.g. Blog or Website or Your Cat's Name.)
Using Github Pages
The easiest way to create your own website is to use GitHub's automatic page generator. This lets you make a webpage without requiring any knowledge of HTML or CSS or Javascript. After creating your repository, click on Settings (lower left corner) and you will see the automatic page generator function. Simply follow the instructions and select from a range of stylish templates. Super easy, and pretty neat.
GitHub uses Markdown, which is similar to html but much simpler. All the README files that you see on Giithub are markdown files. It is good practice to have a README for each repository you create so people know what you are trying to do.
Using Github for Mac or Windows
YOu can also download GitHub for Mac or Windows. Then create a repository (select public and initialise it by creating a README file). Go to the bottom left, and click on Clone on desktop.
Using Terminal
You will need to use the command line for this, but it's not that hard. For most part, if I see something I like on Github, I practice my style of Git which I call "fork and pray". Whether it's javascript, node.js, go, ruby, python, I just copy and paste it into Terminal and it either works or it doesn't. Haven't done any real damage to anything or anyone. YET.
There are only 5 or 6 Git commands to remember, and after a few tries, you will get the hang of it.After creating your user repository on GitHub, clone the directory in your desktop. To do this, click on the https://github.debbiediscovers/debbiediscovers.github.io link on the lower right hand side of the web page. Go back to terminal and use the command prompt and type:
git clone https://github.debbiediscovers/debbiediscovers.github.io
This will create a directory in your hard drive. Then, create an index.html file for your web page. You can either create it via a text editor like TextMate or Atom and drop the file in the Github folder that you just created. Alternatively, you can use the terminal commands touch index.html to create the file and then vim or nano index.html to edit it.
$ touch index.html
$ vim index.html
If in Vim, create the HTML document and use bootstrap CDN's ready made styling sheets by adding the stylesheets in your header, and the script at the bottom of the body.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title> DEBBIE DISCOVERS GITHUB </title>
<!-- Add some style to your site, see http://getbootstrap.com for details -->
<!-- Latest compiled and minified CSS --
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
</head>
<title> DEBBIE DISCOVERS GITHUB </title>
<html>
<body>
<h1> Debbie Discovers Github </h1>
<h2> Use Github Geek to make Websites Chic </h2>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
Add your own styling, then to upload the file onto Git, execute Git's Add, Commit and Push commands.
git add .
git commit -m "Initial commit"
git push -u origin master
And there you go!
Custom Domains and Favicons
You can even add your own custom domain to your website.
To add an "apex domain" (which means a base url like "debbiediscovers.com"), add two A records and point them to the following IP addresses:
192.30.252.153
192.30.252.154
To add a "sub-domain" (e.g."info.debbiediscovers.com"), point your CNAME (without the WWW) to your Github Pages default domain (debbiediscovers.github.io).
If you use Bluehost for example, don't create subdomain as Bluehost will add a folder in your public directory and there will be a conflict. Just change the CNAME.
Wait for 30 minutes and you will have your very own webpage hosted on Git, styled on your own custom domain.
Note: If you are using gh-pages, you will need to "checkout" and create a new branch.
$ cd your_repo_root/repo_name
$ git fetch origin
$ git checkout gh-pages
Add your own custom favicon with this line of code. Don't forget to throw your favicon.png or favicon.ico file into the master repository
<link rel="shortcut icon" type="image/png" href="/favicon.png">Free Domain for University Students and Much More from NameCheap and Github Education
Namecheap is giving all university students from UK, US, Canada and Australia a free .me domain for one year or special deals on their other domains.
If you are not from one of those four countries, do not fret. Github Education has an even better deal for any student age 13 and above enrolled in a degree or diploma course.
Students not only get the free .me domain from Namecheap, but a total of more than $2,000 worth of freebies including the text editor Atom, a Digital Oceon's cloud-hosting account, Microsoft Azure's Visual Studio, 15K SendGrid emails, Waived transaction fees on Stripe for $1K revenues, Udacity and Thinkful courses and much more.
Read more about it on my blog post Free Domain for Students but What's the Catch?
With so many freebies, there is really no excuse not to claim and build your own webpage on Github.
Next: See my favourite Disney quotes that inspired my first Medium post!
Next: Try hosting your entire Twitter history on Github Pages
Happy Forking!