The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other How to fit CodeKit into a Static Site gen workflow? Reply To: How to fit CodeKit into a Static Site gen workflow?


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.