I'm using github pages with the bulma-clean-theme, and when I render my page locally, it shows up fine and with no issue. However when I view blog posts on my site on github, I see the content duplicated on the site!
Here is the most likely area for this to result, in my changes to pages.html from the theme.
<div class="content">
<h2>{{ page.title }}</h2>
<div class="meta"><i class="fa fa-calendar" aria-hidden="true"></i> Published {{ page.date | date: '%B %d, %Y' }} by
<i class="fa fa-user" aria-hidden="true"></i> FoxDeploy
<i class="fa fa-hourglass" aria-hidden="true"></i> <i>{{ content | reading_time_as_s }} average reading time</i>
</div>
<img src="{{ post.header }}{{ post.coverImage }}"><br>
{{ content }}
</div>
I found the error!
I was using the "jekyll-time-to-read" gem, which is not supported on github pages. This plugin would handle calculating the time it takes to read a post by parsing the content through a new liquid command.
<i>{{ content | reading_time_as_s }} average reading time</i>
Since it wasn't supported though, instead the page would be rendered with the entire content of the post, then a lame trailing average reading time after the post.
The fix, for now, was to remove that bit from my post and also remove the plugin, and the problem was solved.
Related
I'm looking find a nice way to resize images uploaded by my client using CloudCannon.
I've looked at Jekyll plugins for doing this but they don't seem to play nicely with CloudCannon.
Does anyone have any tips or tricks for getting this to work?
Here is the code I am currently using:
<div class="section blog">
<div class="container">
<div class="row blog__items">
{% for post in site.posts %}
<div class="blog__item col-xs-6 col-sm-4">
<div class="article">
<div class="article__head">
<a href="{{ site.baseurl }}{{ post.url }}" class="article__media">
<img src="{{ site.baseurl }}{{ post.image }}">
</a>
<h3 class="article__title">{{ post.title }}</h3>
</div>
<div class="article__body">
<div class="article__meta">
<p class="article__date"><small>Posted on {{ post.date | date: "%d %B, %Y" }}</small></p>
</div>
<div class="article__text">
{{ post.description }}
</div>
Read More
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
I would use an 'image resize service' or 'image resize CDN'.
I have benchmarked a few. They all work kind-of the same, but all have their specifics. Some are free, some not. Google even has its own unofficial free image resize service (somebody got the link?). ImgIX is nice, but performed really bad at low-traffic websites when I tested it some time ago. They seem to have addressed the issue recently (2017), but I did not retest it.
For low-traffic websites I recommend to use the free images.weserv.nl.
To use this solution, replace this part:
<img src="{{ site.baseurl }}{{ post.image }}">
with this:
<img src="//images.weserv.nl?url={{ site.baseurl | replace:'http://','' }}{{ post.image }}&w=600">
This will create a default compressed image with a width of 600 pixels, with a quality setting of 85% (if jpg). For more info, see the documentation.
Note that with images.weserv.nl you will have only one shot at creating the resized image. There is no option to change or clear the cache if the request failed (or the image changed). The cache will automatically be deleted/expire in a month or so.
CEO of CloudCannon here. We find a lot of people are running into problems with image sizing. Joost's suggestion is great and is the best answer we have right now.
With that said we are working on a way to resize images on upload which we think is a better solution for a couple of reasons:
Large images won't bloat your repository as much
There's no need to rely on a 3rd party to resize them on the live site
If you'd like for information feel free to get in touch with our support :-)
How do you repeat string multiple times in Jekyll?
For eg: in Python, you can do "hello" * 5 to get 'hellohellohellohellohello'. In Jekyll is there an easier way of doing the same thing than this.
{% for i in (1..5) %}
Hello
{% endfor %}
Example
Say you want to display a star rating and you are using <i class="fa fa-star"></i> to display each star. So to display a 5 star rating you would do.
{% for i in (1..5) %}
<i class="fa fa-star"></i>
{% endfor %}
A single page may have many ratings displayed on it so you would be using several instances of that for loop.
This is the best way.
If your concern is about performance; then you don't need worry because Jekyll Liquid is precompiled into html anyway so the performance will only be affected at build time.
I tried to insert the linkedin link in the _config.yml but its throwing an error that the page cant be found.
go to your linked in profile then copy the address that is below your profile picture starting after https://ke.linkedin.com/in/
Then go to go to your _config.yml in your blog file in github, then paste the code you copied earlier to linkedin in footer_links section. Remember to space after the colon,like so
linkedin_username: user-name-256ra147 and thats it, you are now linkedin! Hope it helps.
Still with Minima 2.5.1 (even with remote theme), so have to add as
linkedin_username: user-name
But I don't like the default vertical listing of the social links, and prefer the horizontal listing. So I customized the footer.html as follows:
<footer class="site-footer h-card">
<data class="u-url" href="{{ "/" | relative_url }}"></data>
<div class="wrapper">
{%- if site.github_username -%}
<ul class="contact-list">
<svg class="svg-icon"><use xlink:href="{{ '/assets/minima-social-icons.svg#github' | relative_url }}"></use></svg> <span class="username">{{ site.github_username| escape }}</span>
<svg class="svg-icon"><use xlink:href="{{ '/assets/minima-social-icons.svg#linkedin' | relative_url }}"></use></svg> <span class="username">{{ site.linkedin_username| escape }}</span>
<svg class="svg-icon"><use xlink:href="{{ '/assets/minima-social-icons.svg#twitter' | relative_url }}"></use></svg> <span class="username">{{ site.twitter_username| escape }}</span>
</ul>
{%- endif -%}
</div>
</footer>
i have an blog index page with a list of blog posts and excerpts.
once i click on the "read more" link, the full blog post is opened but lacks of its title and date of creation.
the blog index is structured like so:
{% for post in paginator.posts %}
<div class="entry">
<h1>{{ post.title }}</h1>
<span class="date"><i class="fa fa-clock-o"></i> {{ post.date | date: "%m-%d-%Y"}}</span>
{{ post.excerpt }}
<a class="more-link" href="{{ post.url }}">continue reading <i class="fa fa-chevron-right"></i></a>
</div>
{% endfor %}
i've tried throwing {{ post.title }} and the date in blog posts, both in the front matter or inline in the article, but it just shows up empty.
how can i show the title in my opened blog post?
thanks!
To edit how your blog posts are displayed you have to edit the template file in the _layouts folder. By default Jekyll uses post.html as a template for blog posts. Make sure that you have {{ page.title }} in the used layout file and regenerate your site. Now the blog title will appear on all of your individual post pages, please note that it won't appear if the post title is not specified in the front matter of the post.
I would like to display a randomly chosen post in the front page of my Jekyll site.
Do you have any idea how I could loop and chose a random post each time the page is loaded ?
This is the index that I have at the moment.
---
layout: default
title: Home
---
<h1 class="content-listing-header sans">Posts</h1>
<ul class="content">
{% for post in site.posts %}
<li class="listing">
<hr class="slender">
<h4 class="contrast">{{ post.title }}</h4>
<span class="smaller">{{ post.date | date: "%B %-d, %Y" }}</span> <br/>
<div>{{ post.excerpt }}</div>
</li>
{% endfor %}
Thanks
Jekyll generates static files. You can chose a random post to be inserted in your home page, but this page will be static and random post will only be changed when you site is generated.
{% assign random = site.time | date: "%s%N" | modulo: site.posts.size %}
<h1>{{ site.posts[random].title }}</h1>
As liquid has no random tag, you can mimic randomness based on time.
See https://stackoverflow.com/a/28323813/1548376
The only way to load a different post on each reload is to do it with javascript. And here it will become complicated.
you will need to create a posts list for javascript to choose from,
you will have to generate specific page for each post with only post's html in it. No head, navigation and so on. And this can only be accomplished with a Jekyll generator plugin.