How to Configure Jekyll Local Preview with Absolute Links

Jared Wolff · 2013.9.2 · 2 Minute Read · coding

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

Subscribe here!

You may also like

Seven Ways to Optimize Your Site for Speed

Web rankings are dictated by how fast you serve your content. You need to optimize to get that top spot. As an added benefit your visitors will thank you. (or not even notice — a…

Adding Search to a Hugo Site With Lunr and Gulp

I just recently added search to Circuit Dojo but it was not as straight forward as I had hoped. There was plenty of people who had done it but there were some important details…

Install Jekyll Plugins as Submodules

The delivery of static files from a web server to your browser can be blazing fast. That is one of the advantages of using Jekyll vs. other dynamic web content systems like…