How to get Bigfoot footnotes to work on a Jekyll site:

Download Bigfoot.

Download jQuery.

Once you decompress the downloaded bigfoot.zip file, you should have the following files (as of this writing):

bigfoot-default.css
bigfoot-default.scss
bigfoot.js
bigfoot.min.js
changelog.md
license.md
readme.md

If you already have a place you put .js files being used for your site, then move bigfoot.js and/or bigfoot.min.js there. I didn’t, so I created a js directory at the root of the site folder and moved those files there.

Move bigfoot-default.scss to the _sass folder of your site. I think sites created with a slightly older version of jekyll might have a _css directory instead, in which case you could move bigfoot-default.css to that directory, or adapt to whatever your current setup is.

Now all the files are in place. You will need to make the following edits to your source files:

Edit _includes/head.html and add the following lines below the <head> tag:

1
2
3
4
5
6
7
8
9
10

<script type="text/javascript" src="/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/js/bigfoot.js"></script>
<script type="text/javascript">
	var bigfoot = $.bigfoot(
		{
		actionOriginalFN: "ignore",
		positionContent: "true"
		}
	);
</script>

Note three things about the above:

  1. The /js part of the path will depend on where your .js files live.
  2. Line 1 is where you move the jQuery .js file to the js directory and refer to it there, so the filename would depend on the version you have.
  3. actionOriginalFN: "ignore", and positionContent: "true" are options that I chose to add to Bigfoot (you can read about all those configuration options on the Bigfoot homepage) and are not required.

Finally, you need to load Bigfoot’s style files that you moved earlier. Edit main.scss’s last few lines to add a reference to Bigfoot’s style file:

// Import partials from `sass_dir` (defaults to `_sass`)
@import
        "base",
        "bigfoot-default", // hello there
        "layout",
        "syntax-highlighting"
;

Update (10/2/2015)

I made a mistake in the last code block above. I had written "bigfoot-number", but if you have been following my instructions, it should be "bigfoot-default". The mistake is now fixed, so if this is the first time you’re reading this post, the code is good.

If you’re curious, "bigfoot-number" is what you should include if you’re using this (download link) variant of Bigfoot that makes the footnote links in the body of the text into numbers, as opposed to the default bubble with three dots.

Sherif regrets the error.

That should be all. To add a footnote you add [^1] in the body of the text, and [^1]: This is my glorious and most important footnote at the bottom of your .markdown file.