Get a website with GitHub Pages

The front page. Looks good isn’t it?

Having a website is no surprise nowadays, be it a corporate, a personal blog, portfolio page or even an online shop! The services out there aplenty, usually not free of charge though.

Here I would share a really cool way I particularly like: via Pages Github. GitHub initially is a software development and version control system, where developers collaborate on mostly open-source projects. That would not be an exaggeration to say, github is the largest creative community in the world (hey the world is digital nowadays isn’t it?)!

So, this place has the ability to store code, which developers took advantage of, and, eventually, extended into a full fledged service, featuring repositories bustling with open-source themes and templates to choose from. You’d be surprised how good it is! Follow along.

Website in under 2 minutes

Really? Yes, even faster!

Get a github.com account beforehand, if you don’t have it yet. Ensure to verify it via a email.

Now choose a design. These are the directories showing off custom templates of any kind:

As an example, let’s set up a professional looking website using Airspace Jekyll template by Andrew Lee.

The rest is as easy as 1–2–3. Here are the steps:

1. Fork the repository where template code of our choice is stored: press “Homepage” to get to the repo, then click “Fork” button on the top right-hand corner:

Fork a repo

In a few seconds our github would have a full “copy” of the designated website.

2. The next thing is renaming. Go to the Settings tab and give the repository a name username.github.io, it is important that username part is identical to the account name:

3. Following step ensures the template is configured exactly for our github.

Go to _config.yml. Each theme offers various depth of customization, yet some fields are mandatory to be filled so that the website kicks off. Airspace’s such mandatory variables are url and baseurl. Edit the file as per example:

Notice how url is set to https://username.github.io — that would be the actual website address! Also keep it https — not only it is a secure extension of http protocol, but most websites can be hosted only that way nowadays.

Scroll the page and “Commit changes”.

Vous voilà https://justanother-timetraveller.github.io/ The site is ready!

The content

Even though Airspace features most content as html pages, the blog section can be filled through markdown.

See how the _posts folder contains *.md files such as 2016–05–20-my-example-post.md which stand for markdown. Basically markdown standard allows writing as if in a notepad (or on Medium!) with addition of special characters to transform words into bold/italics/etc. Here’s an amazing 5 minute tutorial on markdown I’d highly recommend.

So, to publish a blogpost, create a file in _posts such as yyyy-mm-dd-postname.md (ensure the date prefix is there) and type yourself away! Also for an ease of use consider prose.io service, which integrates seamlessly with github repository and has a nice markdown editorial interface.

About YAML front matter. It is important to specify parameters of the page at it’s very top before publishing. Here is an example:

---
title: Contact me
subtitle: Here you'll find all the ways to get in touch with me

layout: post
---

There’s plenty of capabilities that jekyll-websites offer through parameters, such as tags, image preview, social icons — you can learn which from the examples and readme.md of your theme.

Ok, upon commit Jekyll would automatically transform the .md into nice html webpage and publish it!

Advanced stuff

You might want to add Disqus comments for the blogs, which is a breeze to install, or maybe analytic tools to track user views, or set personal domain and any other features? Usually it is about customizing _config.yml, depends on a template. Anyway I suggest to consult the readme.md of your theme or address an excellent readme for beautiful-jekyll.

If the theme of your choice does not allow the above through _config.yml for some reason, check out my tutorial on Jekyll tutorial with Github pages with indepth walkthrough on how to add relevant code snippets by yourself.

Thanks

Yes, thanks for reading!

My credits go to Dean Attali, as I was largely inspired by his template and description.

All in all, modern themes both are easy to install and maintain with a few lines of a config file. While posting through prose.io or a local editor becomes a streamline with just a few clicks!

Ok, I bow out:) Have fun and great time \o/