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

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?

Related

Is there a directory that will place items in the root of _site on build?

I have a bunch of static files (basically favicons, apple-site-icons, etc) that I want to be at the root of _site when it's built. Currently they're just sitting at the root of my main code folder (along with _posts, _scss, _layouts, etc). It builds fine but it would be nice to move them into a subdirectory so the main directory isn't cluttered up (it's an OCD thing).
Is there any folder where I can put these items so they automatically copy to the root of _site when I build? I know I can write a script to do this and trigger it after the build, and there's probably an extension I could lean on, but I'm looking for a solution that just automatically moves them when I run jekyll build for simplicity.
NBD if I can't do it, just curious because I'm kind of a neat freak.
Thanks!
Jekyll allows you to do exactly that using permalinks.
Permalinks are the output path for your pages, posts, or collections. They allow you to structure the directories of your source code different from the directories in your output.
A simple example extracted from the official page is a case where you have /my-pages/about-me.html with the front matter as follows:
---
permalink: /about/
---
This way you specify the output url. In this example, you could access it in local with localhost:4000/about/
The source option. You can specify this in your _config.yml or as a command line option (https://jekyllrb.com/docs/configuration/options/). How you set this has slightly different requirements/implications.
First, move everything that belongs to the Jekyll site into a folder (e.g. "src").
Then set one of these up (assuming you have a Gemfile):
Command line option with root Gemfile:
Keep Gemfile in the root folder
Run bundle install
Run bundle exec jekyll serve --source src
Command line option with nested Gemfile:
Run BUNDLE_GEMFILE=src/Gemfile bundle install
Run BUNDLE_GEMFILE=src/Gemfile bundle exec jekyll serve --source src
Config file option:
Keep Gemfile and _config.yml in the root folder
Add source: src somewhere in your _config.yml
Run bundle install
Run bundle exec jekyll serve
Each solution here might work better with other external services building your site. There are likely other ways to set this up, but this should get you started.

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

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

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.

How can I setup Jekyll for a blog with a large image directory, so as to avoid duplicating that directory in the generated site?

I'm considering Jekyll for a site I'm putting together that will be a blog with lots of images (and other larg-ish media files). It's easy enough to to make a directory for images and then link to them as needed in the posts. But, as I understand it, when the site is generated, all the image data will be duplicated into the generated _site directory that holds the static files. Each time the site is generated the _site directory is emptied, and repopulated with the static version of the site.
Is there any way to, for example, drop a symlink to the images directory inside the site directory, and then maybe have jekyll ignore it when the static files are generated?
Or is there another way to go about this that makes more sense?
Assuming you are running on an apache web server, you can setup an Alias directive to serve images from a directory outside of the normal docroot. You need access to edit the VirtualHosts config or some other ability to create aliases directives (e.g. via a control panel).
For an example of how this would work, let's say you are storing your jekyll files under a directory called "/web/jekyll". To get your images directory do the following:
Add an "_images" directory along with your basic jekyll tree. Ending up with something like:
_config.yml
_images/
_layouts/
_posts/
_site/
index.md
Update your apache config to add the Alias directive like:
Alias /images /web/jekyll/_images
Reload the apache config and run jekyll to build the site.
Since the image directory name starts with an underscore, jekyll won't push/copy it to the output _site during the build. Apache will happily serve most files from your _site directory as normal, but when it sees something like "http://jekyll/images/test.jpg", instead of looking for the file under "/web/jekyll/_site/_images/test.jpg", it'll serve it from "/web/jekyll/_images/test.jpg".
Incidentally, I like a little more separation of the source content and output content than jekyll defaults to. So, I setup my directory structure as follows:
/web/jekyll/html/
/web/jekyll/images/
/web/jekyll/source/
/web/jekyll/source/_config.yml
/web/jekyll/source/_layouts
/web/jekyll/source/_posts
/web/jekyll/source/index.md
With the following option set in _config.yml
destination: ../html
And the apache alias directive setup with:
Alias /images /web/jekyll/images
Jekyll is run in the "/web/jekyll/source" directory, but output is sent to the "/web/jekyll/html" dir. Similar to the first example, calls to "http://jekyll/images/test.jpg" are served from "/web/jekyll/images/test.jpg". This setup doesn't really make a difference from a site serving perspective. I just like the cleaner separation between the raw source files, the fully baked output files and the images which work via the alias.
Correct, the first part of the jekyll command removes everything in the destination directory. The problem with that is the symlinks must be manually created again. So next, go ahead and create a script that does this each time.
Be sure that:
exclude: [jekyll, css, img] in the _config.yml file
linux: The ";" symbol runs first, second, third.. commands.
script: A file named jekyll with executable permissions containing
jekyll;
ln -s /var/www/css /var/www/_site/css;
ln -s /var/www/img /var/www/_site/img;
Finally run (./jekyll) that program instead of jekyll.
-Dan
Make a project page for the images.
Set up directory structure
/home/git/svnpenn.github.io
/home/git/img
Run Jekyll
# We cant add the symlink until after jekyll is done. We will remove the
# site folder and wait for it to rebuild.
rm -r _site
jekyll --server &
while [ ! -f _site/index.html ]
do
sleep 1
done
ln -s ../images _site/images
Note I was using this because I thought it would help publish time on GitHub
pages. It does not. GitHub can take 1-10 minutes to publish depending on the
server.
I know this has already been answered, but I went a slightly different route. I hosted all of my images in a public directory on Dropbox and use grunt to generate a manifest of the images. It keeps my repository small because the images don't get checked in. I detailed it a while back in a blog post.