Sea Gull

Jekyll Local Preview with Absolute Links

· by Jared · Read in about 2 min · (358 words)

Just a quick note about Jekyll:

Much like any other web app, there is usually a «production» version and «development» version. For instance, you can set the enviroment variable to load a Rails server into production or development. The difference in this case? My production enviroment uses absolute links to make it more search engine optimized.

The problem: I can’t run a local version of my site without the links sending me out to my production site. (i.e. I click «blog» and instead of sending me to «localhost:4000/blog/ it sends me to www.jaredwolff.com/blog/«)

If you are using absolute links generated by Jekyll this will be quick fix for you. If not here’s an example

in your _config.yml add a variable url and place your website’s url in it. Then add {{ site.url }} before any of your links in your site to make them absoulte.

_config.yml

title: jaredwolff.com
description: A mish mash of entreprenuership, adventure and life lessons.
url: https://www.jaredwolff.com

Before

<a href="https://www.jaredwolff.com/{{ post.url }}/">Read More</a>

After

<a href="{{ site.url }}{{ post.url }}/">Read More</a>

The solution:

  1. Create two copies of your _config.yml and rename it to _production_config.yml and _development_config.yml.
  2. Remove the url variable from _config.yml and add it to _production_config.yml and _development_config.yml.
  3. Change the value of the url variable in the development config to localhost:4000 (or what ever port you’re using to preview your site.) and change the value in the production config to the address of your website. (mine is https://www.jaredwolff.com)

  4. Now simply add the configuration option to the serve command.

The command is:

jekyll serve -w --config _production_config.yml,_config.yml

Note: If you use a Rakefile, you can use command line arguements to control which enviroment to use:

desc 'Build site with Jekyll'
task :build, [:production] do |t, args|
  if args.production
    puts "Rakefile: Building with a production configuration."
    sh 'jekyll build --trace --config _production_config.yml,_config.yml'
  else
    puts "Rakefile: Building with a development configuration."
    sh 'jekyll build --trace --config _development_config.yml,_config.yml'
  end
end

All you need to do is run to enable production mode.

rake build[1]

Otherwise simply run with no arguements for development:

rake build

Now you will have the ability to set production or development configuration values separately. Joy!

Are you looking for the best way to get your hardware to production?

I'm Jared Wolff. I write about startups and the nuances at every nook and cranny. If you liked this article and you want to hear about the next one, sign up for my newsletter below. You get one email a week. Plus, I respect your time, no spamming.