# ALL the Jekyll plugins you will ever need #223

- URL: https://superails.com/posts/all-the-jekyll-plugins-you-will-ever-need-223
- Published: 2024-12-29
- Duration: 33:23
- Access: free
- Topics: jekyll
- Playlists: Create and host static website with Jekyll

10 Jekyll plugins (ruby gems) that will turn your blog from 💩 to 🔥

Episode source code: https://github.com/corsego/220-jekyll-blog/commits/main/
Based on this blogpost: https://blog.corsego.com/jekyll-plugins

0:00 Progress so far
1:05 Navbar links
3:40 Embed google form to subscribe
5:20 Configure Minima theme
9:14 Open external links in new tab
10:48 Opengraph images
16:34 Sitemap
17:43 Jekyll Redirect From
19:33 Link to edit page on Github
22:32 Tag discovery pages
27:00 Similar posts (based on tags)
28:56 Anchor tags
31:05 Fix CI (libvips)
31:51 Fix Anchor tags duplication

## Chapters

- 0:00 Progress so far
- 1:05 Navbar links
- 3:40 Embed google form to subscribe
- 5:20 Configure Minima theme
- 9:14 Open external links in new tab
- 10:48 Opengraph images
- 16:34 Sitemap
- 17:43 Jekyll Redirect From
- 19:33 Link to edit page on Github
- 22:32 Tag discovery pages
- 27:00 Similar posts (based on tags)
- 28:56 Anchor tags
- 31:05 Fix CI (libvips)
- 31:51 Fix Anchor tags duplication

## Transcript

Hello, friends. Previously I talked about hosting a basic, uh, static page on GitHub pages for free on your own domain. Then I talked about creating a new JI blog and post and hosting it on GitHub pages. And then I talked about, uh, extending our jiggle blog with the external tools like analytics, uh, external command system, and, uh, monetization via buy me coffee. And, uh, we added this kind of buy me coffee button. We added the, a common section. And now let's, uh, extend, uh, our GLE block even more with the JL plugins. Now, if go to our gem file of our GLE block, we have this group jiggle plugins. If we search for JI plugins, then there's like a list of different jiggle plugins that we can add. And, uh, I have my preferred plugins and they're going to try to add some of, uh, my preferred plugins to make our blog much, much better. So, uh, for doing this, let's first, uh, figure some basics out. First of all, we have, uh, our, uh, posts, but we can also have static pages, and we can post, uh, we can place static pages in the N bar. So for example, we want to have the link to the about page here on my other blog here, I have a few different, uh, links in the nav bar. So to have the link in the nav bar, we would need to extend the some settings in our, uh, theme. Now we are using this mini theme. It's, uh, theme. We have it, uh, set in our config V ml theme mini. Let's have a look at the, uh, rhythm of this mini theme. So, uh, if we look here, so the layout by default should be base, uh, I think we talked about it, uh, in the previous video. So the layout should be base. And, uh, here somewhere we have, uh, head pages. So, uh, we should set this in our confi via ml. Let's try doing it. I go to confi VML here on the theme mini, we will say head pages. We, so we will have about do md we don't have this portfolio up page. And, um, okay, we have about markdown. So it was generated with markdown, but let's use MD with markdown. I think it'll not work. Now, let's, uh, refresh. And K, you see we have this, uh, about page visible in the npa. Let's try adding another static page. Let's say, uh, uh, page to subscribe to newsletter. Let's, uh, just go with this about page. I will name it, uh, newsletter title of newsletter. The link will be slash newsletter. And here we can have a link to Google Forms, for example. Okay, uh, I will need to add the newsletter to our config via ML refresh. Now I think I need to restart the server to be sure that it picks up the changes. Okay, now we have the link to about and newsletter. I think if I swap the places in the confi via ml, and again, I will restart server. Yeah, you see the places have been swapped. Okay, so we have added the, uh, custom static page that is not post, and we've added to, to the nal. Let's save our changes. So, uh, static pages in nal. Okay, looks good. Okay. Now we have this newsletter page, but we want to let users subscribe. Now, you can use, uh, any newsletter management tool, but, uh, if you want to be very simple, you can just have a Google form that you embed here, and you can start letting users emails, ASAP. So here I go to Google Forms, uh, uh, subscriptions. Uh, question, uh, will be short answer, uh, your email. Okay, publish. Uh, now we don't need to just have a link. We need to embed it. I think, uh, here have this embed, HTML. Let's, uh, copy it. We'll now paste it inside our newsletter. Okay, let's, uh, go back and wonderful. Uh, now users can subscribe. We can, uh, also change the width and the height. Let's make like width. Uh, for example, let's make the height the 600. Let's see if anything changes. Okay, now we don't have the scroll, so looks better. And just like this, we can let use, we can start collecting emails very fast. So, um, embed, uh, Google form to subscribe. Okay, uh, going further, let's extend the minimum theme further. So, uh, if we go to the docs, we can, uh, see different, uh, uh, color schemes. So by default, we have the skin set to, uh, classic. So it's just a bite mode. And let's try changing the skin to something else like a skin dog. So, going to the config, we will, uh, say skin. It will be dark for minimum. I will, uh, restart the server. And you see it's, uh, now a blog is, uh, all in dark mode. Looks, uh, fine. You see the text is, uh, white. So it is, uh, readable. Uh, there are other options outta the box, like, uh, uh, solarized, solarized lights, solarized Dark. Let's try one of these. Let's try solarized. Okay, here's another theme, but, uh, let's try keeping it dark for now. Okay? And, uh, then there's another thing with social links. So, uh, here, I already previously put with a username, GitHub username, but, uh, they are not displayed in the folder. And, uh, the Synex has been updated for these in mini. So, uh, yeah, let's also put the author. It suggests put in the author. Uh, let's, uh, before I save, let's see if, uh, we have the author of the blog in Metatags already present. Go into head author. You see this GitHub user, so it's definitely not what you want. Uh, they're going to set the author to your name. Okay, let's, uh, restart. And you see the author is the name that isolated. So it is not just GitHub user name. So I think it is quite important to set the author, uh, going forward, what you have this, uh, social links. So let's, uh, add the social links. Um, GitHub, uh, Twitter, uh, I don't think we need these, uh, progress links anymore. Now let's, uh, restart and, uh, just have a look here. So, at the moment, if we don't have the social links in the filter, I refresh. And you see now we have the link to, uh, Twitter and to GitHub. And, uh, you can set links to like blue sky and to all the other social networks easily. So, uh, yeah, then there's this show experts thing. Let's, uh, try adding it. So I think it's going to give a show description of each post in the, um, landing page. So let's say show experts true. I don't think it should be nested inside mini. It's, uh, there is some weirdness, like I would, uh, some things need to be nested within minimum, some don't. Okay. You see, show experts works. So I have like a shorter description, a short preview of the blog post, so the users are more incentivized to open and read more. Okay? Uh, yeah, this is more or less everything I would be adding by default. Uh, let's save our changes. So extend minimum or, or configure minimum. Okay, so we've done this. We've done this. Uh, uh, that's another really cool thing I think we need to add. So here we have a blog post, and, uh, let's say we have, uh, internal links and external links. So these are external links. And you say, I click on an external link and it just, uh, makes me leave my, uh, blog and, uh, redirects me to another page. But, uh, usually you want to keep your users inside your ecosystem. So maybe you would want to open internal links, like links to other pages in your app, always, uh, uh, on the same browser tab, but the external links as, uh, in, in a new browser tab. So for this, we're going to install the, uh, JL target blank plugin. Let's, uh, try adding it. So I'm adding in this, uh, jam do gem file inside the JE l plugins bundle. Now, uh, in plugins, in config v ml, I need to add the, the gem have, have JE field. Now I'm adding JL target blank. I am, uh, starting the server once again. Uh, and now I expect to click on this link and it'll open in a new tab. So does it work? Yes. So now all external links open in a new tab, I think. Uh, this is great. Let's save our changes. So open external links in your tab. Okay, uh, going further, uh, J-L-S-E-O tags. So, uh, another important, uh, plugin to make your post more discoverable by search engines. Let's try inspected the, uh, head of a post. And the, you see, we actually already have a description, uh, uh, a title, uh, yeah. So we already have some, uh, meta tag set, uh, because, uh, the mini mini already comes with this J-L-S-E-O tag. Let's even find it here. Kill SEO Oh, no, I'm looking at the wrong place. Yes, plugins mini comes with J-L-S-E-O tag already. So we don't really need to install it because the gem is already present. But if you're not using the mini, I would highly recommend you to install the gem SEO tag and, uh, add the meta tag to your blog post. Uh, going further. So this is a plugin and you JL plugin developed by Igor Alexandro. It's really, really great. It, uh, gives, uh, um, it creates open draft images for your JL post. So, uh, you just don't share just a link. You share a link with the preview, so it is much more clickable. Let's try installing this, uh, gem. So I'm adding JL OG image In the GEM file. Then, uh, we need to have JLE tag and JL OG image in the plugins. Um, then we need to, to set the config, or yeah, let's try not setting the config for how the open draft images are generated. Let's, uh, just run bundle. Let's, uh, restart. JE open our block. And, uh, yes, you see it generated these images. Isn't this wonderful? It generated the, uh, images for our two block posts, but you see, they're not very nice, so let's customize them a bit. So, um, going back to the GEM GL OG image, let's take, uh, this example and, uh, I will, uh, paste it here. So, uh, we can have like a title image. Let's, uh, let me put my face as a title image. I'll go to my other blog here. In the about section I have, uh, a photo of myself. I will, uh, put this photo somewhere in the assets, uh, images. I will name it, YA or Avatar. So I have assets, images, I will, uh, put the avatar. Okay, avatar, png. Yeah, png. Now I'm going to delete these previously generated images. I will, uh, restart, uh, JL because I made some changes in the config file. I will, uh, Render the page. And, uh, yeah, it looks like, uh, Nothing, uh, was generated based on this. Why. So, okay, so I'm trying again. And, uh, I, this error images do not have same number of bands. So, uh, I was trying this avatar, maybe there's some problem, but I tried with another image that is actually A JPG, not PNG. And, uh, it should work. So let's try this. Image avatar two JPG. Maybe the gym doesn't support all, uh, types of images. And, uh, you see in the open graph folder, we have two new images. And you see they are now better out. We should also maybe change that domain. So I'll put, uh, my domain here, like, uh, super ails.com. I will stop the server. I will, uh, remove the images and start the server once scan. So the nice images have been generated and, uh, looks good. So now, uh, let's, uh, check our head. And in the head we have this OG image, and it is the part of the image. Uh, welcome to JL png. Yeah, it tries to find the PNG. Uh, for some reason, uh, it doesn't find the image. Now, actually, uh, I think I couldn't find it because I need to restart the minimum once again for it to pick up the new folder. And, uh, now I restarted. And, uh, now everything works. And actually like this, you can have access to the assets. So here I go to parent directory. Here have like, uh, via in images, we can open og, uh, post here, have the images. So, okay, looks good. We have added the, uh, OpenGraph images, uh, with the GEM J OG images, let's say our changes. So, Okay, what is next? So we have, uh, added the SEO text. We had them in mima. We added the open draft images. Now let's add a site map. Site maps are usually important, uh, for search engines. So, uh, here's the GEM JL site map. Let's, uh, add to our gem file, uh, in plugins. So going into config in plugins, we added JL site map. And, uh, now before we start, uh, before we're on bundle, let's, uh, just double check. So I will go to sitemap dot xml. You see there is no site map here at the moment. And now I will run bundle, start the server once, scan, refresh the page. And here you see we have a site map generated for all the pages, uh, in our JL block. Isn't this wonderful? So like this, we get the free site map for the block, uh, JLL at site site map. Okay, what is next? We have added the site map. And here's another nice gem. So in theory, you can have like multiple URLs directing to the same, uh, page in your block. Or, for example, you had an old URL and you want to redirect it to a new URL. For example, you want to redirect the page slash hello to a specific, uh, uh, blog post or specific page in your blog. So for this, we can add the JL redirect, uh, from, uh, I don't really use this often, but there can be some cases where you would want to redirect, uh, links to other pages. So I'm adding check redirect from adding it to the plugins bundle, starting the server. And, uh, so they're going to add the, some redirects. Let's go to a blog post that have, we have our posts in the posts here, no, those assets. So we have under scope posts. And, uh, here, let's add the redirect from slash hello. So whenever somebody visits the slash hello page, it should redirect us to this blog post. Let's, uh, try, I'm going to, hello. And you see it redirects uh, slash hello to this blog post. So, uh, uh, add redirect from. Okay, uh, next we have, uh, yeah, links to edit a specific GitHub, uh, page for me. It is very comfortable. For example, I am looking at my existing jiggle block here, and I see a problem on this page. And I can, uh, from my phone or from anywhere, I can click on edit this page. I will have this page opened in the, uh, GitHub, and I will be able to quickly edit the specific page without, uh, going through all the navigation. So, um, to add the, this, uh, I will add this GitHub edit, URL in my config. It's, uh, just a variable name that I'm given, but this GitHub edit, URL, is going to be accessible anywhere in your pages. And the URL is going to be to your, uh, repository. So in our case, the repository is slash cogo slash 220 JL blog. And we have the branch that is main, not master. So repository blob slash main. And now we're in the layout of each post. Let's open the layouts post. So here, uh, anywhere we can add the link to edit this page on GitHub. Um, here I added it as an a tag. Mm. Let's, uh, see. So here we can have the link to edit this page. And, uh, here we would maybe want to have, uh, uh, the GitHub editor l or you could just have, uh, this kind of path. Now I see a mistake here, so I have like an absolute path written here. And, uh, I, I'm not going to hardcode the absolute path for each, uh, uh, blog post. Let's see how I actually did it in this other repository. Uh, going to, uh, layouts post edit. Yeah, here's the correct, uh, a tag. So here have the site, GitHub edit, URL that we defined, uh, here. And we have the page path that is going to be determined. Okay, let's, uh, restart our server. Go to our blog. And here on top of each page you have this added, this page that is going to try to open this page, uh, in GitHub. So editing will be easier. Looks good. Let's save, uh, our changes. So add link to edit page. Okay. Now another powerful discovery feature that I really like using I inject is tags. So you can, uh, add tags to any blog post and, uh, find similar blog posts based on these, uh, tags. So, going to our blog at the moment. Um, here we have this, uh, post, it doesn't have any tags and neither does this one. So let's add a couple of tags. Let's say tags, Ruby and Rails. And this one will have just, uh, uh, tags, Ruby and uh, je. Okay. And uh, now we are going to add links to, uh, tag pages. So we click on the tag Ruby, and see all the posts for this tag. And we're going to do this with the uh, gem JL tag. Let's add this gem, uh, j tag tag to our gem file. Okay, bundle. Now, uh, We need to create this plugins XT dot IB file file. So, uh, create a new folder plugins, okay, I already created it. And I will have XT rrb file inside. I'll have to put this, uh, JL tag require, 'cause it's going to generate like new and a new part of the app that, uh, hasnt existed before. It's going to generate like new pages for all the tags. And in config via ml, I will say tag page, layout, tag page, tag page, directory tag. Okay, let's go to our config. Now, uh, we are going to add a layout page for our tags. So, uh, layouts, tech page, HTML. Uh, here in the example we have layout default, but we need to use layout base for, to actually work. And, uh, let's see if, uh, it now generates tech pages. So going to our app, uh, going to the site folder, we have a tag, a new folder named tag or could, we could name it tags. And have, we have a tag for Rails and Ruby, let's, uh, go to our local host and go to slash Ruby, um, tag slash Ruby. Okay. And here you see all the posts with the tag, Ruby. So here I have the posts. I click on tag rails, two posts, uh, yeah, one post with rails, two posts with the ruby, one post with Jekyll. So now we have, uh, basic tag navigation. And this on below here I think is a tag cloud. So a, the cloud like list of all, all the tags, uh, in the application. So these are both tagged with this tag. And these are like all the tags, let's name say, uh, will have a break and all tags. So this way we have this kind of basic discovery feature. Now let's try displaying the tags on a post page. I think I had an example here. So in the post layout, uh, layouts post before the article, uh, I will have a list of all the tags for this, uh, article. I will refresh. And here you see we have the edit this page and we have all the tags. Let's, uh, add a break, okay, or a row. Yeah. So edit this page tags, uh, the title. Maybe we want to put the tags under the title, but, uh, it's, uh, enough on us here. I will also remove the tags, uh, title because it should be self, uh, explanatory. So Ruby and Jakel are the two tags on this blog post. So I go to Ruby, I go to this one, one, and I see the two tags that are present here. Looks good. So we have basic tag, feature, um, use, uh, add tag pages, And I'll also add a link to the gem. Okay, wonderful. And, uh, another thing would be, uh, having a list of similar posts. So imagine you finished reading on this and on the bottom of everything, so that it is easier for users to find other interesting content. That would be a link to similar posts. Similar posts, again, based on tags. So we're going to use this GEM JL tag and related posts. Another gem based on tags. So I really encourage you to add tags to all logical posts. It'll help the discovery a lot. Um, okay, add this in config via ml. I'm going to also add the line here. Mm. And on the bottom of the post layout, I'm going to add this, uh, line. So after the comment section, now let's restart the server run bundle. Okay, and going back to our blog post here, you see after the comment section, we have this related post. And, uh, we have this welcome to JE post, why it's related, because it has, uh, tags in common. And on my other blog, it works like this. So here on the homepage, I have different blog posts, I have tags. I click on the tag, I see all the blog posts tag with this, uh, tag. Uh, and uh, I go down on any blog post. And on the end I have this, you might also like, and links to other blog posts. So it's another discovery feature for the user to stay captivated on your blog. Let's, uh, save our changes. So, um, similar posts at the end of post. Okay. Now another thing I would also add to the blog is anchor tags. So here is, uh, considerably long blog post. And, uh, what if you wanted to link to a specific part of the blog post, for example, to this head of tag. So I have this, uh, sign and I can, uh, have the URL to this specific anchor tag. It is very comfortable for long blog posts. So for this, we're going to add the A script. Um, here it is. So here's how I added anchor text to another app, and, uh, what do I need to do? So in includes folder, I need to add the anchor headings, html. Let's go Here we have Includes and Goins, HTML. I will, uh, go with this. That's quite a lot of code, but, uh, yeah, maybe it should be extracted into a gem. I think that a nice, uh, idea. And in the layout, in the default layout, I can add the, this anchor tag initializer. Let's see, our layouts, we don't have the default layout extracted. Maybe we can do just in the, uh, posts. So, uh, let's add this, uh, tag. And now I will go back to our, uh, app. I will again just start it just in case, 'cause I added this new includes. And, uh, let's, uh, add some head ins to our posts. So inside the post, uh, I will add the, another heading, save the post. Go to that, uh, post. And you see we have the ANCA tag. So, uh, wonderful. Let's save inches. Hey guys, I'm recording this as a last minute addition to the episode. So I noticed that when trying to deploy to, uh, production, we get, uh, an error in the build. And the error says that we don't have, uh, whips, uh, uh, installed. So we need to add the lib whips to our repository. And we need it because we have the GM GLE open graph image, I think. So, uh, you can do it by adding these lines into the jiggle vml, uh, command. So, uh, uh, app can install, uh, lifts. I added it, uh, here to the ci. And now deploy into production worked another problem that I, uh, encountered while trying to deploy to production. So, uh, if I open the blog post, you see it is rendered, uh, device, and, uh, it is because of, uh, us adding these, uh, uh, anchor tags. So, uh, to make the anchor tags work properly. Here, you see, we put this anchor headings, uh, in the post layout, but instead, we should put them in the base, uh, layout instead of the content. So going to the, uh, G mini or or j we are going to import the base, uh, layout. So layouts, mm, base, I'm going to add this file, uh, locally in our layouts. And, uh, I'm going to remove these anchor headings from our post. So I'm not saving yet. Let's look at our post. See, see, it is rendered twice as remove it. Now it's run advance. And in the base layout instead of the content, I'm going to replace the content with this, uh, anchor headings, h tml that they generated for our content that has the anchor head. So I'm removing the content here. Refreshing and, uh, use of the content is been rendered, uh, just once, but, uh, the anchor head work. So yeah, fixing some, uh, small box.