Building a static web blog with Jekyll and GitHub Pages / Local Machine

Fatih Yıldızlı
4 min readOct 28, 2018

--

What is Github pages ?

GitHub Pages is a static site hosting service designed to host your personal, organization, or project pages directly from a GitHub repository.

You can create and publish GitHub Pages sites online using the Jekyll Theme Chooser. Or if you prefer to work locally, you can use GitHub Desktop or the command line.

GitHub Pages is a static site hosting service and doesn’t support server-side code such as, PHP, Ruby, or Python.

Github Pages Features

  • GitHub Pages source repositories have a recommended limit of 1GB .
  • Published GitHub Pages sites may be no larger than 1 GB.
  • GitHub Pages sites have a soft bandwidth limit of 100GB per month.
  • GitHub Pages sites have a soft limit of 10 builds per hour.

Source: (https://help.github.com )

Related Links: https://help.github.com/categories/github-pages-basics/ , pages.github.com

What is Jekyll ?

Jekyll is a simple, extendable, static site generator. You give it text written in your favorite markup language and it churns through layouts to create a static website.

Official site:

How to publish your site with jekyll on github pages ?

  • Create a new repository in Github (username.github.io)
Repository name must be your username.
  • Choose a theme for Jekyll
  • Deploy your website codes ( on lokal machine ) with Github extension in this repository.

Finally, your website will be published on “yourusername.github.io”

How to develop your site with jekyll on local machine ?

Prerequisites:

Install Ruby ( www.ruby-lang.org )

Install Ruby Installer ( rubyinstaller.org )

Github Account & Github username.github.io Repository

Information about Markdown

What is a markdown ?

Markdown is a lightweight markup language with plain text formatting syntax. It is designed so that it can be converted to HTML and many other formats using a tool by the same name.

Useful link: daringfireball.net

After installing Ruby and Ruby Installer, You should type these code on Ruby command line .

  • gem install jekyll bundler
  • jekyll new myblog
  • Myblog is your blog name, I choose its name “blog”.

In your website folders directory; ( C:\Users\Blog)

bundle exec jekyll serve

Jekyll site and make it available on a local server 127.0.0.1:4000

Jekyll Local server

Jekyll Project default folders created as below;

Jekyll Folders
Jekyll Blog Folders

How to add a new blog post ?

You should create a new markdown type document in _posts folder. Format must be “YYYY-MM-YY-your-topic.markdown” .

Example:

New blog post

URL Routing

Routing can be configured in markdown document. I decided categories like “crawl”.

Mardown type

My blog url will be changed like this localhost:4000/crawl/..

How to fork and publish your site with JekyllNow ?

Firstly, Your repository’s name must to be “yourusername.github.io” .

You should fork this repository; https://github.com/barryclark/jekyll-now

And then, You have to configure “ _config.yml” file with according to your personal informations.

Like this:

_config.yml
_config.yml

Finally, You can commit _config.yml file, your site will be published yourusername.github.io. ( Example: fatihyildizli.github.io)

What is Features of JekyllNow?

Command-line free fork-first workflow, using GitHub.com to create, customize and post to your blog
✓ Fully responsive and mobile optimized base theme
✓ Sass/Coffeescript support using Jekyll 2.0
✓ Free hosting on your GitHub Pages user site
✓ Markdown blogging
✓ Syntax highlighting
✓ Disqus commenting
✓ Google Analytics integration
✓ SVG social icons for your footer
✓ 3 http requests, including your avatar

✘ No installing dependancies
✘ No need to set up local development
✘ No configuring plugins
✘ No need to spend time on theming
✘ More time to code other things … wait ✓!

(Source: JekyllNow.com)

https://fatihyildizli.github.io/

--

--