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
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 %}
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.
Related
I changed my GH Pages Source setting from "classic"/"hands off" to "GitHub Actions (Beta)", and after some tweaking, everything is working the same again, except for one thing: when hosted on my-subdomain.github.io the link to the home page goes to github.com.
The anchor tag comes from jekyll-theme-primer's default.html layout and looks like this:
<a href="{{ "/" | absolute_url }}">
On my local machine (in Docker), this is fine and links to localhost:3000 and previously on GH Pages it linked to my-subdomain.github.io (and I named the repository the same) which was fine, but after the switch it links to github.com which is bad.
My GHA workflow is a straight copy of the official starter workflow which runs this command:
bundle exec jekyll build --baseurl "${{ steps.pages.outputs.base_path }}"
And site.base_url is "" in all cases.
According to the Jekyll docs, absolute_url "prepends url and base_url to the input". Why is url set to github.com now and what's the best way to fix it?
I fixed it by adding _config-gh.yml with url set to the correct github.io subdomain and adding --config _config.yml,_config-gh.yml to the workflow command.
New to Jekyll.
Not using github pages.
Trying to include an image in a post on my blog:
---
layout: post
title: "myTitle"
date: 2018-06-03 17:45:00 -0400
categories: asdf
---
![My helpful screenshot]({{ "/assets/screenshot.jpg" | absolute_url }})
Confirmed that image file is correctly named and placed in assets folder in root directory (same dir as index.html in _site dir both locally and on my site server).
The image appears on localhost:4000 and will appear on my actual site so long as I do bundle exec jekyll serve and have the local server running on my system... once I stop the local server the image on my site server fails to load, weirdly enough. When I switch to using relative_url the image fails to load.
I also tried loading an image with the following, all failing on my site server even when local server is running:
<img src="{{ site.baseurl }}/assets/screenshot.jpg">
_config.yml:
baseurl: ""
url: "" # also tried putting https://myBlogUrl here
markdown: kramdown
plugins:
- jekyll-feed
Looks like the assets won't GET because of a 403 error:
My site loads everything else over http just fine (html and css docs). Why won't the images load? How can I give permission to load them insecurely?
For some reason the image files on my server had group and public read permissions disabled by default. Enabling these specific permissions fixed this issue.
I set my files' permissions with chmod 644 <filename> (644 = -rw-r--r--).
Note that depending on various things like your server setup (i.e. if you're on a shared server) you need to be careful about what permissions you set for your files/folders. I'm in no position to advise on the matter, do your homework!
I am trying to deploy Jekyll, I can do so successfully when deploying it as a new website. I want to deploy it to a subfolder named Blog '/mysite/Blog'. I understand that localhost:4000 initializes jekyll to deploy, but how does this work when i want to link to it from the main site '/mysite/blog/'. This results in just the site directory showing as shown:
I am having trouble finding documentation targeting this specific problem. I dont want to deploy this to the live site unless im 100% sure
I understand that localhost:4000 initializes jekyll to deploy
No, it doesn't.
That's the default URL of the development server… which you use for development, not deployment.
See the basic usage instructions:
$ jekyll build
# => The current folder will be generated into ./_site
You have static files. Copy them to your live server as you would any other static files.
You just have to set baseurl in _config.yml :
baseurl: /blog
Verify that resources are called with {{ site.baseurl }}{{ page.url }} or {{ site.baseurl }}/path/to/asset.js/css/jpg.
During development (jekyll serve) you will reach your site at localhost:4000/blog/ and you can deploy this code in you site/blog folder.
I can only get Jekyll to serve my blog in the root directory: localhost:4000
When I give a baseurl as shown below in my _config.yml, jekyll says it is serving my blog at http://0.0.0.0:4000/press, however, I can never reach it in my browser at localhost:4000/press.
# Site settings
title: Your Awesome Blog
email: your-email#domain.com
description: "Write an awesome description for your new site here"
baseurl: "/press"
url: ""
# Build settings
markdown: rdiscount
relative_permalinks: true
permalink: date
rdiscount:
extensions: [footnotes, autolink, smart]
Am I missing something?
Thank you! :)
0.0.0.0:4000 and localhost:4000 are not the same location.
You can use jekyll serve --host localhost or you can add a line with host: localhost to your _config.yml
There is a config param in jekyll called production_url. I can't find any information on how to use it.
Ideally i would like to be able to generate permalinks with local url when it is being run with serve param and with production url when run with build param.
How could I do that?
When you build your Jekyll website, it’s possible to specify the environment it’s using for the build with the JEKYLL_ENV environment variable:
$ JEKYLL_ENV=production jekyll build
If you don’t set JEKYLL_ENV explicitly, it defaults to development.
{% if jekyll.environment == "production" %}
// Production environment.
{% endif %}
Github Pages automatically sets the environment to production.
I don't see the variable production_url in the current release (v1.4.1), so this may be a dated question--but I was just looking for this answer myself. There is a baseurl property that can be set with a flag and so to change the path to your files, but it only adjusts the relative path.
jekyll serve --baseurl '/blog'
What you can do is to use the -config option to specify a configuration file for development.
Jekyll Documentation
Your production configuration variables are defined in _config.yml. One option is to create a separate configuration file for development.
--config _config-dev.yml
You can also (as I do) override variables defined in a second configuration file.
--config _config.yml,_config-dev.yml
If you use the liquid templates for site links like this:
<link rel="stylesheet" href="{{ site.base_url }}/stylesheets/blog.css">
then you can override the base_url property during local devlopment
base_url: http://localhost:4000
and run jekyll in "Development"
jekyll serve -w --config _config.yml,_config-dev.yml
jekyll serve will call jekyll build, so you can't really use those two as a way to output different URL schemes.
I built a Jekyll plugin that does this with a Liquid Filter and one user defined variable in your _config.yml called mode.
You set the mode to development or production and the plugin takes care of the rest in your templates.
So in your template you could have a URL such as:
<img src="{{ '/img/dog.jpg' | to_absurl }}" />
When mode is development, upon Jekyll build/serve you will get a relative URL:
<img src="/img/dog.jpg" />
Locally this would be accessed as: http://0.0.0.0:4000/img/dog.jpg
When mode is production, upon Jekyll build/serve you will get an absolute URL:
<img src="http://www.domain.tld/img/dog.jpg" />
The http://www.domain.tld is what you have set in _config.yml -> url variable.
You can see more details on the plugin here:
http://jhaurawachsman.com/2013/jekyll-url-helper-filter-plugin/
This also worked for me:
$ JEKYLL_ENV=production jekyll serve