How can I easily manage different base URL of Jekyll webpage on localhost and remote server?

Question

On my computer, I access my test webpage on URL http://127.0.0.1:4000. On server, it will be on GitHub pages, that means https://username.github.io/repo-name/.

In the _config.yml I see following relevant settings:

# Uncomment if you are planning to run the blog in a subdirectory
# Note - if you enable this, and attempt to view your site locally you have to use the baseurl in your local path.
# Example, you must use http://localhost:4000/path/to/blog
#baseurl: /path/to/blog 
baseurl: 

# The URL of your actual domain. This will be used to make absolute links in the RSS feed.
url: http://yourdomain.com/

So for GitHub server I need it to be:

baseurl: /repo-name/
url: https://username.github.io/

But on localhost, it must be:

baseurl: 
url: http://127.0.0.1:4000

These settings are necessary because without them, I will get 404 errors for resources that are using relative paths:

<script src="js/ghapi.js"></script>

"NetworkError: 404 Not Found - http://127.0.0.1:4000/download/js/ghapi.js"

The path should be http://127.0.0.1:4000/js/ghapi.js but since the page was /download it was added to relative URL of the script file.

I need to deal with this issue, how do I do that?

Answer 1

The best solution was to have two config files. The additional one, debug.yml, overrides some settings from the basic one. Both setting files can be loaded using this command:

jekyll serve --config _config.yml,debug.yml

The debug file can contain:

name: MySite [DEBUG MODE]
debug: true
url: http://127.0.0.1:4000

The advantage here is that no setting files need to be changed, you just use different command to run jekyll.