GitHub Pages absolute_url discrepancy - jekyll

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.

Related

Jekyll site variables not rendering in includes or layouts

I'm working on a Jekyll site with GitHub Pages and have found that {% include myinclude.html %} liquid works just fine inside _includes and _layout files. However, when adding elements to the _config.yml such as author : myusername and attempting to use them either in the _layouts/default.html or _includes/myinclude.html as {{ site.author }}, the resulting text is just blank. To note, these changes are not committed or pushed and I'm using a local jekyll instance installed on the Linux Subsystem for Windows.
Outside of _includes and _layout in my actual pages the site variables work just fine. Why would the site variables not be displayed? At the moment I have to place the actual values back into the page.
The above is the intended behaviour, every change to _config.yml needs the development server to be restarted to process new settings.
The configuration file can't be re-read when using watch, because it
contains things like source and destination. It could only work if it
were actually like running jekyll build multiple times
source
With the assumption that edits to the _config.yml would update automatically, as Jekyll does for edits to other files, I had not restarted the jekyll instance I originally started. Simply closing the Jekyll instance and starting it back up, with bundle exec jekyll serve in my case, read the updated config file and the {{ site.variables }} appeared and showed correctly as I expected.
Any changes to the _config.yml require restarting the Jekyll instance.

Jekyll images won't load: 403 error

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:
![My helpful screenshot]('assets/screenshot.jpg')
<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!

Installing Jekyll to a live HTML website

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.

How to change site URL in Jekyll when switching from development to production

When I am developing my website locally (jekyll serve --watch), the HTML files in the _site dir have http://localhost:4000 URL. However, when I deploy the site to firebase, they remain the same instead of switching to the relative domain URL. My domain url is http://blogprime.com.
So what I want is ... when I am developing the site locally, every link (CSS, JS, fonts, post link, pages ) have https://localhost:4000/ ... but when I use the jekyll serve it should change to my domain name that is https://blogprime.com/ followed by the relative link to CSS, JS, fonts and other files.
Update: I just noticed the date this question was posted!
You need not change links in production and development. You can conveniently set the "url" param in config.yml.
This does two things,
when you do a jekyll serve and serve the site locally then site.url is set to localhost:4000
when you do a jekyll build site.url is replaced by whatever domain name you set in the config.
Post this you can deploy the _site to the root of your server where your domain points to.

How to detemine if jekyll running locally or in production site?

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