Tech O'Clock
  • Home
  • About
  • Services
    • Website Design
    • Social Media Marketing
    • Search Engine Optimization (SEO)
  • Portfolio
  • Blog
  • Contact
Tech O'Clock
  • Home
  • About
  • Services
    • Website Design
    • Social Media Marketing
    • Search Engine Optimization (SEO)
  • Portfolio
  • Blog
  • Contact
Tech O'Clock
  • Home
  • About
  • Services
    • Website Design
    • Social Media Marketing
    • Search Engine Optimization (SEO)
  • Portfolio
  • Blog
  • Contact
We are available 18/5.

+2348037708206

+2348022216667

[email protected]

Contact Information

Tech O'Clock, #66 Old Otta Rd, Lagos.

  • Home
  • Web Design
  • How to Use GitHub Pages to Cre ...
Shape Images
678B0D95-E70A-488C-838E-D8B39AC6841D Created with sketchtool.
ADC9F4D5-98B7-40AD-BDDC-B46E1B0BBB14 Created with sketchtool.

How to Use GitHub Pages to Create a Website

Avatar of JIMOH Ibraheem
JIMOH Ibraheem
  • February 19, 2021
  • 7 min read
  • How To,  Internet,  Web Design
  • GitHub GitHub Pages How to use GitHub pages
How to Use GitHub Pages

For once, we won’t talk much about coding in this article, but how to create a basic website in minutes and host it for free using GitHub pages. You can share this article with anyone you know would like to have a website but thinks it’s expensive and complicated.

 First things first. To get started, you need to have some basic knowledge about hosting a custom website on GitHub pages:

  •  HTML: a good introduction;
  • GitHub: create a free account here: github.com.

We will be using github.com to host our static website in a repository (a folder). This essential service allows you to store the site code, to version it, and to publish it for free on the Internet under optimal conditions (CDN, anti-DDoS, and so on…)

Important note: All files hosted on your free GitHub account are public unless you subscribe to a paid private account. So, don’t store anything sensitive or private on your GitHub page.

Table of Contents
1. Hosting a Static Website on GitHub Pages
2. Create the GitHub repository
3. Create a website with GitHub page generator
4. How to edit your website on GitHub pages
5. How to use edit your GitHub pages locally
6. Test your new website
7. Install a great template
8. Frequently Asked Questions
8.1. How to add a domain name?
8.2. How do you add a GitHub page?
8.3. How to analyze the traffic of my site?
8.4. How to add a card?
8.5. How to add a comment system?
8.6. How can I add a contact form?
8.7. How to receive payments?
8.8. What are GitHub pages?
8.9. How can I rank GitHub pages on Google?

Hosting a Static Website on GitHub Pages

For most sites, blogging solutions (WordPress and others) are quite complicated. They require special hosting (PHP or other), technical knowledge for installation, and especially medium / long-term maintenance because of surprise security updates and other bug fixes to be applied.

However, it is possible to create a modern and efficient website that does not need server-side code (therefore no PHP), and can therefore be hosted anywhere, and at a lower cost (free this time). The site’s code will only consist of HTML, CSS, and JavaScript, and will run directly in the visitor’s browser, which has the following advantages:

  • It’s simple and efficient;
  • Requires little to no maintenance;
  • No risk of hacking;
  • Optimal performance;
  • Total freedom.

Besides, in 2015, any online service worthy of the name offers an API that allows you to integrate the third-party functionality directly on your website without the need for server-side code. So, this pure client-side approach has no limits.

In this article, we will see how to create and host a simple HTML / CSS website using GitHub pages. But in the coming sections, we will explore how to host your static website and add extra features.

Create the GitHub repository

After creating your GitHub account, you need to setup a new repository for your website: https://github.com/new

The repository will be created at this address: https://github.com/USERNAME/website

Create a website with GitHub page generator

Thanks to the default templates, create your single-page site in 3 clicks.

Go to the project page: https://github.com/USERNAME/supersite

  • Then Repository settings (icon at the bottom right);
  • Automatic page generator then Launch;
  • Edit the site text;
  • Select your preferred template then Publish Page.

Wait a few seconds and go to http://USERNAME.github.io/supersite to see the final result.

How to edit your website on GitHub pages

Go to the project page, https://github.com/USERNAME/supersite.

This is where we find all the code and files for the site.

Click on the file to modify, typically index.html which is the home page, click on the “pencil” icon at the top right to edit the file and apply your changes.

Once the changes have been made, complete the “Commit changes” from below, with an explicit title identifying your modification.

Example: “Adding contact info”.

Click on Commit changes, wait a few seconds, and go to http://USERNAME.github.io/supersite to see the changes.

How to use edit your GitHub pages locally

To be able to edit the site more easily, add/modify files, you can recover it on your machine, and you can then use your favorite text editor to modify it.

Install and configure the GitHub app: For Mac or Windows here.

  • Clone your project and copy the files from your GitHub page to your computer;
  • Edit your files directly;
  • Test if the site is working as expected;
  • Then click on Commit to save your changes;
  • And finally, Sync to upload your files to GitHub and update the site for the rest of the world.

Test your new website

You can open the index.html file in a browser to see the result.

Note: If you have added Google Maps or a JavaScript API, you will need to launch a web server to be able to see the result.

For example, run python -m SimpleHTTPServer in your terminal from the site folder (where index.html is located) then open http://127.0.0.1:8000 in your browser. (This is due to a security restriction)

Install a great template

If you want different templates than those offered by GitHub, you just need to replace the files in the project folder.

Choose for example one of the free high-quality templates available at html5up.net or pixelarity.com (paid).

Download the sources and place the files in your project.

Edit the files, test, then commit & sync, and voila.

And after:

  • Learn Markdown syntax: reference;
  • Learn Git: try.github.io;
  • Learn JavaScript: jsbooks.revolunet.com and Eric Elliott’s book;
  • Read all the articles from code.

Frequently Asked Questions

How to add a domain name?

  • You can buy a domain name on Bluehost or Namecheap.
  • Edit the domain’s “DNS Zone” and check GitHub for DNS instructions.
  • add a CNAME file to your project, containing the line www.myproject.com.

DNS changes can take up to 24 hours to propagate so try www.myproject.com a little later.

You may find these help pages on GitHub useful: Custom domain, DNS setup.

How do you add a GitHub page?

To simply create additional pages, add a new HTML file, for example products.html, into the project and link to that page from the index, for example;

<a href="produits.html">View products</a>

How to analyze the traffic of my site?

If you want to track your visitors, know where they come from, what they are doing, and where they are going, create an account on Google Analytics and add the tracking code to your HTML pages.

How to add a card?

Follow Leaflet guidelines, the free, open-source mapping that benefits from an active community.

If you just need a map as a still image, generate the HTML code here: staticmapmaker.com and copy the code into your page.

How to add a comment system?

Create an account on disqus.com and add the JavaScript code to your page.

How can I add a contact form?

Create an account on typeform.com, create your form, and add the JavaScript code “embed” to your page.

You can also create an account on mailchimp.com, create a form, and add it to your page with the code “embed”.

How to receive payments?

Create an account on stripe.com and add the JavaScript code to your page.

What are GitHub pages?

GitHub pages are a special branch of your code on GitHub (a version of the code) that automagically publishes and hosts your site.

How can I rank GitHub pages on Google?

Create quality, targeted content that is unique on the Internet and useful to your visitors. Create links with sites and communities on the same theme.

Naturally, other sites will then talk about yours, send you visitors, and gradually push you up in results over the months. It all boils down to creating value.

Share on:
  • Facebook
  • Twitter
  • Linkedin
Avatar of JIMOH Ibraheem
JIMOH Ibraheem

Ibraheem is a certified digital marketer and mindfulness practitioner. He loves writing and designing awesome websites. But If he's not spying on competitors or designing websites, he's probably reading thick self-help or occult books.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Search

Recent Posts

How to Use GitHub Pages
How to Use GitHub Pages to Create
  • February 19, 2021
  • 7 min read
Super AffilIate System by John Crestani Review
Is Super Affiliate System 3.0 by John
  • September 3, 2020
  • 11 min read
Best Website Hosting Providers in Nigeria
Web Hosting in Nigeria: 5 Best Website
  • August 26, 2020
  • 7 min read
Real Estate Ads With Google AdWords
How to Run Effective Real Estate Ads
  • August 10, 2020
  • 7 min read

Categories

  • Business
  • How To
  • Internet
  • SEO
  • Social Media
  • Web Design

Tags

2020 2021 backlink Best Hosting Companies BlueHost branding customers Digital marketing companies in Nigeria GitHub GitHub Pages Google AdWords Hosting Providers How to use GitHub pages inbound linking John Crestani leads live chat software Nigeria open an active paypal account open paypal account paypal in unsupported country PPC QServers rank math Real Estate Ads Review search engine submission SEO SEO 2020 social media Super AffilIate System Super Affiliate System 3.0 tawk.to telegram telegram vs whatsapp website whatsapp whatsApp on pc WhoGoHost wordpress wordpress plugin yoast seo yoast vs rank math
Let's work together

Ready to grow your business?

Get an Instant Quote
Or call us now +2348037708206

© 2013 - 2021 | Tech O'Clock | RC 3065065

  • Design a Website
  • Rank on Google
  • Advertise on Social Media