Different rendering with serve and build

Help
1

Hello, I have a basic question on the different results I have with serve and build.
I am following the example on the jekyll quick start tutorial. I am working with ruby 3.0 and jekyll 4.2.
What I’m doing is:

jekyll new myblog
cd myblog
bundle add webrick
bundle exec jekyll serve

where bundle add webrick is added following the discussion here.

This renders properly when opening http://127.0.0.1:4000/

To deploy this to a server, I run:

bundle exec jekyll build

This creates the _site folder. But when I open _site/index.html, the rendering is not the correct one (as in the attached screenshot). And this is the same I see online when I copy the content of _site to the server.

How can I deploy a site with the same rendering as the one I obtain with serve?

screenshot_site
screenshot_site2840×1256 237 KB

2

its just your css not showing. This is probably a baseurl issue. Did you set base url? it looks like you are serving from a sub directory which is what baseurl is for. Try setting it to _site.

Or set the directory to serve from to _site rather than MyBlog which is what you probably should do.

Always helpful to check the console in the browser Inspector to see what is going on, it should show a 404 for the css and show you the path it is looking for it in.

3

Yes as above the issue is a CSS issue where your CSS path goes to say myblog.com/styles.css, which has nothing here.

But that is not found when the site is served from myblog.com/_site/index.html and actually has a CSS file at myblog.com/_sites/styles.css.

I do not think the issue is with baseurl as suggested above.

And I would not set baseurl to _site as the previous answer suggests. As then your end-users will see /_site in the path which is really weird.

Having _site in your URL is a bad idea.

https://myblog.com/_site/index.html

Here is what you should do.

I can’t see the real domain you are using, but am assuming it is https://myblog.com.

Setup config with empty baseurl.

title: My Blog

baseurl: ""

For a deploy, what you want to do is copy the contents of _site directory to the host, not the whole directory with its name. You do not want to deploy index.md, Gemfile, or _site. You only want to deploy index.html, styles.css etc. from inside _site.

Then you can view the site as:

https://myblog.com/index.html

Or aliased as https://myblog.com/

And then your CSS can be <link href="/styles.css"> which will load from:

https://myblog.com/styles.css

And then you’ll get the same result as using jekyll serve locally.

4

Further comments.

SEO

If you are generating a **sitemap.xml` file, I would recommend also setting this in your config. Including protocol. And no trailing slash or path.

url: https://example.com

So that the absolute URLs with the full domain will appear in your sitemap file.

<url>https://example.com/about.html</url>

Besides the sitemap, you’ll want to have pages on your site setup as relative URLs without the domain.

e.g.

<a href="/about.html">About</a>
<link href="/styles.css">

If you use a subpath like my site - https://michaelcurrin.github.io/jekyll-blog-demo/

Then you will need to make that a relative URL and set baseurl in config as /my-repo.

Use the link tag to give you an error if the page does not exist, plus it will add the prefix for you.

<a href="{% link about.md %}">About</a>
<link href="{% link styles.css %}">

Result:

<a href="/my-repo/about.html">About</a>
<link href="/my-repo/styles.css">

Automated deploys

I’m assuming you manually deployed to a self-hosted server or used FTP.

I highly recommend rather using a platform like Netlify or GitHub Pages to deploy your site. Free hosting, free automated deploys, no servers to manage. And you can add your bought custom domain on top of the site at no additional cost!

Netlify will support Jekyll 4 and custom plugins. GitHub Pages by default will not.

My Netlify site

My guide to configuring Netlify - Configure | Code Cookbook

You only need a config of a few lines!

If you want to use GitHub Pages and also Jekyll 4 (to override the default 3.9), then you’ll need GitHub Actions to deploy your site for you. I setup a site like that. See .github directory. That config is much longer than the Netlify one but it does the same thing.

5

Thanks @MichaelCurrin and @rdyar for your replies. It was indeed a problem related to not finding the CSS path because I was uploading to the server the whole directory and not just its contents. Now it works perfectly, thank you!

1 Like