Build for multiple sites

I used to hand code html web pages back in the day. There really wasn’t a need to include the URL in the links. I have been using CMS’s for a few years now, and was happy to stumble upon SSG’s. Jekyll seems to give me the flexibility to build what I want, however I’m having a difficult time with ‘jekyll build’. It looks great when I run ‘jekyll serve’. When I open the index file located in _site, none of the formatting looks the same. The links are all broken. I don’t have posts, just pages mostly (about 700). In the _config.yml file I have the URL and BaseURL set to “”. (nothing). I would really appreciate any help in how to produce a website that is kind of independent of the URL. Or doesn’t Jekyll do this? I don’t intend on using github, as I know nothing about GH. I already have web server space and plan on using that when I finish the site, and figure out the build. Any help would greatly be appreciated. Thanks!

Shane

you shouldn’t have any problems, but without examples to look at can’t really tell you much.

How are you forming links?

If you are not using GH then you probably don’t need a value in baseurl, as that is for stuff that is served from a sub folder rather than the root.

If you have a page named contact.html you should be able to link to it with
<a href="/contact/">Contact Us</a>

Though that would assume you are using pretty permalinks in your config.

Without seeing any code I’m guessing that having url and basurl set are causing your issues.
Remove them from _config.yml they’re not need (unles you want to use them)

See here … something I wrote last month:
https://terminaladdict.com/linux/jekyll/bash/development/2018/10/17/Jekyll-Getting-Started.html

Thanks for the replies. I figured more info was needed, but I wasn’t sure what info. I’m using the theme, “Just the Docs” https://pmarsceill.github.io/just-the-docs/ I have read through a lot of their documentation. I’m still wrapping my head around a lot of the Jekyll stuff. Here is a screen shot of the web page that was built in the _site directory:


(it looks the same in Firefox or Safari).

Here is a screenshot of the website when run with jekyll serve:


(I clicked a link to give you an idea of the menu open, otherwise they are not expanded. The second screenshot is the home page.)
In my config.yml, I do not have pretty permalinks enabled or specified. I have the themes css stuff being used and some very minor custom stuff. The majority of my pages look the same here is the basic line of code in them:

<h2>{{ page.book }} {{ page.title }}</h2>
<ul>
{% for text in site.data.rvg-2018c %}
  {% if text.Book == 'GEN' and text.Chapter == '1' %}
  <ul>
      {{ text.Chapter }}:
      {{ text.Verse }}
      {{ text.Context }}
  </ul>
  {% endif %}
{% endfor %}
</ul>

I’m pulling most of this site from a csv file. Basically this is building all the html files to have the entire Bible in html format, and easy to host on my web server.

I guess most all my links are built by the ‘parent/child’ function in the theme.
Here is another page that does generate the links:

{% for book in site.bible %}
    <a href="{{ book.url }}">{{ book.chapter }}</a>
{% endfor %}

Front matter determines a lot of the parent child stuff. Again, I appreciate the help!

Shane

You need a webserver.

Just opening the .html files in your _site folder locally likely won’t work. When you run jekyll serve it spins up a webbrick server and that’s why the paths to your CSS resolves correctly.

1 Like

Ahh, I vaguely remember something about this! I think you are right that css requires a server. I’m going to figure a way to test this, and see if it works in a server environment. Thanks for that tidbit of info.

Shane

Ok, I found a quick MacHack to instantly start a server in any folder. I ran it, opened it up, and the website looked correct. However the links were not working as they do when I run the Jekyll serve. The MacHack I used was this:
python -m SimpleHTTPServer 8000
Inside the _site folder from the command line. So got one thing nailed down. Just gotta figure out the links issue…

  1. Ok, I uploaded it to my server… and it didn’t work. (just as it was)
  2. I configured the baseurl and url to match where it shows up on the server… and it didn’t work either.

In both of these setups the css didn’t load. Obviously I’m not doing something right. Again, any help, insight is always appreciated.

Shane

can you share a link to the site?

when css isn’t working use the Inspector in your browser to check stuff - in Chrome right click anywhere on the page and select Inspect, then go to the Console tab and it will likely show an error - look at the url and it will tell you what it is trying to serve and you should be able to troubleshoot it. Probably a missing slash or has too many slashes.

1 Like

Great idea! It has been a while since I troubleshoot web work like that. I have to shed the CMS mentality. You can check it out here: www.reinavaleragomez.com/test/ and get a live preview of the problem.

Shane

PS - Seems like I’m missing the slash in my baseurl… updating it now. Takes 10 minutes to build.

I find this a big problem. When jekyll serve is run, the site works fine. When jekyll build is run, it breaks all over (even uploaded to the server). I’m truly scratching my head and bewildered by this. I know I’m new, and I make a lot of mistakes, but when the serve is running fine, I’m quite put off by the fact that it doesn’t mean I got it right. I have to go back to the drawing board to re-design, re-configure and re-work my site to get it figured out. If something isn’t configured right, then Jekyll serve shouldn’t hide that fact.

Shane

Usually the problem is the path to assets like CSS and JS. Jekyll has two filters that help properly set the site.url and site.baseurl. My guess is this is where your issue is.

If you’re correctly using baseurl, then when you fire up jekyll serve it should mimic exactly what you’ll have on your webserver. Looks like you’re loading everything in the subfolder /test, so you’ll want baseurl: "/test" in your _config.yml

The other part is anywhere you link to an internal page or asset you need to prepend those links with {{ site.baseurl }}/path-to-your-asset.css

Of you can use Jekyll’s relative filter (which I’d advise as it does some forward slash magic to avoid adding two in a row.

{{ 'path-to-your-asset.css' | relative_url }} which should output as /test/path-to-your-asset.css after Jekyll does it’s thing.

I think part of your problem maybe in understanding the urls jekyll generates - if I go to your site the home page looks good, but clicking most of the links on the left brings up a page not found error.

It looks like you want your urls to be /myurl/ which is nice, but unless you tell jekyll to do that it won’t work. That format is called a pretty url cause there is no extension on it - but you need to tell jekyll to do this by putting it in your config:

permalink: pretty

If you do this, jekyll will create a folder with the page name in it - and then put an index.html file in there which your server should be able to pickup automatically.

If you don’t do this, jekyll will output your page as page-name.html (I think?) and it won’t be in a folder and your webserver won’t be able to server it unless you have the extension in your url.

on your site you have a page for about - that one works, as you link to it with the extension vs the other ones without.

the urls make a lot more sense if you go dig around in the site folder - do that before changing the permalink and then again after to see the difference. Then the path in the urls will make a lot more sense.

And I think it is working with jekyll serve as it is setup to work with jekyll. Some of your links looked like you wanted them without the trailing slash, which is another layer of complexity - jekyll’s server handles it I believe, but your webserver would need to be specifically set in order to do it.

baseurl: /test

You’re trying to load css from /assets/css
when you should be loading css from /test/assets/css

see attached screenshot where I have edited the code in dev console:

as a follow up, if you put the files in the root of your webserver it would probably work just fine