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

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

Related

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 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!

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?

bootstrapped jekyll project fails to load its auto-generated css

I've created a new jekyll project precisely following the simple command sequence at https://jekyllrb.com/. However it seems like the server is not looking for the right main.css:
GET http://example.com/css/main.css 404 (Not Found)
This error in the browser console seems to imply an irrelevant domain for a local project, so I wonder whether those instructions just mentioned are not what one should do for bootstrapping and running/testing a jekyll project on your local server. In that case, what is the right procedure for working locally? and is there an automated command for setting a different host name for deploying to a real server?
I am using a fresh install of jekyll 3.2.1.
Thanks!
Dirty temporary patch (because of this issue).
In _config.yml, set url: http://matanster.github.io/bloglike or wathever is your production url.
Create a config_dev.yml and add url: http://127.0.0.1
Locally, you can serve with :
bundle exec jekyll serve --config _config.yml,_config_dev.yml

Run jekyll build Command with Different url Flag

My current _config.yml file looks like this:
#Site settings
...
baseurl: "" # the subpath of your site, e.g. /blog/
url: "http://10.0.1.9:3000" # the base hostname & protocol for your site
...
# Build settings
markdown: kramdown
safe: true
lsi: false
highlighter: true
keep_files: [public]
exclude: [src, lib, node_modules, bower.json, Gemfile, gulpfile.js, package.json, README.md]
I've got my url currently set to my local server, where I serve my Jekyll site for local development.
When building for production however, I have to keep manually changing this url to the url of my remote server before running jekyll build. Is there a way I can pass my remote url alongside the jekyll build command to build a site with the correct remote paths?
Something like so:
jekyll build --url mysite.com
Any help is appreciated with this. Thanks in advance!
Put your production url in _config.yml eg: url: toto.com.
Create a _config_dev.yml that will be used to override values in development.
In you case
url: "http://10.0.1.9:3000"
Development build is launched with :
jekyll build --config _config.yml,_config_dev.yml
Values in the last config file in the command will override those in first file.
and production build with jekyll build.
See Jekyll documentation http://jekyllrb.com/docs/configuration/#build-command-options configuration paragraphe.