Building web applications take much time, but what if you want to create a small website, like a business card? If you are fine with a simple, static content and you are a developer, there is just a perfect place to have it set up in seconds. This post describes how you can create your own site using Github.
Github launched their Pages project in late 2008 and has become very popular over the years. It allows the users to create repositories that are available publicly under
github.io domain. There are two types of Pages: one describes a user (
user.github.io) and the other is designed to promote user's repository (
user.github.io/repo-name). In the following example, I'll show how I set up the Pages site for my account at slomek.github.io.
For my business card, I wanted to go for the simplest approach possible, so I decided to limit by project to just three files. Obviously I needed an HTML file to display something:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Pawel Slomka | Home Page</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <link href='https://fonts.googleapis.com/css?family=Cabin:500' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="public/styles/main.css"/> </head> <body> <div id="template"> <div id="logo"> <img src="public/images/cogito_ergo_sum.jpg" alt=""/> </div> <div id="data"> <div id="menu"></div> <div id="main"> <div class="title">Paweł Słomka</div> <div class="subtitle">Software Developer</div> </div> <div id="social"> <a href="https://pl.linkedin.com/in/pawelslomka" target="_blank"> <span class="fa fa-3x fa-linkedin-square"></span> </a> <a href="https://github.com/slomek" target="_blank"> <span class="fa fa-3x fa-github"></span> </a> <a href="https://twitter.com/pawel_slomka" target="_blank"> <span class="fa fa-3x fa-twitter-square"></span> </a> <a href="https://www.facebook.com/slomka.pawel" target="_blank"> <span class="fa fa-3x fa-facebook-square"></span> </a> </div> </div> </div> </body> </html>
As you can see, this is just a simple page with a couple of links, and an image (the second file). Last, but not least, I created a simple CSS file that makes it look just the way I like. I also added a custom font and two third-party CSS files, but instead of having them hosted by GitHub as well, I used a CDN which should make my page load a bit faster. This is based on the premise that people who visit my page also visit other pages that happen to use the same CDN (and the same third-party CSS). In this case, the browsers are likely to cache those files, making our tiny page even tinier.
Making it public
In order to publish our repository to the world, we first need to make sure Github knows it's a Pages project. The most important thing is naming, as the user-level Pages project must be named as the URL it will be available at, ie.
<user>.github.com. In my case, I needed to create a repository named
slomek.github.io. Then I needed to do to the projects Settings and scroll down to GitHub Pages section. There, I selected master branch as Source and I was good to go. Since I'm like (and I think everyone should) seeing the green lock and
https before any URL I visit, I checked the Enforce HTTPS checkbox and started waiting for the changes to apply.
After a few minutes I was able to access my business card at
The full source code of this example is available on Github.