I pushed my jekyll _site folder to my server in a subfolder /blog, how to fix all assets and links?

0
votes

Is there a way to configure jekyll so that when it builds the static files in the _site folder it adjusts all the assets/urls so it works in a subfolder?

My setup is like this:

www.example.com/

I pushed all the _site files/folders to a subdirectory:

www.example.com/blog/

So now when I view my site, all the css/images are not rendering as they are all pointing to :

 <link rel="stylesheet" href="/assets/vendor/bootstrap/css/bootstrap.min.css">

But the correct URL should be:

/blog/assets/vendor/bootstrap/css/bootstrap.min.css

I am using nginx for this, and I created a location section like:

 location ^~ /blog/ {
      alias /home/deploy/apps/_site/;
   }
1
nginxjekyll

1 Answers

1
votes

Have you tried using the baseurl setting in Jekyll? When hosting a project on GH it is basically serving out of a sub folder like you are trying to do, baseurl is the common way to deal with it.

In your config file set the baseurl:

baseurl: /blog

then update your templates to use Jekyll's relative_url filter to pull in the baseurl setting properly. For example:

<link rel="stylesheet" href="{{ 'assets/css/site.css' | relative_url }}">

or elsewhere

{{ page.url | relative_url }}

A less robust solution is to prepend all the urls with {{ site.baseurl }} directly like:

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

There are various ways to build the url with the baseurl - these are just a couple of them.

If your site is already done and none of your links have baseurl built into them, there is no easy way to add it in other than going and updating all the links.

That said, there is not a lot of magic to baseurl - other than making it one place to edit it if it ever needed to be changed. That and there is something about jekyll serve that helps the site work in the browser better when doing local dev work (serve and build treat baseurl slightly differently I believe).