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
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.
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.
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:
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