I have a github pages site using the jekyll cayman theme, and I set up a sass stylesheet at assets/css/style.scss
Its contents begin:
---
# Front matter comment to ensure Jekyll properly reads file.
---
//DON'T DELETE THE ABOVE
#import "jekyll-theme-cayman";
and then I have the rest of my sass.
I then run bundle exec jekyll serve.
This used to work to start a server, and watch changes to the sass file and compile them to _site/assets/css/style.css.
I can see that it is picking up that there are changes in the sass file - the console logs: Regenerating: 1 file(s) changed at 2022-10-28 21:22:54 assets/css/style.scss - but nothing gets output to the style.css file. I've tried running bundle exec jekyll serve --watch.
That no longer works, and I'm not sure why. I noticed when I tried to run this for the first time in a while, it complained about nokogiri, so I ran bundle install - maybe that messed things up?
Try bundle exec jekyll clean && bundle exec jekyll serve or one command after the other. Clean removes files and cleans Sass and Jekyll caches. See https://jekyllrb.com/docs/usage/
I'm using jekyll build --watch to automatically regenerate _site folder when I make changes.
I also have a script that resolve CDN url in the _site directory. But I have to run that script manually every time Jekyll regenerate the content.
How can I set option on Jekyll to execute my CDN resolve bash script automatically after regenerate _site folder ?
I'd suggest adding Gulp to your Jekyll workflow, to accomplish this... a simple google search for jekyll gulp will lead you down to many tutorials on how to achieve this.
I was building my site with css and everything was working fine, both locally and remotely. Then I wanted to switch to sass. I installed jekyll-compass and now my sass files are being output as css files in my _site/css folder. Everything works well locally, but when I push them to Github, my styles are not being applied and I get a 404 on that css file. What am I doing wrong?
Instead of setting the output of your rendered SASS files to /_site/css, set the output to just /css (the site root level).
What is happening is that locally SASS is running just fine and outputting into your /_site/ directory as you'd expect. But in production on GitHub pages (where the jekyll-compass gem isn't supported) your CSS isn't being output into /_site at all because the plugin isn't being executed there.
It doesn't matter that it works locally from there because GitHub Pages runs the jekyll build command again once you push and generates /_site/ afresh. So anything it doesn't support (i.e. jekyll-compass) doesn't make it into the production version of your /_site folder.
The workaround I've suggested works because instead of outputting the final CSS into a directory that gets overwritten when you push to GitHub pages, it will instead write it to a directory that is preserved even with a fresh build of the /_site/ directory.
Also of note, Jekyll 2.0 will support SASS, and you can even use the 2.0 alpha gem locally if you want (although GH Pages won't be updated to 2.0 until it's officially released).
Very few plugins are supported by GitHub pages, it used to be none but now there are three. See this page for more information.
You will need to compile the SASS and commit the generated CSS files.
I've been trying to setup SASS (and Bourbon.io) with jekyll for a personal blog on github pages.
I've changed the name of the css folder that is installed with jekyll to stylesheets and within stylesheets I have two folders, css and sass.
I start my jekyll server locally with: jekyll serve --watch
Then in another terminal window: sass --watch stylesheets/sass:stylesheets/css
But I am now getting the following message:
`/' not found.
Prior to attempting to setup SASS with my jekyll project, my site was displaying. Any links for setting up sass with jekyll would be helpful. Thanks.
New in Jekyll 2.0 is native processing of Sass and CoffeeScript:
http://jekyllrb.com/docs/assets/#sassscss
hope not being to late, for what you are pretending there are many approaches for example i use bourbon, neat in a jekyll project and use grunt tasks for local development.
Another option is to use a rakefile with some task to handle both programs (jekyll and sass) or as favrizio suggested use jekyll's pluging.
I reccomend you to take a look to grunt.
This happens usually if you have messed with the site baseurl in the _config.xml and it can no longer resolve itself to find the index.html.
I'm getting started with Jekyll static site generator and I would like to use Live Reload with it. I know Jekyll has a generator and server commands, and Live Reload can run various compilers and custom commands. How do I configure these to work together?
LiveReload is built into Jekyll 3.7+.
jekyll serve --livereload
You can also set LiveReload's port, delay, and ignored files. See jekyll help serve.
UPDATE: As pointed out in other answers, LiveReload is built into Jekyll 3.7+.
jekyll serve --livereload
For older versions:
The simplest approach I've found that works is to use two terminal windows: One for jekyll serve --watch and one for guard.
I tried the guard-jekyll-plus approach suggested by Nobu but I had a bunch of errors.
As shumushin pointed out, Jekyll can handle the automatic rebuilding process, you simply launch it using jekyll serve --watch
Now to get LiveReload working run guard with guard-livereload in a second terminal window. This is basically the same as Jan Segre's answer, but without guard-jekyll.
My Guardfile looks like this:
guard 'livereload' do
watch(/^_site/)
end
And my Gemfile:
gem 'jekyll'
gem 'guard'
gem 'guard-livereload'
Note: You still need to include the livereload script in your index.html page; it is the "glue" that binds guard-livereload and the browser together.
<script src="http://localhost:35729/livereload.js"></script>
There's guard-livereload which you can use with guard-jekyll and centralize the watching process with guard, an example would be (I haven't tested it):
Install guard-jekyll, either through gem or bundler
Install guard-livereload, either through gem or bundler
Init guard-jekyll
guard init jekyll
Add this to your Guardfile:
guard 'livereload' do
watch(%r{_site/.+})
end
You can adapt the above to suit better your project, and
you probably already know you have to include the livereload
script on your page:
<script src="http://localhost:35729/livereload.js"></script>
Oh, and to start the whole watching mess:
guard
For jekyll 1.0+ use:
jekyll serve --watch
See Jekyll: Basic Usage for more details and options.
UPDATE: this no longer works with the latest version of Jekyll
cd your/site/folder
jekyll --server --auto
This post explains a cleaner way - Setting Up LiveReload With Jekyll
Gemfile:
gem 'jekyll'
gem 'guard'
gem 'guard-jekyll-plus'
gem 'guard-livereload'
Guardfile:
guard 'jekyll-plus', :serve => true do
watch /.*/
ignore /^_site/
end
guard 'livereload' do
watch /.*/
end
Install any LiveReload browser extension. Then run guard.
I wrote a Jekyll plugin called Hawkins that incorporates LiveReload into the Jekyll watch process. It works with Jekyll 3.1 and up.
Simply add
group :jekyll_plugins do
gem 'hawkins'
end
to your Gemfile (and then a bundle install). From there you can run jekyll liveserve. Hawkins will modify the head sections of your pages to include the necessary components for LiveReload, and when Jekyll detects a page change, Hawkins will push a message to your browser via WebSockets. Please note that you will need a browser that supports WebSockets. For very fast reloads, you can use Jekyll's new --incremental option that will only regenerate the changed pages.
Start by running jekyll normally in your site folder:
cd your/site/folder
jekyll
By default Jekyll generates a folder called _site inside it (your/site/folder/_site).
Tell LiveReload to watch that _site folder.
This command will open your website in the browser and uses jekyll built-in livereload server.
bundle exec jekyll serve -l -o
You need a latest jekyll version.
I just started using GitHub Pages today, and wanted to be able to use live reload with Jekyll. Got it working & written my first post on Creating GitHub Pages with Jekyll & LiveReload.
It uses Grunt with the grunt-contrib-watch plugin instead of Jekyll's serve command - works well for me. Hope it works for you as well.
You can use just jekyll serve -w, an option I prefer as I am lazy.
For Live Reload,
Remove Jekyll Admin from Gemfile in the root directory of your project and it works like charm.
If you're running it frequently, the Repla macOS app makes it easy to startup Jekyll so it automatically refreshes. After Repla is installed, you run it from the Jekyll blog's root directory and pass it the jekyll serve command. For example:
repla server "bundle exec jekyll serve --watch --drafts" -r "...done"
Repla will be configured to refresh each time ...done is printed in the console, which Jekyll prints when it finishes compiling your site.
Repla runs the Jekyll server process in a split below a browser split showing your site:
After Jekyll is running in Repla, you can also save the configuration to a file with ⌘S, shut it down by closing the window, and run it again just by double-clicking the file. In other words, you can start your Jekyll blog again next time just by opening the file, without involving the terminal at all.
Disclosure: I maintain the Repla app.