Ruby의 Ferrum gem으로 Jekyll 카드 생성 자동화

이제 이 블로그의 게시물에 대해 간단하고 루비 전용이며 자동화된 방법OpenGraph image previews을 만들었습니다. 이제 currently horrible 버전 0 모양을 반복하기만 하면 됩니다!

이전에는 스크린샷을 생성하기 위해 헤드리스 Chrome 인스턴스를 구동하는 javascript 호출Puppeteer을 사용하여 이 작업을 수행했을 것입니다. Mikkel Hartmann에는 이런 방식으로 작업하는 훌륭한 글이 있습니다.

이제 Ruby에는 Ferrum gem을 사용하여 Chrome을 제어하는 ​​멋진Chrome DevTools Protocol이 있으므로 JS의 필요성을 없앨 수 있습니다.

내가 한 방법

내 Jekyll 설치에는 내 _cards 디렉토리에 대한 _posts 심볼릭 링크가 있고 내 _config.yml에는 다음과 같은 defaults 섹션이 있습니다.

defaults:
  -
    scope:
      path: "_posts"
    values:
      layout: post  
  -
    scope:
      path: "_cards"
    values:
      layout: card

게시물이 개별 frontmatter에 layout: post를 지정하지 않도록 이렇게 해야 합니다. 그렇게 했다면 layout: card 컬렉션이 사용해야 하는 cards를 재정의하고 전체 페이지의 스크린샷으로 끝납니다.

이제 내 게시물을 미러링하지만 고유한 cards 레이아웃으로 렌더링되는 _layouts/cards.html collection이 있습니다. 나는 이것을 사용하여 게시물 이미지를 생성합니다.

기호 링크로 인해 _post와 같은 모든 _posts/2022-05-11-automating-jekyll-card-generation-with-ruby-ferrum.md 항목은 /cards/2022-05-11-automating-jekyll-card-generation-with-ruby-ferrum.html 또는 jekyll serve를 실행할 때 해당하는 jekyll build 페이지를 갖게 됩니다. 이미지를 생성하기 위해 Chrome이 가리키는 페이지는 바로 이 페이지입니다.

Ferrum 보석을 내Gemfile에 추가한 후 이 루비를 사용하여 내 게시물의 이미지를 만들 수 있습니다.

require "Rubygems"
require "Ferrum"

def generate_card(browser, card, png, options={})
  browser.go_to("http://localhost:4000/cards/#{card}")
  # see all the options here https://github.com/rubycdp/ferrum#screenshots
  browser.screenshot(path: "./images/cards/#{png}",
                     full: true,
                     # final image size is window_size x scale
                     scale: 2)
end

browser = Ferrum::Browser.new(window_size: [800, 418])

# Check what cards we need to make
Dir.glob("_posts/*").each do |post|

  post = File.basename(post, ".md")
  png  = post + ".png"
  card = post + ".html"

  generate_card(browser, card, png) unless File.exists?("./images/cards/#{png}")
end

이렇게 하면 로컬 버전의 jekyll 사이트를 사용하여 스크린샷을 생성합니다. 실행 중인지 확인하고 다른 많은 작업을 위해 Makefile 을 사용합니다. 단순화된 버전은 다음과 같습니다.

default: deploy

clean-site:
# Do this step to ensure we don't accidentally publish drafts etc
 rm -rf _site

# JEKYLL_ENV=production to avoid localhost urls in your jekyll-seo-tag links
serve-site:
     JEKYLL_ENV=production jekyll serve & echo $$! > /tmp/jekyll.pid && sleep 15

build-cards: serve-site
    ruby ./scripts/generate-cards.rb
    kill -9 $(shell cat /tmp/jekyll.pid)
    rm -f /tmp/jekyll.pid

deploy: clean-site build-cards
    rsync --progress --delete -a -e ssh  _site/ gooby.org:~/jay.gooby.org/public

deploy 레시피는 사이트를 정리하고 제공하며 ruby ​​스크립트를 사용하여 이미지를 생성한 다음 rsync를 사용하여 내 원격 호스트에 사이트를 복사하여 사이트를 "배포"합니다. 이것이 기본 레시피이기 때문에 프로젝트의 루트에서 make를 호출하여 사이트를 활성화할 수 있습니다.