Change site.url to localhost during jekyll development

Question

My jekyll blog template has links to resources and pages like this:

{{ site.url }}/my-page.html 

This works well when deployed, but when I run jekyll serve in development, all links point to a live page, not a development page.

 my-site-url/my-page.html # But I want this in development localhost:4000/my-page.html 

Is there a way to get jekyll to use another {{ site.url }} in development?

Answer 1

This is a common problem between different Jekyll environments.

Some explanation

We need to understand site.url and site.baseurl and in what situation we need them. These variables do not fulfill the same goal.

site.url

By default, this variable is used only in the page title for the canonical and RSS link headings. It is also used in the XML feed to specify site resources, because the software that will manage this feed does not know the resource URLs.

This variable is required only for external systems.

site.baseurl

This variable indicates the root folder of your Jekyll site. The default value is "" (empty string). This means that your Jekyll site is at the root of http://example.com .

If your Jekyll site lives at http://example.com/blog , you need to set site.baseurl to /blog ( note the slash ). This will allow loading resources (css, js) correctly.

See how assets are loaded into your head:

 <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}"> 

which may also be:

 <link rel="stylesheet" href="{{ site.baseurl }}/css/main.css"> 

Work in different environments

Now you need to check your site in place and deploy it in production. Sometimes baseurl is different and jekyll build may not work out of the box in one of these environments.

Here we have two solutions:

Use jekyll serve

Imagine your site lives in a github repository and is served at https://username.imtqy.com/myProject .

You can configure baseurl to /myProject . and test your site locally with jekyll serve , your site will be served at jekyll serve

Use multiple configuration files

If for one reason or another you cannot use jekyll serve , you can install the configuration file for the environment and jekyll build depending on where you are deploying.

Say we have a local site hosted at http://localhost , and a production site hosted at https://username.imtqy.com/myProject .

We leave _config.yml with the url: https://username.imtqy.com and baseurl: /myProject

We create a new _config_dev.yml only with url: https://localhost and baseurl: ""

Now for local testing:

 jekyll build --config _config.yml,_config_dev.yml 

or

 jekyll build --config _config.yml,_config_dev.yml --watch 

When you click on a command, the jekyll build will use _config.yml by default.