A Jekyll plugin to automatically generate open graph images for posts.
Add this line to your site's Gemfile:
gem 'jekyll-og-image'
And then add this line to your site's _config.yml
:
plugins:
- jekyll-seo-tag
- jekyll-og-image
This plugin requires libvips
to be installed. If you are using GitHub Pages to host your Jekyll site, don't forget to install libvips
before running jekyll build
. See the example below.
jobs:
build:
needs:
- lint
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Ruby
uses: ruby/setup-ruby@v1
with:
ruby-version: .ruby-version
bundler-cache: true
- name: Set Node.js 20.x
uses: actions/setup-node@v3
with:
node-version: 20.x
- name: Run install
uses: borales/actions-yarn@v4
with:
cmd: install
- name: Update apt
env:
DEBIAN_FRONTEND: noninteractive
run: sudo apt-get update -qq
- name: Install libvips
env:
DEBIAN_FRONTEND: noninteractive
run: sudo apt-get install --fix-missing libvips
- name: Setup Pages
id: pages
uses: actions/configure-pages@v5
- name: Build with Jekyll
run: ./bin/jekyll build --baseurl "${{ steps.pages.outputs.base_path }}"
env:
JEKYLL_ENV: production
- name: Upload artifact
# Automatically uploads an artifact from the './_site' directory by default
uses: actions/upload-pages-artifact@v3
Jekyll OG Image works together with jekyll-seo-tag plugin. It automatically generates open graph images for posts and inserts them into the posts metadata.
The plugin can be configured in the _config.yml
file or in the post's front matter.
The following configuration options are available:
collections
- An array specifying which types of collections to generate images for. Supports "posts"
, "pages"
, and the names of any custom collections. Default: ["posts"]
output_dir
– The directory where the generated images will be saved. Images will be placed in subdirectories named after their collection type (e.g., assets/images/og/posts
, assets/images/og/pages
). Default: assets/images/og
force
– If set to true
, the plugin will generate an image for every document, even if the document already has an image. Default: false
verbose
– If set to true
, the plugin will output additional information about the image generation process. Default: false
skip_drafts
– If set to true
, the plugin will skip post drafts when generating images. Default: true
canvas
– The canvas configuration options:
background_color
– The background color of the canvas. Default: #FFFFFF
background_image
– The background image of the canvas. Default: nil
width
– The width of the generated image in pixels. Default: 1200
height
– The height of the generated image in pixels. Default: 600
header
– The header configuration options:
font_family
– The font family of the header text. Default: Helvetica, Bold
color
– The color of the header text. Default: #2f313d
content
– The content configuration options:
font_family
– The font family of the content text. Default: Helvetica, Regular
color
– The color of the content text. Default: #535358
border_bottom
– The border bottom configuration options:
width
– The width of the border bottom. Default: 20
fill
– The array of colors to fill the border bottom. Default: ["#000000"]
domain
– The domain name to use in the image. Default: nil
image
– Path to the image to use as the logo. Default: nil
Configuration can be defined on the site level or on the post level.
For a side wide level configuration, edit your _config.yml
, for a post level configuration, edit the post's front matter.
# _config.yml
og_image:
collections: ["posts", "pages"]
output_dir: "assets/images/og"
domain: "igor.works"
border_bottom:
width: 20
fill:
- "#4285F4"
# _config.yml
og_image:
output_dir: "assets/images/og"
image: "/assets/images/igor.jpeg"
domain: "igor.works"
border_bottom:
width: 20
fill:
- "#820C02"
- "#A91401"
- "#D51F06"
- "#DE3F24"
- "#EDA895"
# _config.yml
og_image:
output_dir: "/assets/og"
image: "/assets/images/igor.jpeg"
canvas:
background_color: "#F9E065"
header:
font_family: "Roboto, Bold"
color: "#333333"
content:
font_family: "Roboto, Regular"
color: "#333333"
force: false
domain: "igor.works"
border_bottom:
width: 50
fill:
- "#002B7F"
- "#FCD116"
- "#CE1126"
# _config.yml
og_image:
output_dir: "/assets/og"
image: "/assets/images/igor.jpeg"
header:
font_family: "Roboto, Bold"
color: "#333333"
content:
font_family: "Roboto, Bold"
color: "#333333"
force: false
domain: "igor.works"
# _posts/2024-02-15-traefik-tunning-for-rails-applications-part-1.md
---
title: Traefik Tuning for Rails Applications (part 1)
layout: post
tags:
- Rails
- Traefik
- Kamal
og_image:
canvas:
background_image: "/assets/images/bc_3.jpg"
git checkout -b my-new-feature
)git commit -am 'Add some feature'
)git push origin my-new-feature
)The gem is available as open source under the terms of the MIT License.