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