https://www.pexels.com/photo/coffee-notebook-writing-computer-34601/

There are so many things to write about, but let me start this blog by writing a post on what motivated me and how I build this blog. I have split this into two posts. This first post is about how I build this site in Ruby and in the second post you will learn how I deployed this on AWS S3.

What motivated me to start a blog?

I was thinking to start my blog last few years but never got time (or enough motivation) to start. Every time I find something to write about, there are probably many posts on that already, and they are probably the same as what I’ll write or even better. This is one of the reasons I lost motivation to write on the open Internet.

Like others, I write notes for myself when I am working or learning something new. Most of it just a few quick steps or some code snippets. There is no proper guide or end-to-end solution. Looking back at some of my old notes, I got frustrated a bit and thought I should write things down in well-written format, so I don’t have to look my notes and think “What the heck is this”. Also, all languages and frameworks are moving so fast and it’s very hard to remember everything, having a good journal can help me find what I am looking for quickly without much googling. Furthermore, someone in somewhere probably facing the same problem I faced and solved. This blog might have what they are looking for. So it’s win-win for me and others. All of these motivated me to start my own blog. I hope you find something helpful!

let’s talk about this site, so what I am using?

I want to build a clean site with a blog, which should be easy and cheap to maintain, like a good old pocket journal. After looking for a bit I decided to go with Jekyll, a static site generator.

There are few reasons I chose Jekyll,

  • It’s a very simple ruby static website generator (There is also Gatsbyjs if you are looking for a JS static site builder)
  • I can use markdown to write a blog post
  • No database or complex deployment processes, like Ghost or Wordpress
  • Don’t want to complex things with Webpack, ES6 or React yet

Apart from Jekyll, I am using animate.css for the animation and PrismJs for code examples.

Creating a new Jekyll site

First of all, you need Ruby to start with Jekyll. If you don’t have ruby installed, follow this link to install and set up Ruby with Rbenv.

Once you have finished installing Ruby you can install Jekyll gem using gem install Jekyll, but I like to use a gemfile. It makes easier to maintain application dependencies and quickly run on somewhere else.

Let’s create a directory and add gemfile, with the few lines from the snippet below. I added Rake, a task runner, to automate some of the tasks for my blog, will come back to it shortly. Now run bundle install to install Jekyll and rake.

  
    # file: gemfile
    source 'https://rubygems.org'

    gem 'jekyll'
    gem 'rake'
  

Once everything is installed run bundle exec Jekyll new --drafts . -f to generate a blog in the current directory. To serve the site run bundle exec jekyll serve and go to localhost:4000 on your browser to see the preview of the blog. jekyll serve command starts a ruby server that watches the files in the directory when any file changes it builds the site to serve the updated version.

Generating a draft post

I have added rake tasks to create a post in the draft directory and publish the post with a year, month, day. You can skip these if you like, but if you like to follow along, create a Rakefile in the root directory with the following content.

  
    # file: Rakefile
    require 'erb'

    namespace :jekyll do
      desc 'Create new draft'
      task :new_draft do
        # avoid executing args as task
        ARGV.each { |a| task a.to_sym {} }
        @title = ARGV[1]

        template = File.read('./_templates/new_draft.erb')
        output = ERB.new(template, nil, '%').result(binding)

        filename = "#{@title}.md"
        filepath = "./_drafts/#{filename}"

        File.open(filepath, 'w') { |f| f.write(output) }

        if File.exist?(File.expand_path(filepath))
          puts "#{filename} added to your drafts directory 📄"
        end
      end
    end
  

Now from the root of the directory run bundle exec rake jekyll:new_draft hello-world to create a new post. This rake task will create a markdown file on _draft directory with the title. You can start writing your post now! The jekyll:new_draft task expects an argument, which is the title of the post. It gets passed to new_draft.erb template, which I added to _templates directory. Below snippet shows what I have in my template file new_draft.erb.

  
    # file: new_post.rb
    ---
    layout: post
    title: <%= @title.split('-').map(&:capitalize).join(' ') %>
    date: <%= Time.now %>
    excerpt_separator: 
    ---

    

Some summary text for home page.

Publish your post!

The code snippet below makes it easier to publish the draft post. To publish previously created draft run bundle exec rake jekyll:publish hello-world and your post will be published with the current date and time.

  
    # file: Rakefile

    namespace :jekyll do
      desc 'Create new draft'
      # ...
      
      desc 'Publish a post'
      task :publish do
        ARGV.each { |a| task a.to_sym {} }
        slug = ARGV[1]

        template = File.read("./_drafts/#{slug}.md")

        date = Time.now.strftime('%Y-%m-%d')
        date_time = Time.now

        output = template.sub(/date:(.*)/, "Date: #{date_time}")

        filename = "#{date}-#{slug}.md"
        filepath = "./_posts/#{filename}"

        File.open(filepath, 'w') { |f| f.write(output) }
        puts "#{filename} published 🎉"
      end
    end
  

Looks like I have written enough for this post. In the next post, I’ll show how to build the final site and deploy it on AWS S3 only for few cents a month!