How to Configure Jekyll Local Preview with Absolute Links

Much like any other web app, there is usually a “production” version and “development” version. For instance, you can set the environment variable to load a Rails server into production or development. The difference in this case? My production environment 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 absolute.

_config.yml

title: jaredwolff.com
description: A mish-mash of entrepreneurship, 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 arguments 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 arguments for development:

rake build

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

Last Modified: 2020.3.16