Jekyll build is putting 'localhost' links in _site (production) files

Question

I'm running bundle exec jekyll build && bundle exec jekyll serve --watch to generate the _site folder, which we then upload by FTP to the web server. The index.html file in the _site folder contains links to the "localhost" local URL rather than the correct site URL, resulting in broken links. Deploying with FTP presumably means that the text of the link will be deployed as-is to the production server, and users will be redirected to "localhost" rather than to our blog URL. How can I fix this? I haven't encountered any problems before.

Excerpt from index.html:

  <link rel="stylesheet" type="text/css" href="/blog/slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="/blog/slick/slick-theme.css"/>
  <link rel="stylesheet" href="/blog/css/main.css">
  <link rel="canonical" href="http://localhost:4000/blog/">
  <link rel="alternate" type="application/rss+xml" title="The WordBrewery Blog | Language Untapped" href="http://localhost:4000/blog/feed.xml">

Excerpt from _config.yml:

title: "The WordBrewery Blog | Language Untapped"
description: "WordBrewery's home for aspiring polyglots. Study tips, book and app reviews, grammar and vocabulary lessons, interviews, and other language-learning resources."
baseurl: "/blog" # the subpath of your site
url: "https://wordbrewery.com" # the base hostname & protocol for your site
feed: <link rel="alternate" type="application/rss+xml" title="{{ site.name }}" href="{{ site.url }}/feed.xml" target="_blank">
wordbrewery: "[WordBrewery](http://wordbrewery.com){:target='_blank'}"
languages-offered: "twenty"

# Jekyll settings

markdown: kramdown
permalink: /:categories/:title/
gems: [jekyll, jekyll-archives, github-pages, bundler, bourbon, neat, jekyll-seo-tag, classifier-reborn, jekyll-feed, nokogiri, jekyll-sitemap, "jekyll/figure"]
encoding: utf-8
lsi: true
timezone: America/Denver
logo: "{{ site.url }}/assets/images/logo-gold.jpg"
avatar: "{{ site.url }}/assets/images/fb-profile.jpg"
locale: "en_US"

# YAML defaults

defaults:
    scope:
      path: "" # an empty string here means all files in the project
    values:
      layout: post
      title: "WordBrewery now has native-speaker audio for beginning Spanish"
      author: "WordBrewery"
      category: Learning
      image: SpanishSpain.jpg
      featured: true
    sass:
      sass_dir: _sass

Answer 1

You just need to build your site (not to serve it locally) so then you can upload the generated files to your server:

$ bundle exec jekyll build

That would generate the canonical link with the value of the configuration variable url in _config.yml.

<link rel="canonical" href="https://wordbrewery.com/blog/">

If you run jekyll's serve command, then the url's value would be localhost because its goal is to serve a local instance to debug your jekyll app.

<link rel="canonical" href="http://localhost:4000/blog/">

---

Or even better specifying production as the environment variable so you can choose to execute parts of code depending on the environment where you are, by default Jekyll sets the environmnet variable to development:

$ JEKYLL_ENV=production bundle exec jekyll build

Then in your code you can put something like:

{% if jekyll.environment == "production" %}
   {% include adsense.html %}
{% endif %}

Answer 2

For folks stumbling across this at a later date like myself—I found that jekyll build ing whilst I had another process jekyll serveing at the same time led to localhost being included undesirably in the html files.

Cancelling the other serve process first worked for me.