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.
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.
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.
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
Gruntfile.js to keep the actual site nice and clean.
The configuration looks like this:
The two most important aspects of this article are the use of the
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.)
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.
The code above translate to something like. Run the tasks
concat in serial, but concurrent
to the tasks
grunt serve all assets get compiled and the jekyll server starts to deliver the site like if
you just called
To deploy the whole site to the server i wanted to use rsync. The grunt-rsync module helps me do this comfortably.
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.
Thanks for reading my first blog post. I hope you got something out of it.