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
- at
assets/css/styles.scss
comment out the front matter so it isn’t tracked by jekyll - at
assets/css/styles.scss
comment out//@import "main";
and replace with@import "../../_sass/main";
- in
config.yml
exclude_sass
- in
config.yml
excludeassets/css/styles.scss
- if it’s running, stop
jekyll serve
- 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
- go to general settings and add
/_site
to the ignore list - in languages, go to markdown and under markdown output, ignore markdown files on change/build (because jekyll does this)
- in languages, go to sass and make sure sass compiles to the same folder as the source
- in browser refresh settings, turn on external server
- set path to external server to
http://localhost:4000
- 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.