#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.

Comments

  1. User Avatar
    Lukas Heuser
    Permalink to comment#

    I love you even more now.

  2. User Avatar
    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?

    • User Avatar
      Kevin W
      Permalink to comment#

      I’m pretty sure it is ‘yo angular’ from yeoman. I’m running a very similar setup for a current project.

      For more info check out a nice quick rundown here: http://yeoman.io/codelab.html

    • User Avatar
      Kevin W
      Permalink to comment#

      To correct myself, it probably isn’t ‘yo angular’ but something very similar.

  3. User Avatar
    Jason
    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.

    • User Avatar
      Jon
      Permalink to comment#

      Can’t believe I didn’t know about this one. Super helpful. Thanks mate

  4. User Avatar
    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. User Avatar
    Luke
    Permalink to comment#

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

  6. User Avatar
    Jelmer
    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?

    • User Avatar
      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 ;-)).

    • User Avatar
      Chris Coyier
      Permalink to comment#

      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: http://css-tricks.com/svg-use-external-source/

    • User Avatar
      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!

    • User Avatar
      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. User Avatar
    Adeel
    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. User Avatar
    Sajta
    Permalink to comment#

    This is very useful! I’m constantly reading.

  9. User Avatar
    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. User Avatar
    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.

    • User Avatar
      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. User Avatar
    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 https://github.com/ericthor/jekyll-gulp. I haven’t run into any problems yet, and its been getting the job done.

  12. User Avatar
    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. User Avatar
    Daniel Dogeanu
    Permalink to comment#

    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. User Avatar
    Rodrigo Munoz
    Permalink to comment#

    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?

    • User Avatar
      Marcel
      Permalink to comment#

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

  15. User Avatar
    josuevelazquez
    Permalink to comment#

    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. User Avatar
    kashesandr
    Permalink to comment#

    This is awesome!

  17. User Avatar
    Tim Smith
    Permalink to comment#

    (apple) – k clears terminal

  18. User Avatar
    Kaliena
    Permalink to comment#

    Really terrific! Love your passion!

  19. User Avatar
    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. User Avatar
    Natalia lima
    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.

  21. User Avatar
    Alan Sutherland
    Permalink to comment#

    pretty swish

  22. User Avatar
    Chat
    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. User Avatar
    Fernanda Lins
    Permalink to comment#

    Thank uuuuuuuu! Loved it

  24. User Avatar
    Andi
    Permalink to comment#

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

  25. User Avatar
    Attila
    Permalink to comment#

    A very cool approach, thanks.

  26. User Avatar
    karol
    Permalink to comment#

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

  27. User Avatar
    گل فروشی
    Permalink to comment#

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

  28. User Avatar
    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')); ?>
    
  29. User Avatar
    Sam
    Permalink to comment#

    Have you done a video on SVG sprites? I didn’t see one when I searched. I’d love to see that video. And one on CSS spriting(verb tense?) in general though now SVG seems more relevant. Thank you for all the videos you do and the articles/sites/blog and Codepen. You are amazing, a community asset, and you’ve helped me tremendously as I’ve started learning to program.

  30. User Avatar
    Sten Hougaard
    Permalink to comment#

    There are so many great tips in this video, Chris! Not only do you show some great SVG icon-sprite tips, wow, you deliver a complete free set of tools for a cool workflow – thanks!

    Only the thing with the (great but expensive) Adobe apps – Illustrator and Photoshop. I have found great use for the equivalent Affinity apps which are much cheaper and yet very cool (See for instance the Illustrator killer: https://affinity.serif.com/en-us/designer/).

    One thing though: How will Katie add new content to the site? Would be great if there was a follow-up video where you showed the post-production workflow, where the site is up and running and then let us get an inside view of how the editor adds new content. Will she actually write markdown for instance?

  31. User Avatar
    Christopher Williams
    Permalink to comment#

    Hey Chris –

    I’m new to using SVG sprites and I absolutely love it – I’ve been looking for something like this – thank you!

    I have a question though, and it feels like it should be obvious – but how do I reference one of those newly made SVGs from my SASS files?

    I assume you used a pseudo element on your menu items to get the triangles placed and positioned – how do I go about that?

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag