_k

A jekyll blog

It’s now been around five years that i’ve started to learn developing websites. In these years i got a lot of the my knowledge from blogs. To give back a little and to share my knowledge and thoughts about the ever changing landscape of webdesign and development, i’ve decided to start this blog.

To get it started i want to explain the thoughts behind the design and how i’ve build the blog.

design

For the design i went with a mainly text based design using vertical rhythm, to make it more appealing to the eye. This article introduced me to the theory of vertical rhythm and helped to get me started. I used this tool to get all line heights and margins right.

development

The site uses jekyll as the static static site generator, which i found out to be an awesome alternative to using a cms like wordpress. Sass is used as the css preprocessor and grunt for running tasks. Thats essentially the whole stack, which isn’t very big but suits my needs and is easy extensible.

To make the overall process of compiling my stylesheets (and in the future javascript) and deploying the site to the server more comfortable i’m using grunt, which works very well. I followed along this great article to get an idea of which tasks i need to develop jekyll with the help of grunt.

The thing to do at first is to exclude the _sass folder from jekyll so jekyll won’t compile our sass files and to tell jekyll to keep the _site/css folder so it won’t override the files grunt is going to produce. I’ve also excluded the node_modules and Gruntfile.js to keep the actual site nice and clean.

The configuration looks like this:

exclude: ["css", "_sass", "node_modules", "package.json", "Gruntfile.js"]
keep_files: ["_site/css"]

The two most important aspects of this article are the use of the grunt-shell and grunt-concurrent modules. (I know there is a grunt-jekyll module, i haven’t tried it out because i wanted to experiment and the grunt-shell module gives me more freedom to run other scripts in the future.)

shell: {
  jekyllBuild: {
    command: 'jekyll build'
  },
  jekyllServe: {
    command: 'jekyll serve'
  }
}

With this setup for grunt-shell you just invoke grunt serve to start the jekyll server and watcher. To keep the server running, while grunt runes all the tasks required to compile sass and all the other stuff, you will need the grunt-concurrent module which allows grunt tasks to be run simultaneously.

concurrent: {
  serve: [
    ['sass', 'concat'],
    'watch',
    'shell:jekyllServe'
  ]
},

The code above translate to something like. Run the tasks sass and concat in serial, but concurrent to the tasks watch and shell:jekyllServe. By invoking grunt serve all assets get compiled and the jekyll server starts to deliver the site like if you just called jekyll serve.

deployment

To deploy the whole site to the server i wanted to use rsync. The grunt-rsync module helps me do this comfortably.

rsync: {
  options: {
    args: ["--verbose"],
    recursive: true
  },
  prod: {
    options: {
      src: "_site/",
      dest: "/path/on/server",
      host: "user@host"
    }
  }
}

Finally i made a grunt build task wich compiles all assets, runs the jekyll build command and pushes the freshly build content of _site to the server.

That’s it.
Thanks for reading my first blog post. I hope you got something out of it.