Treehouse: Grow your CSS skills. Land your dream job.

#134: A Tour of a Site In-Progress Built with Jekyll, Grunt, Sass, an SVG System, and More

Warning: this is a meandering, intermediate level screencast in which we look at the code that powers a build process for a site. We don't write any code.

A "build process" is all the stuff that happens between the code you write and code that goes out to a live website. We've talked before about using Grunt for this. Sass is processed, assets are combined, minification and optimization happens, etc. There are endless things that a build process can do for you.

I've been working with Katie Kovalcin on building a new personal site for her. It's an experiment for both of us in learning new processes and trying new stuff. In this case, I'm using Jekyll for the first time, and I'm automating an SVG system for the first time.

At the time of the screencast, I'm right in the middle of it all, but I got the build system working smoothly so I figured it was a good time to share that. I always think that's a good time to share - right at the moment where something clicks for you.

Things going on:

  • Grunt runs all the tasks.
  • The site is being built with Jekyll. Meaning it processes the layouts and content into full web pages. When content or layout change, Grunt runs the Jekyll build.
  • Jekyll also runs the local server.
  • Sass is the CSS preprocessor. When a Sass file changes, Grunt runs the Sass complication. Then Grunt runs Autoprefixer on the result. Then Grunt runs the Jekyll build again to make sure all new stuff is usable by the processed site.
  • The site uses an SVG system. For icons, but also the logo, and who-knows-what-all else by the end of it. The SVG files are kept all separate in an "svg" folder. When any of them change, Grunt runs the svgstore task to process them all together. Then Grunt runs the Jekyll build so all the current SVG is available to the site.
  • Because this a repo on GitHub, and GitHub Pages support Jekyll, we can automatically get a live, hosted version of this site. We can also point another domain at this site.


  1. Lukas Heuser
    Permalink to comment#

    I love you even more now.

  2. Pat
    Permalink to comment#

    What did you use to set this up. It’s not yeoman… some sort of boilerplate? Or was it done by hand?

  3. Permalink to comment#

    Quick tip on clearing your iTerm 2 window quickly: instead of using the clear command, you can use the keyboard shortcut Cmd+K.

  4. Richard Dale
    Permalink to comment#

    Great video thanks. Would love an in depth look at svg and Jekyll. Perhaps one for the Lodge like the artist site. I’d be up for that for sure.

  5. Permalink to comment#

    SVG Store is such a beautiful thing. Thanks for the introduction Chris!

  6. Permalink to comment#

    I really like the SVG workflow, didn’t know it could be automated to this level! Is it possible to include the generated SVG code at the bottom of the page in stead of at the top? To load it after the content. Or does it not work that way?

    • Christian
      Permalink to comment#

      Would be nice, but I think the referencing to the svgs wouldn’t work anymore. Maybe it would be possible by using js to push in the svg use links after loading the references themselves. I would prefer something like that, because I fear to add up even more markup before the real content (may be a seo issue, I suspect, but do not really know ;-)).

    • You can put it at the bottom – but once in a while I see weird issues with that where some referenced SVG doesn’t load. I wish I had more info for you. You can do as Christian says and ajax in the whole load so it’s more async, although I haven’t tested that a bunch – seems like it would share issues with the at-the-bottom thing.

      Your best bet:

    • Markus Thiel
      Permalink to comment#

      Have been looking for the exact same thing. Instead of generating the .svg file just to be able to add it to my index.html would be awesome!

    • Markus Thiel
      Permalink to comment#

      Btw.. if we ajax in the .svg file we wil get it as a shadow DOM and we will not be able to apply new css to the icons..

  7. Permalink to comment#

    I just stumbled on to the videos section and love it! Great video!

    My only question is wouldn’t in-lining the SVG be inefficient as it doesn’t get cached like images or CSS files do?

  8. Sajta
    Permalink to comment#

    This is very useful! I’m constantly reading.

  9. Erik
    Permalink to comment#

    Very nice! Thank you for the video once again Chris!

    How do you Chris, and others, feel about having the development – un-finished – version of the site on Github – out in the open for everyone to see? Some clients would definitely feel uncomfortable, but does it actually matter that much? Is it okay to present unfinished work publicly? Thoughts? Comments?

    (As we now, in the free version of github the web hosting of static assets is free but everything is visible to the general public.)

    PS. Bitbucket lets you have private git repos for free in basic free account and is compatible with Tower and whatnot.

  10. Marcel
    Permalink to comment#

    Very good post, Chris. I now have a similar setup for my most recent project. I was just wondering if it’s possible to use the svg as a background image in css.

    • Jonathan
      Permalink to comment#

      You can but it has to be referenced as a single, external file. You can’t use an svg sprite like we have used for png and jpg files.

  11. Eric Thor
    Permalink to comment#

    Great stuff! I’ve been using Jekyll a lot at work to create a more realistic mockup to show stakeholders interactivity of the web. I’ve been using gulp + browser-sync I rigged together this baseplate I haven’t run into any problems yet, and its been getting the job done.

  12. Tristan
    Permalink to comment#

    Awesome video, I’ve been using Jekyll quite a bit lately and I love it. Can’t wait to give svgstore a go.

  13. Chris, is this method of using SVG working on iOS devices? I usually use SVG on normal tags on my sites and I use SVGeezy for fallback, and it works on most devices… except on iOS. I see just an empty box with white borders. From what others told me, it’s just an optimization problem. I figured out that you must have encountered this problem before. What can I do to solve it?

  14. I couldn’t get this to work right. Check out my pen.

    I created an rss and Twitter icon in Illustrator. I then exported each in its own SVG file. I ran SVGStore and copy pasted the code in my HTML file. I referenced each SVG file and noticed my icons were huge. Where did I go wrong?

    • Marcel
      Permalink to comment#

      Youu can set the width and height of the svg in the tag like an image.

  15. What I’ve done in the past with SVG’s is to convert them into base64.
    Wouldn’t that be better? If it is, Is there a way to do that with grunt as well?

  16. kashesandr
    Permalink to comment#

    This is awesome!

  17. Tim Smith
    Permalink to comment#

    (apple) – k clears terminal

  18. Kaliena
    Permalink to comment#

    Really terrific! Love your passion!

  19. John
    Permalink to comment#

    I’ve been having a problem with the Gulp version of SVGstore in Chrome. I’m not able to style the icons with css. Works fine in Firefox. Anyone else experience this?

  20. Great video thanks. Would love an in depth look at svg and Jekyll. Perhaps one for the Lodge like the artist site. I’d be up for that for sure.

  21. Alan Sutherland
    Permalink to comment#

    pretty swish

  22. Permalink to comment#

    superrrrrrrrr PS. Bitbucket lets you have private git repos for free in basic free account and is compatible with Tower and whatnot.

  23. Fernanda Lins
    Permalink to comment#

    Thank uuuuuuuu! Loved it

  24. Permalink to comment#

    Sweet setup… Loved the hosting on Github tip also. Will have to reassess my custom boilerplate… Hummm

  25. Attila
    Permalink to comment#

    A very cool approach, thanks.

  26. karol
    Permalink to comment#

    I really lik your grunt and jekyll configuration. Is it possible to download your configuration project?

  27. Awesome video, I’ve been using Jekyll quite a bit lately and I love it

  28. Nico
    Permalink to comment#

    Thank you Chris!!! If anyone is wondering how to make it work with wordpress it is just simple as:

    svgstore: {
            options: {
              prefix : 'symbol-', 
              svg: {
                style: 'display:none;'
            default: {
              files: {
                'assets/img/svg/svg-defs.svg.php': ['assets/img/svgs/*.svg'],

    then include it in your head (or anywhere you like) with:

    <?php include(locate_template('assets/img/svg/svg-defs.svg.php')); ?>

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";