Skip to main content

Put yourself on internet with Jekyll, GitHub and Cloudflare

Having a website on internet is a very powerful tool, you can create a tech blog, like mine, a site with your curriculum vitae, a portfolio, whatever you want. Being on internet increases your visibility and let other people know who you are, what do you do, or other information you consider important. But if you dedicate yourself to technology, computers, development and so on, you must have your space on internet. No excuses.

There are literally a lot of ways (platforms, CMS, etc.) to create your own site on internet: WordPress, Medium, Ghost… But today, I’m introducing you an static site generator named Jekyll.

What’s Jekyll

Jekyll is a CMS that offers a different way to put your content on internet, with support for images, texts, comments, etc. What differences Jekyll from other CMS like WordPress or Ghost, is that Jekyll is just a tool to transform your plain text into a website or blog. No databases, no configurations, just your plain text, images, videos, etc.

You may prefer having a WordPress hosted in WordPress.com, but what if I told you Jekyll may be hosted for free using GitHub pages even with your own domain?. GitHub will provide a free hosting on its servers with high availability and Cloudflare will help configuring your domain. Sounds great, huh?

I’m sure you are prepared to give a try to Jekyll and that’s why I’m going to explain in this article how you can create your own website/blog using it.

Create a “host” for Jekyll in GitHub

In GitHub you can create websites for yourself, your projects or your organization. Follow these steps to create a repository to host Jekyll:

  1. Go to GitHub and login with your username and password
  2. Clicks on New repository to create a new repository
  3. Name your repository <your-username>.github.io. Mine will be: adgllorente.github.io

create-repository

Deploy Jekyll in your host at GitHub

In the previous step we have created a repository that will be the hosting for our Jekyll website, in this step we are going to deploy Jekyll into GitHub pages. Open a Terminal and type:

Before uploading your website you must edit _config.yml to configure your domain name. Open _config.yml and edit this line with your GitHub domain https://<username>.github.io.

Finally, go back to your terminal and push your website to GitHub.

That’s all! Your website will be available at: https://<username>.github.io

jekyll-installed

Installing a theme for Jekyll

Jekyll is just static content but that doesn’t mean you can’t personalize it with a wonderful theme. In this step I’m going to show you static doesn’t mean ugly.

  1. Find a Jekyll theme, for example I’ve downloaded Airspace from Jekyllthemes.org
  2. Unzip, copy all files in the folder and paste them in your Jekyll root folder
  3. Attention: Check _config.yml to set url and baseurl values to your previous values.
  1. Build jekyll and push your changes. I’ve removed about.md because jekyll build was failing.
That’s all, your website will have a fantastic appearance, actually it looks quite professional:

jekyll-new-theme

Creating your first post

As I’ve told you before, Jekyll is all about plain content, no databases, no dynamic things, just your text. Creating a new post is quite simple, let’s do it:

  1. Create a new file in _posts/ folder with this structure <year>-<month>-<day>-title.markdown (2016-09-20-welcome-to-my-website.markdown)
  2. Add your post content to this file, for example:
After writing your post you only have to build Jekyll and push this into GitHub like this:
In the image below you can see an example of your recently created post:

jekyll-post

For more information about posting or configuring Jekyll:

Configuring your domain name with Cloudflare

I’m mostly a frontend developer and I’m not used to configure Apache, Bind, Ftp, Linux Users, etc. but I own a dedicated server, and that means I have to configure all of them, and so do I. But configuring domain names is my Achilles’ heel and that’s why I’m using Cloudflare.

Cloudflare is not only a DNS manager, it provides extra tools to boost your website speed. To start using it you need to create an account, add a domain name and change your domain DNS to point to Cloudflare’s DNS servers. In this step I’m supposing you already have a domain name configured in Cloudflare. You can follow this guide if you don’t have one.

In this example I’m using a subdomain testjekyll.adgllorente.com to point to my Jekyll page but if you want to configure a domain instead of a subdomain you only have to follow almost the same steps but filling information with your domain instead of your subdomain.

First of all we need to tell GitHub we are configuring our own domain name:

  • Go to GitHub.com > <username>.github.io repository > Settings
  • In the section GitHub pages you can add your own domain name, in my case testjekyll.adgllorente.com
  • Click in Save

github-domain-jekyll

Now we need to configure our domain name in Cloudflare:

  • Go to Cloudflare, select your domain name and click on DNS
  • Add your domain information and click on Add Record
  • Once created, click on the cloud on the right to set it with an orange colour
  • Note: If you want to set your domain name, replace github with your domain name.

cloudflare-domain-configuration

Your domain name is fully configured with just these steps, you can test it visiting your domain, in my case adgllorente.github.io.

Boosting load speed with Cloudflare

Cloudflare has a lot of tools but I’m going to review a few of them to boost your site performance:

  • Select your domain name and click on Speed
  • Mark everything on Auto Minify

auto-minify

  • Scroll down to Rocket Loader
  • Mark Automatic

rocket-loader

  • Now go to Cache
  • Scroll down to Caching Level
  • Mark Standard

caching-level

That’s all! Your website will loads in seconds with just a few changes.

Conclusion

Jekyll has a few pros:

  • Static content usually means faster and more secure
  • It has beautiful themes
  • Its configuration is simple.
  • You don’t need PHP, MySQL, or even a server because you can use Github instead.

But it also has a few cons:

  • You don’t have a WYSIWYG editor so you have to use Markdown or similar languages to write your posts. If you use this for a client, you should make sure your client understands Markdown or he he is not going to update his website too much.
  • You have to deal with a Terminal to push your changes using GIT
  • Although you can configure some plugins or comments with Disquss, WordPress has many more plugins.

In my opinion, Jekyll is a good choice if you are a developer, you don’t mind using GIT to push updates and you love plain text to save information. Jekyll is also a good choice for small projects like an App Landing Page, a curriculum vitae, etc. but I won’t use it for a big project or for a very special project.

  • Halil Kaskavalci

    Migrating from WordPress would also be nice. That’s actually what I’m trying to do 🙂

  • Nate

    great post! one note, the typo at the end: “Conclussion” should be “Conclusion”

    i will be using this workflow ASAP. cheers!

  • adgllorente

    Fixed, thanks!!

  • I’m sure you already know this link, but here you have more information about migrating a wordpress to jekyll: http://import.jekyllrb.com

  • Halil Kaskavalci

    Yes, I followed that guide. But importing wordpress posts to jekyllrb is not seamless.

  • Pingback: Search Results for “1” – Adrián G.()

Adrián G. is Stephen Fry proof thanks to caching by WP Super Cache