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.
I love you even more now.
What did you use to set this up. It’s not yeoman… some sort of boilerplate? Or was it done by hand?
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
To correct myself, it probably isn’t ‘yo angular’ but something very similar.
Quick tip on clearing your iTerm 2 window quickly: instead of using the
clear
command, you can use the keyboard shortcut Cmd+K.Can’t believe I didn’t know about this one. Super helpful. Thanks mate
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.
SVG Store is such a beautiful thing. Thanks for the introduction Chris!
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?
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: https://css-tricks.com/svg-use-external-source/
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!
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..
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?
Wouldn’t it get cached with the html if it’s inline?
This is very useful! I’m constantly reading.
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.
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.
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.
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.
Awesome video, I’ve been using Jekyll quite a bit lately and I love it. Can’t wait to give svgstore a go.
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?
Reduced test case!
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?
Youu can set the width and height of the svg in the tag like an image.
Just kind of brain storming here, I prefer to work more with Gulp / Stylus than I do with Grunt / SASS. Do you think this level of automation and Jekyll integration could be achieved with these tools easily?
For example is there a similar plugin to SVGStore for Gulp?
I’m sure the switch from SASS to Stylus would be relatively pain free, when I’ve done it in the past that’s been my experience.
As for executing the Jekyll commands I’m sure Node’s native shell function could be utilized in Gulp if not I think there is a gulp-shell plugin somewhere.
Any thoughts or concerns about this?
Absolutely you can do all that. That’s kinda the beauty of owning your own build tools. Just googling SVG gulp brings up a couple of similar plugins.
SVG Store is on Gulp now… https://www.npmjs.org/package/gulp-svgstore
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?
This is awesome!
Great video, Chris. Good to see your workflow. One tip: you can use grunt newer. This way it will only rebuild the actual changed files. Might come in handy for speed.
(apple) – k clears terminal
Really terrific! Love your passion!
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?
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.
pretty swish
superrrrrrrrr PS. Bitbucket lets you have private git repos for free in basic free account and is compatible with Tower and whatnot.
Thank uuuuuuuu! Loved it
Sweet setup… Loved the hosting on Github tip also. Will have to reassess my custom boilerplate… Hummm
A very cool approach, thanks.
I really lik your grunt and jekyll configuration. Is it possible to download your configuration project?
Awesome video, I’ve been using Jekyll quite a bit lately and I love it
Thank you Chris!!! If anyone is wondering how to make it work with wordpress it is just simple as:
then include it in your head (or anywhere you like) with:
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.
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?
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?
I doubt anyone will see this as there’s been no action for a few years, but I’d rather ask the question than not!
I know I’m late to this one, but just going through the ol’ archives and stumbled on this…. my mouth physically dropped watching how powerful this system is! I have no idea about npm, grunt or node but hell, it seems worth looking into!
I have one question about hosting a site like this on GitHub. Are there security concerns when having all of your files open to the public like this, or should you only do this using a private repo?
(Okay, 2 questions)
At the risk of sounding like a moron, can anyone push changes to a public repo and therefore change your live site?
This is a really great question, Josh! I bet others can weigh in with more expert advice than me but the only security concern I can think of would be pushing files with any personal or sensitive information to the public repo. I belive GitHub’s hosting service (GitHub Pages) keeps all hosting, database, credentials and whatnot separate from the font-end files for rendering the site. That means your repo would be clean of potentially insecure junk.
Only you can push changes to the repo, but others may submit changes that only you can approve. :)
Cheers Geoff! I was thinking that probably just sensitive info would be a no no, passwords, personal email, private api keys etc, but generally you can view the source code of any site you go to, which isn’t much different I suppose to viewing the html & css at github!
I’m sure that was a cringe worthy github related question, but I’ve never used it so had no idea how it all works, thanks for the reply!
You bet! Always worth asking. I found this post helping for getting started: http://jmcglone.com/guides/github-pages/