How to fit CodeKit into a Static Site gen workflow?

[Shmooooo]

Hello folks,

All the best wishes for 2018.

I’m a follower on CSS-Tricks for so long now and because it’s 2018 I think it’s time for a fresh start or better said critical look at my own workflow.

For almost 10 years I have been building sites with WordPress, I really loved it for so many years until the last few years but switching felt like wearing your shoes on the wrong foot because you got so used to it. And of course, WordPress also does a lot of things very very good.

Since september I tried a to play a little with Static Site generator Jekyll. To be honest the idea is great and I really like the workflow of writing plain .md files with some Frontmatter in apps like iA Writer and dropping them into a folder while Jekyll creates a page or post based of that simple txt file.
Lovely and kinda easy to install, plus everything is very frontend development heavy, something I like a lot.

Thinking even further along the road, I’ve been creating WordPress sites for so many years because I thought every person in the world could work with a CMS like WordPress, it’s easy to use, “so easy even a caveman can use it”, right? When you can handle Facebook or Twitter you can work with WP backend right? Result is, the people I create websites for, generally don’t want to create posts and pages or maintain their sites by change slideshows, options and the hole shebang. They all start very promising the first few months, asking a lot of questions about how Yoast SEO works, what to do here and there. It’s all fine but after a few months you can see they lose focus and all sites become out of date because they simply don’t like to do it. It’s not their core business, especially when you create sites for so many ‘smaller’ companies that can’t hire social media and marketing people and whatnot but they are also very business doing their thing.

I thought, what if I could only let them write content about their own business, I mean that’s the single thing I can’t do for them even if they want to pay me for maintaining their websites every month as a service. What if I could teach them how to use a Markdown editor (very basic functionality), they only have to drop a txt file into my shared Dropbox folder, I get a notification, I alter the Frontmatter a little, Jekyll builds the site and I push all changes to the server.

That could be a better workflow in my opinion and I would never have to leave my Coda editor or my favourite Mac apps. Never have to deal with logins, passwords, Are you a Robot? Google Verification questions forced upon WP logins, create a post, submit it and wait a few seconds to process because of all bloat WordPress has become.

---

The main problem with my new setup is CodeKit. It somehow completely positioned itself out of my workflow this way and has become totally useless when I don’t use WordPress. I can’t find a way to include it anymore. Not because of lack of features or quality, I mean, I would love to include CodeKit in the mix and let CodeKit handle all my sass, js compiling and optimise img, svg, files but it just doesn’t play nice together with Jekyll.

In my (old) WordPress workflow CodeKit was my silenced hero. You barely knew you where using it, I think that’s when software is at it’s best, when it’s important but not in your face. Press CMD + S and your site refreshed everywhere, even at your iPhone or iPad. I mean what else, would George Clooney say. I have become a fan of INDIE developers like Bryan, people like him do stuff very well and even more important, they care. They really care about what they create instead of releasing yet another 9,- a month fancy service or an app that costs less than a cup of coffee a day.

---

Main question is how do you setup a (dynamic) Static Site generator approach with CodeKit that fits the workflow above.

Must haves:

• Markdown & Frontmatter
• Liquid templating by Shopify (would be so great)
• CodeKit for compiling & refreshing
• Minimal Command Line

[CraigClark]

Hi Shmooooo

I’m fairly new with Jekyll and I also had issues getting it to work with CodeKit. I’m a pretty light CodeKit user, ie. i have no idea what a hook is supposed to do or how to use it. The biggest issue I faced with Jekyll is that it doesn’t generate a sitemap or have an auto-prefixer. There are pluguns for that, but since I already have codekit I prefer to set everything up there.

This doesn’t address having codekit look after everything, but it does let codekit and jekyll be friends.

---

** Getting a sassmap to show up in code inspector **

For development, do the following in your site files

1. at assets/css/styles.scss comment out the front matter so it isn’t tracked by jekyll
2. at assets/css/styles.scss comment out //@import "main"; and replace with @import "../../_sass/main";
3. in config.yml exclude _sass
4. in config.yml exclude assets/css/styles.scss
5. if it’s running, stop jekyll serve
6. start jekyll serve

You can now use whatever compiler you like and it will generate a sass map that can be used in the inspector.

This should work fine, but if you want to do things the jekyll way, reverse these steps for production.

** if using codekit **

There are some things you will need to setup in codekit to work with jekyll

1. go to general settings and add /_site to the ignore list
2. in languages, go to markdown and under markdown output, ignore markdown files on change/build (because jekyll does this)
3. in languages, go to sass and make sure sass compiles to the same folder as the source
4. in browser refresh settings, turn on external server
5. set path to external server to http://localhost:4000
6. restart codekit or refresh project

in a terminal, at the root of your jekyll project bundle exec jekyll serve

Following these steps, I was able to get codekit to look after all the sass, use auto-prefixer and use a source map for sass. By setting the external server path I can use codekit’s ‘preview in browser` feature.

There may be a better way to manage this, I don’t claim to be any sort of expert in configuring things.

[Author]

Posts