Jekyllの紹介と作業メモ

これは「フィヨルドブートキャンプ Part2 Advent Calendar 2020」10日目の記事です！Part1はこちら。

フィヨルドブートキャンプに入って３ヶ月くらい経ちました。こんにちは、Misosoupです。そういえば、みそすーぷって読みにくいかなと思っているのですが、Misosoupは英語表記（？）なのでみそしるでも。ちなみに元のあだ名は「みそ」で、最近友人に「しる」って呼ばれました。よろしくお願いします。

フィヨルドブートキャンプではアウトプットのためにブログを書こう！ていうのがあります。このブログは独学期間に勉強のために作ったもので、せっかくだから引き続き使いたかったのですが、コメント欄がないとかGitがよくわからんとか、いろいろと力不足で放置していました。最近がんばってやっと準備できたかなと思うので、こちらでアウトプットしていけたらなーと思っています。

今回はこのブログを作るのに使ったツールの簡単な紹介と、フィヨルドのアウトプット用に使用できるように追加した機能の作業メモを書きました。

ツールの紹介

このブログは、JekyllというRuby製の静的サイトジェネレーターを使い、GitHub Pagesで公開していました。今はGitHubのリポジトリをNetlifyで公開する形にしています。Netlifyのことはこちらで書きました。

Jekyllとは？

Jekyllはヘッダーとかのパーツを共通化して書けて、HTMLを生成してくれるツールで、データベースを使わないブログとかウェブページが作れます。記事はマークダウンでかけます。

Rubyの開発環境があれば、Jekyllのgemをインストールして、以下のコマンドを実行するだけで、my-siteディレクトリにブログとして構成されたファイルたちが勝手に出来上がります。

jekyll new my-site

デザインはデフォルトでminimaというテーマが使われています。

jekyll-minima

一度buildしたときのディレクトリ構成は以下のような感じで、_postsディレクトリにマークダウンでかいた記事を入れていくと、_siteディレクトリにhtmlファイルとして生成されるという感じです。あとは_config.ymlでブログの名前とか自分の情報を書き換えていけばとりあえず形になります。

my-site
├── 404.html
├── Gemfile
├── Gemfile.lock
├── _config.yml
├── _posts
│   └── 2020-12-03-welcome-to-jekyll.markdown
├── _site
│   ├── 404.html
│   ├── about
│   │   └── index.html
│   ├── assets
│   │   ├── main.css
│   │   ├── main.css.map
│   │   └── minima-social-icons.svg
│   ├── feed.xml
│   ├── index.html
│   └── jekyll
│       └── update
│           └── 2020
│               └── 12
│                   └── 03
│                       └── welcome-to-jekyll.html
├── about.markdown
└── index.markdown

また、テーマはテーマを配布しているサイトがいくつもあり、それを使うこともできますし、このデフォルトテーマを少しずつアレンジしてもいいし、jekyll new-themeというコマンドを使うと、全て空の最小限のディレクトリ構成で立ち上がるので自分で一からテーマを書くこともできます（私はこれでやったので無限に時間がかかりましたが…）。

静的サイトジェネレーター自体はいろいろな種類があるみたいですが、当時ぺーの私が出来そうなのがこれしかなかったのでJekyllを選択しました…。作った頃は全くRubyは知らなかったので、Rubyあんまり知らなくてもなんとかできる…と思います（ほんとか？）。gemくらいは知っときたかったけどな。

今回確認したらデフォルトテーマではfeedは元から入ってるし簡単な設定でコメント欄もonにできるようになってるみたい…。くっ…。

GitHub Pagesとは？

GitHub Pagesはリポジトリにpushするだけで無料でサイトを公開できるサービスです。独自ドメインも使えるよ。

詳しくは公式サイトをみていただきたいのですが、静的ファイルを置いたリポジトリのSettingsのGiHub Pagesのところでブランチを指定するとそれでもう公開できてしまいます。JekyllはGitHub Pagesでサポートされているので、さっきのmy-siteディレクトリをリポジトリにおいてその設定をすればいいです。

私はとにかく何か物を作ってみたくてこのブログを作りました。何か作って公開してみたいなーって思ったら、これらのツールでちょっと遊んでみても良いのでは？という簡単な紹介でした。Gitに草も生えるよ。でもそれなりにちゃんとやろうと思うといろいろと調べないといけないので時間は無限に溶けます。ははは。

以下はコメント機能とfeed機能を追加したときの主に自分用の作業のメモです。しらんよという方はとばしてください〜。

Disqusによるコメント機能の追加

Jekyllは静的ページしか作れないので、本来はコメント機能とかは実装できないのですけど、今回はDisqusというサービスを使って簡単に機能を追加しました。フィヨルドのブログでも使ってますかね？Disqusは書き込む人も何かしらのアカウントがないとできないようですが、逆にそれくらいの方が良いんじゃないかな？と思いました。

Disqusの登録

まずはトップページの「GET STARTED」から、会員登録します。「I want to install Disqus on my site」を選択。必要情報を入力します。プランは今回Basicを選択しました。利用するプラットフォームでJekyllを選択します。すると、そのプラットフォームごとの設定方法の説明がでてきますので、それを参考にページの設定をします。

ページの設定

Disqusはページごとにコメント機能を追加するかどうか設定できるみたいです。機能をつけたいpostページのymlフロントマターに以下のように書けば設定されます。

---
comments: true
---

あとはコメント機能を入れたいレイアウトファイルのhtmlに指定されたコードをコピペすればよい。

{% if page.comments != false %}
  <div id="disqus_thread"></div>
  <script>

    /**
    *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
    *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
    /*
    var disqus_config = function () {
    this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
    this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    };
    */
    (function() { // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');
    s.src = 'この辺がオリジナルになっているはず';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
    })();
  </script>
  <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
{% endif %}

公式サイトでは、{% if page.comments %}と{% endif %}で囲んでね！とありますが、いちいちフロントマターに書くのがめんどくさいので、{% if page.comments != false %}にしてみました。これでfalseじゃなければ常に追加されるはず。

コメントアウトされている部分を使うと、テーマを配布したいときなどにユーザーが設定ファイルに必要な項目を書き込むだけで一括設定できるようにしとけるみたいです。公式テーマのコード見たらそうなっていた。

これでコメント機能が使えるようになった！簡単だ！Disqusでこんな設定しておくといいよみたいなのがありましたら教えてください〜。

Feed機能の追加

Feedって実を言うと使ったことがなかったんですが、この前「Webを支える技術」も読んだことだし、機能を付けてみることにしました。そこで、まずはユーザーとなるべくfeedlyに登録してみました。Jekyllへの機能追加は公式サイトと公式テーマとかを参考に進めます。

gemのインストール

今回はjekyll-feedっていうgemを使いました。Gemfileに書いてインストール。

設定ファイルへの書き込み

_config.ymlに以下の情報を書き加えます。

plugins:
  - jekyll-feed

サイトのURLと著者情報が必要みたいなので一応これも_config.ymlに書いてあるか確認しておきます。

url: https://mssp160.netlify.app
author:
  name: Misosoup
  email: hotmisosoup160@gmail.com

headタグ内への書き込み

headタグ内にフィードのタグ{% feed_meta %}を追加します。例えばこんな感じ。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
    <link rel="stylesheet" href="/assets/css/styles.css">
    {% feed_meta %}
  </head>
  <body>
    {{ content }}
  </body>
</html>

最後にbuild

公開する前にjekyll buildします。普段はjekyll serveでローカルでページを確認しながら作ってそのままあげてしまいますが、そうするとfeed.xmlファイル内のドメインが、「http://localhost:4000」になっちゃうみたいです。ただ、Netlifyを使っていればそこでbuildされるのでよい。

buildすると_siteフォルダにfeed.xmlができていて、headのリンクはこんな感じでできています。

<link type="application/atom+xml" rel="alternate" href="https://mssp160.netlify.app/feed.xml" title="MSSP" />

アイコンの作成

ついでにヘッダーにfontawesomeでフィードアイコンを作ってみました。これって目印なだけなのかな？

<li class="social-link__item">
  <a href="{{ 'feed.xml' | relative_url }}">
    <i class="fas fa-rss"></i>
  </a>
</li>

最後にfeedlyで確認したら一応できるようになっていました！feedlyのリンクを作ることもできるみたいですね〜。

おわりに

はい、お役立ち情報というより自分のメモですいませんでした。来年はちょっとずつこういうメモをこっちでも書いていきたいなという気持ちです。日記とか全然書かないので初めはすごく違和感があったのですが、フィヨルドの日報でだいぶ慣れてきたような気がしています。あと、意外と何したか覚えてないのでたまに過去のメモ見るなって思って。書いとこ、って思いました。

このブログでまだしたいのは、表のCSSを書いてないので（えっ）それと、読んだ本リストにopenBDていうAPIを使ってるんですが、技術書の情報が乏しいような気がするのでなんとかしたいなぁと思っています。記事が増えてきたらTagページもなんとかせな…。僕はまだあんまりわかってないのですが、Rubyがもっとわかると自分でもっといじれることが増えるんだろうなーと思います。