Jekyll Collection Output True - jekyll

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/

Related

Jekyll redirects to a 404 and does not render post.md

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

Linked posts lead to a 404 in Jekyll

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"
---
![useful image]({{ site.url }}jk.gif)
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
![useful image]({{ site.baseurl }}/jk.gif)

Jekyll responsive_images gem throwing errors when trying to work with gh-pages

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'

How to add multiple contents in a custom collection folder in Jekyll for Github Pages?

I do know that collections is an experimental feature in Jekyll, but since GitHub tutted the feature, I guess I could start using it.
I have a file structure like this:
site root
├─ _portfolio
│ ├─ project_1.md
│ └─ project_2.md
└─ /* rest of the Jekyll folders and contents */
This is what it looks like in Windows Explorer:
This is the content for marble-run.md:
---
layout: project
title: Marble Run
---
This is Marble Run. All tests copyrighted.
And this is the content for pokemon-walking.md:
---
layout: project
title: Pokémon Walking
---
This is Pokémon Walking.
I have set _portfolio as a collection in the _config.yml, and have the output set to true.
collections:
- portfolio:
output: true
I used the following code to display the portfolio page:
---
layout: default
---
<div class="portfolio_main">
{% for project in site.portfolio %}
<div class="projects_container">
Testing this.
<div>
{{ project.content }}
</div>
</div>
{% endfor %}
</div>
{{ site.portfolio }}{{ project.url }} gives /portfolio/{ title of the project }/. As in, /portfolio/marble-run/ for marble-run.md.
I expected to see two Testing this. links in the webpage, but I'm only seeing one.
My purpose is to create a collection folder that allows me to generate new contents whenever I put new Markdown files inside, just like what Jekyll does to _posts folder.
What am I doing wrong? Thanks in advance.
Okay, been tackling this problem for at least 6 hours.
Collections do work normally in GitHub Pages.
To set them up:
In _config.yml, add this at the very bottom:
collections:
- my_collections
Where my_collections are to be replaced with your collection folder name.
Do everything normally, according to the official Jekyll documentation.
The only caveat is, you need to put the permalinks correctly, or you won't be able to reference the items in the _my_collections folder (after doing what the docs told you to do).
That's all I know.

Dynamic Links in jekyll

currently I'm working on static website, so I'm using jekyll to generate it. To have a nice structure and fancy URLs, I use permalinks.
permalink: /impressum/
So for example the impressum.html is rendered to impressum/index.html. And in my HTML i can simply link to that file with
<a href="/impressum">
That works for me very well. But you know, I'm a programmer. What if I want for example to change the URL to /imprint/? Well, I can change the permalink without any problems. But what's about all the other links on the site? Yeah, sure, I can use the search & replace function of my editor to change the linked URLs and check the whole site with a site checker for broken links, but that's not the fancy way I want to go. That's why I tried to create some kind of global variables with the permalink.
_config.yml:
lnk_impressum: /impressum/
impressum.html
---
layout: layout
title: Your New Jekyll Site
permalink: {{ site.lnk_impressum }}
---
But that does not work. I get this error:
Generating... error: no implicit conversion of Hash into String. Use --trace to view backtrace
So what's wrong or is there a better way?
It doesn't seem to be possible to place Liquid tags inside the YAML Frontmatter or _config files, per this SO answer.
Something else you could try is based on the approach used by the documentation pages for Bootstrap, which uses a Page Variable they call slug that provides a unique, unchanging reference to each page.
For instance, if you'd like to place a link to your impressum.html page (for which the permalink could change), you can place this code on another page, such as index.html:
{% for mypage in site.pages %}
{% if mypage.slug == 'impressum' %}
Link to Impressum page
{% endif %}
{% endfor %}
Then, in the YAML frontmatter for each of your pages, place code similar to the following:
---
slug: impressum
permalink: /my-permalink-to-impressum/
---
To change your permalinks in the future, you would just make the change to the Page Variable permalink in each page. The URLs referenced in your other pages would be automatically updated by Jekyll, as long as the slug variable remains unchanged.