Jekyll images won't load: 403 error - jekyll

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!

Related

GitHub Pages absolute_url discrepancy

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.

Github Pages and Jekyll permalinks going to different paths

I have a site running locally with Jekyll and deployed to GitHub Pages without any issues.
The issue I have is with GitHub pages and local permalinks.
https://username.github.io/my-repositary
and localhost is going to the root
http://localhost:4000/
So adding a page About in the root and linking to ends up looking like this
https://username.github.io/about
http://localhost:4000/about
Rather than the desired outcome
https://username.github.io/my-repositary/about
http://localhost:4000/about
Jekyll allows you to specify a subpath for the page you are generating via the baseurl option in the _config.yml file. In this case, yours should add this line to it:
baseurl: /my-repositary

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.

How do I redirect an old Netlify + Jekyll site address, to the new address?

I created a Jekyll site, hosted at Netlify, at old.address.com. Now I want to redirect to new.address.com. But the Netlify docs doesn't seem to work or I don't understand the docs. This is what I did:
I added, to _config.yml: (because Netlify says Jekyll excludes '_...' files)
include:
- _redirects
And I added a _redirects file. I just copy-pasted Netlify's generated instructions into that file, this is the content:
# Redirect domain aliases to primary domain
https://jekyll-comments.demo.ed.community/* https://jekyll-demo.talkyard.io/:splat 301!
http://jekyll-comments.demo.ed.community/* https://jekyll-demo.talkyard.io/:splat 301!
https://jekyll.demo.talkyard.io/* https://jekyll-demo.talkyard.io/:splat 301!
http://jekyll.demo.talkyard.io/* https://jekyll-demo.talkyard.io/:splat 301!
And this has no effect. What's the problem / what am I doing wrong?
This is how the directory looks like:
$ ls -1
404.html
about.md
_config.yml
Gemfile
_includes
index.md
_layouts
_posts
_redirects <—— added as per Netlify's instructions
_sass
_site
$ ls -1 _posts/
2018-01-01-like-about-jekyll.markdown
2018-01-02-installation-instructions.markdown
2018-01-02-kind-creatures.markdown
The config file is just the default one:
title: ...
email: ...
baseurl: "" # the subpath of your site, e.g. /blog
url: "" # the base hostname & protocol for your site, e.g. http://example.com
twitter_username: ...
github_username: ...
# Build settings
markdown: kramdown
theme: minima
plugins:
- jekyll-feed
talkyard_comments_server_url: ...
include:
- _redirects
Please note that although there are fairly many details above, it's all just various default stuff. So it's not specific to my problem. It should apply to all new Jekyll sites.
Disclaimer: I work for Netlify
We have a specific section on this in our documentation: https://www.netlify.com/docs/redirects/#handling-hostnames-and-protocols-differently
...and your snippet should work since it follows those conventions.
The only prerequisites to make that work are:
1) that you have your site configured in our UI to answer to ALL of those names - so:
jekyll-comments.demo.ed.community
jekyll-demo.talkyard.io
jekyll.demo.talkyard.io
2) and that all names are set up the same in DNS (CNAME to yournetlifysitename.netlify.com)
The only way to add "extra" names to your Netlify configuration is as domain aliases, which are configured in the Domain settings panel right next to your "main" custom domain.
Since your _redirects looks correct to me, if you have the prerequisites configured as suggested, the most likely failure mode is that you don't end up with your redirects actually applied for some reason (usually - they didn't get deployed because they didn't exist in a file called _redirects, in your publish folder, after the build), but your include in the jekyll config should allow that file to persist in that location. That jekyll config is the "right" way to do it but for other site generators, we sometimes advise people to copy the redirects into place after build: jekyll build && cp netlify_redirects.txt _site/_redirects
You can download whatever files are in your deploy to examine their "final state" via this tiny icon from any successful deploy logs page:
From a quick look at your site configuration, they appear to be deployed and working:
$ curl -v https://jekyll-comments.demo.ed.community/ -o /dev/null
* Connected to jekyll-comments.demo.ed.community (35.199.180.1) port 443 (#0)
[...]
< HTTP/1.1 301 Moved Permanently
[...]
< Location: https://jekyll-demo.talkyard.io/
So I guess the next question is...how are you testing?

How can I easily manage different base URL of Jekyll webpage on localhost and remote server?

On my computer, I access my test webpage on URL http://127.0.0.1:4000. On server, it will be on GitHub pages, that means https://username.github.io/repo-name/.
In the _config.yml I see following relevant settings:
# Uncomment if you are planning to run the blog in a subdirectory
# Note - if you enable this, and attempt to view your site locally you have to use the baseurl in your local path.
# Example, you must use http://localhost:4000/path/to/blog
#baseurl: /path/to/blog
baseurl:
# The URL of your actual domain. This will be used to make absolute links in the RSS feed.
url: http://yourdomain.com/
So for GitHub server I need it to be:
baseurl: /repo-name/
url: https://username.github.io/
But on localhost, it must be:
baseurl:
url: http://127.0.0.1:4000
These settings are necessary because without them, I will get 404 errors for resources that are using relative paths:
<script src="js/ghapi.js"></script>
"NetworkError: 404 Not Found - http://127.0.0.1:4000/download/js/ghapi.js"
The path should be http://127.0.0.1:4000/js/ghapi.js but since the page was /download it was added to relative URL of the script file.
I need to deal with this issue, how do I do that?
The best solution was to have two config files. The additional one, debug.yml, overrides some settings from the basic one. Both setting files can be loaded using this command:
jekyll serve --config _config.yml,debug.yml
The debug file can contain:
name: MySite [DEBUG MODE]
debug: true
url: http://127.0.0.1:4000
The advantage here is that no setting files need to be changed, you just use different command to run jekyll.
For me the best option is having in config.yml the baseurl used in Github pages and when you launch your site locally, override this value with an empty one:
bundle exec jekyll serve --baseurl=
That way, the site will work on localhost and in ghpages.
you can add a branch and change url line in config.yml
url: http://127.0.0.1:4000