Here is a sample site that I'm developing. The clickable map for 6 states should lead to another post. The top-most state( Jammu and Kashmir) should lead to a post 2018-09-20-jkGIF that is in the _postsfolder. Similar actions should be performed for the other states as well.
The problem here is that, the click leads to a 404 page. The local serving of the site does this task easily, but the github backed version doesn't.
Files in my _posts folder:
2018-09-19-welcome-to-jekyll.markdown
2018-09-20-jkGIF.md
2018-09-21-aniGIF.md
2018-09-21-chanGIF.md
2018-09-21-dadraGIF.md
2018-09-21-damanGIF.md
2018-09-21-goaGIF.md
The _config.yml looks like :
title: Your awesome title
email: your-email#example.com
description: >- # this means to ignore newlines until "baseurl:"
baseurl: "infer" # the subpath of your site, e.g. /blog
url: "" # the base hostname & protocol for your site, e.g. http://example.com
twitter_username: jekyllrb
github_username: jekyll
markdown: kramdown
theme: minima
plugins:
- jekyll-feed
And the post linking procedure in the home page in the _layouts folder is:
href={% post_url 2018-09-20-jkGIF %}
(Inside that of a map, for more information dive into this.)
The posts contain a GIF. These GIFs are in the root folder, and are linked to the pages in the following way:
---
layout: post
title: "Jammu And Kashmir GIFs"
---
I tried adding a slash before the jk.gif thing, but that didn't work. The posts don't seem to be linked to the home page.
You can check out this repository if needed, or just ask away in the comments.
Set your base url : baseurl: "/infer", and use it :
href={{ site.baseurl }}{% post_url 2018-09-20-jkGIF %}
and
Related
I want my index.md seen at
http://jtm-lis.github.io/Julien_Tremblay_McLellan/
to redirect to pages I have written in markdown
I tried implementing, post_url variable , such as documented
in order to successful redirect to a page written in markdown without success, as it points to a 404 at
[Name of Link]({% post_url 2010-07-21-name-of-post %})
http://www.jekyllrb.com/docs/liquid/tags/#linking-to-posts
At first I thought this was an error from the for loop, so I added the link manually as detailed in the documentation specifically for pages written in markdown.
index.md
# Index of all my content
[Library Carpentry Workshop July 2020]({% post_url 2020-07-27-library-carpentry-workshop-american-university-notes %})
<ul>
{% for post in site.posts %}
<li>
{{ post.title }}
</li>
{% endfor %}
</ul>
_config.yml
theme: jekyll-theme-slate
url: https://jtm-lis.github.io
baseurl: /Julien_Tremblay_McLellan #NO TRAILING SLASH
title: Julien Tremblay McLellan's Website
author: Julien Tremblay McLellan
email: jtremc#gmail.com
description: > # this means to ignore newlines until "baseurl:"
Write an awesome description for your new site here. You can edit this
line in _config.yml. It will appear in your document head meta (for
Google search results) and in your feed.xml site description.
# social links
twitter_username: jtm-lis # DO NOT include the # character, or else the build will fail!
github_username: jtm-lis # DO NOT include the # character, or else the build will fail!
show_excerpts: true # set to false to remove excerpts on the homepage
What am I doing wrong?
The problem here is that the link does not use the site.baseurl,
so instead of linking to
https://jtm-lis.github.io/Julien_Tremblay_McLellan/2020/07/27/library-carpentry-workshop-american-university-notes.html
you are linking to
https://jtm-lis.github.io/2020/07/27/library-carpentry-workshop-american-university-notes.html which does not exist.
The fix is easy though, you just need to add site.baseurl to your link as in
[Name of Link]({% post_url 2010-07-21-name-of-post | prepend: site.baseurl %})
When doing this, you may encounter an other problem on your localhost environment, since most likely your site.baseurl folder does not exist there. So it will work on your live site, but has broken links in your local environment.
To work normally on localhost just override the baseurl property when you serve it:
jekyll serve --baseurl ""
or if you work with bundler
bundler exec jekyll serve --baseurl ""
I'm using siteleaf for my jekyll site.
Here's my problem: I created a metadata field called "image" inside siteleaf cms. This will allow the site publisher to add an image.
Here's a visual - https://ibb.co/kHcHdG
With out an image the users posts won't show on the site. After creating this metadata field and uploading an image, siteleaf will then create an _uploads folder in my jekyll directory, a folder for all images.
Jekyll ignores folders beginning with an underscore, so I have to input this yaml code inside the config file to fix this. Code Below.
collections:
uploads:
title: Uploads
output: true
posts:
title: posts
output: true
Inside my _posts folder, I have a markdown file with front matter that looks like this, code below:
---
title: popcorn
date: 2017-11-06 15:33:00 Z
image: "/uploads/15023253524_589c7b137f_k-ab220c.jpg"
layout: post
---
lorum ipsum.
So far, I followed the right directions, I'm not getting any errors in the console or in jekyll. The posts will not show. I've ran into a wall. I've asked on the jekyll and siteleaf forums, no solution.
Here's a link to the repo - https://github.com/pizzapgh/kevins_site
Help would be appreciated so much, thanks.
Fixed, finally!
The solution: Go inside my index file and change the following code:
original code
{% if post.img %}
<img src={{ "/assets/img/" | prepend: site.baseurl | append: post.img
}} alt="{{post.title}}" />
{% if post.img %}
new code
{% if post.image %}
<img src={{ post.image | prepend: site.baseurl }} alt="{{post.title}}" />
{% if post.image %}
Thanks for including a link to your repo.
Here's what I did:
$ bundle install
$ bundle exec siteleaf serve
A few warnings show up in the console, but your site is able to build regardless.
I'm able to access your posts now in the web browser just fine, for example: http://localhost:4000/popcorn/
If you were not expecting this URL pattern, you can change your config file. Right now it says:
permalink: ":title/"
For info on customizing permalinks see: https://jekyllrb.com/docs/permalinks/
There are many questions similar to mine, but most of them arise from not using baseurl correctly. My website, however, does not even use a baseurl. It uses the root Github page. I essentially forked my website off of the Airspace theme ported by luminousrubyist, whose website displays correctly, so somewhere down the line I made a change that stopped it from displaying correctly. Therefore I would appreciate it if someone else could figure out what's wrong; I have been trying to figure it out for hours.
My Github page
My _config.yml file:
title: "My Portfolio"
subtitle: "My portfolio, detailing my experience"
# Base URL of site. It should always start with a slash,
# and never end with a slash. Set it to a blank value if hosting at the
# root of your server.
# baseurl: "/" # the subpath of your site
url: "http://austinstover.github.io" # the base hostname & protocol for your site
cover: "/assets/cover.png"
logo: "/assets/logo.png"
# Build settings
markdown: kramdown
# Google analytics
ga_tracking_id: "UA-90009514-1"
# Category descriptions (for archive pages)
descriptions:
- cat: jekyll
desc: "Posts describing Jekyll setup techniques."
- cat: dummy
desc: "Just some placeholder posts, lorem ipsum and the rest."
exclude:
- "/vendor/"
- "Gemfile"
- "Gemfile.lock"
- "README.md"
- "LICENSE.md"
- "*.gemspec"
keep_files:
- "CNAME"
- ".git"
- ".gitignore"
try to set baseurl in your _config.yml:
baseurl: "" #if not used.
btw, your index.html use page.html layout (from _layouts), that use default.html layout which include head.html (from _includes). this one call {{ site.baseurl }} but it's undefined .
I've been working on my portfolio site using jekyll, and everything seems to work just great locally. So, the next step for me was to push it up to github inside a gh-pages branch, and when I do that, I receive an email with the error below.
The tag responsive_image on line 20 in _layouts/post.html is not a recognized Liquid tag.
The gem that I'm trying to use is Jekyll Responsive Images.
Like I said before, when I run jekyll serve, I get no errors and I can run my jekyll site just fine locally, but for some reason this error is keeping my site from working with github. My post.html file looks like this.
---
layout: default
---
<article class="article--container">
<header class="heading--articles">
<h1 class="page-title">{{ page.title }}</h1>
<p class="post-date">
posted on {{ page.date | date: "%b %-d, %Y"}}
</p>
{% if page.featured_image %}
<div class="post-image">
<img src="{{ page.featured_image }}" alt="{{ page.title }} featured image">
</div>
{% endif %}
</header>
<div class="post--body">
{{ content }}
</div>
{% if page.post_images %}
<section class="post--images">
<a href="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_landscape.png" class="box let-there-be-light">
<span class="msg">Let there be light</span>
{% responsive_image path: img/image.png alt: "Project Images" title: "Project Images"%}
</a>
</section>
{% endif %}
</article>
In my _includes folder, I had to make a include for the responsive_images gem and it looks like this
{% capture srcset %}
{% for i in resized %}
/{{ i.path }} {{ i.width }}w,
{% endfor %}
{% endcapture %}
<img src="/{{ path }}" srcset="{{ srcset | strip_newlines }} /{{ original.path }} {{ original.width }}w">
And here's my config.yml file for anyone wondering
# Welcome to Jekyll!
#
# This config file is meant for settings that affect your whole blog, values
# which you are expected to set up once and rarely need to edit after that.
# For technical reasons, this file is *NOT* reloaded automatically when you use
# 'jekyll serve'. If you change this file, please restart the server process.
# Site settings
title: Portfolio
email: test#test.com
description: > # this means to ignore newlines until "baseurl:"
baseurl: "" # the subpath of your site, e.g. /blog
url: "http://example.com" # the base hostname & protocol for your site
twitter_username: test
github_username: test
permalink: /:categories/:title
links:
- title: about
url: /about
- title: projects
url: /projects
- title: articles
url: /articles
# Build settings
markdown: kramdown
gems:
- octopress-autoprefixer
gems: [jekyll/responsive_image]
responsive_image:
# [Required]
# Path to the image template.
template: _includes/responsive-image.html
# [Optional, Default: 85]
# Quality to use when resizing images.
default_quality: 90
# [Optional, Default: []]
# An array of resize configuration objects. Each object must contain at least
# a `width` value.
sizes:
- width: 350
quality: 80
- width: 480 # [Required] How wide the resized image will be.
quality: 80 # [Optional] Overrides default_quality for this size.
- width: 800
quality: 90
- width: 1400
quality: 90
# [Optional, Default: assets/resized/%{filename}-%{width}x%{height}.%{extension}]
# The template used when generating filenames for resized images. Must be a
# relative path.
#
# Parameters available are:
# %{basename} Basename of the file (assets/some-file.jpg => some-file.jpg)
# %{filename} Basename without the extension (assets/some-file.jpg => some-file)
# %{extension} Extension of the file (assets/some-file.jpg => jpg)
# %{width} Width of the resized image
# %{height} Height of the resized image
#
output_path_format: img/resized/%{width}/%{filename}-%{width}x%{height}.%{extension}
Has anyone had this problem with the responsive images gem? I can't seem to google an answer to this. Any help would be greatly appreciated.
Jekyll responsive images is a Jekyll plugin and you cannot add your own plugins to github pages. This is a restriction by github due to security reasons.
Here is the related page on github and here is the list of plugins that are officially included by github in the github server and can be used.
You can try Picturefill instead.
In fact, you're not allowed to use most of Jekyll plugins when hosting on GitHub for security reasons.
A good way out is uploading the static site generated by Jekyll, so GitHub won't build your site, it will only display it as plain html. To do that, the only thing you need to do is pushing to GitHub the _site content only.
Another way out is using GitLab Pages instead. There you can use as many plugins as you want, as the building process is controlled by yourself through a configuration file called .gitlab-ci.yml. A full tutorial on this process is to be published soon.
The only feature GitLab.com doesn't have yet is the possibility of setting custom domain names for websites build by GitLab Pages. But it's coming soon.
Hope to have helped!
It is important to say that this is not a recommended way, but it works for me. I feel like the other answers were a bit to: No you can't - do this.
Yes you can. But as Virtua Creative suggests - you need a workaround. Especially if you are using a custom domain.
I myself had problems with the jekyll-responsive-image for resizing and lazy load on my Jekyll site.
It is not a supported gem.
Example
First if all make your _site repository a git repository.
and remove CNAME from .gitignore.
When you are finished working locally then build:
jekyll build
Afterwords add a CNAME file to your build:
touch _site/CNAME
Echo your domain into it:
echo 'www.your_domain.com' >> _site/CNAME
And then you can push to your github pages repository (also from parent).
Ekstra
Next time you can create a custom command in your bash to automate.
My .zshrc:
alias jekyll_build_cname='jekyll build && touch _site/CNAME && echo "www.instamoneyservices.de" >> _site/CNAME'
A very basic question.
I can not find out how to refer or cite a post in a page.
If this is my post
---
layout: post
title: "Serve Jekyll Websites with servr and knitr"
categories: [jekyll, rstats]
tags: [knitr, servr, httpuv, websocket]
---
The R package [**servr**](https://github.com/yihui/servr) can be used to set up an HTTP server to serve files under a directory.
How I am suppose to cite it in my page
---
layout: page
title: About
permalink: /about/
---
You can find out more info in this post
Could you help me out ?
You can do this 2 ways:
Copy-pasting the link generated for your post as a link to it.
[Check Out My Post!](www.example.com/posts/2015-10-1-name-of-post/)
This definitely works, but will break/fail when you decide to change link style, or have another permalink, or when you change file names.
The smarter way: Jekyll's built in post_url
Jekyll has a built in function that allows you to internally link or cite back to posts on your website. Here is the documentation for it, but I will explain the syntax and usage as well.
Assuming you want to link to a Jekyll post with the filename of 2015-07-17-jekyll-servr-tutorial.md which is located in the _posts folder, the syntax for this would be:
{% post_url 2015-07-17-jekyll-servr-tutorial %}
{% post_url /tutorials/2015-07-17-jekyll-servr-tutorial %} if you have your posts organized in a subdirectory called tutorials
The R Package [servr]({% post_url 2015-07-17-jekyll-servr-tutorial %}) if you want to make hyperlinks.
There is no need to include the file extension name when using this liquid tag function.
Here is additional information and a tutorial on how to use Jekyll post-links that you might find useful as well.