かすみん日記

暇なときに何か喋ります

Jekyll + Netlify CMSでブログ構築

Netlify CMS Web Jekyll

静的サイトジェネレータJekyllとホスティングサービスGitHub Pagesを利用して、サークルのホームページを公開している。

でも引き継ぎのことを考えると、非エンジニアにGitやらJekyllやらを使えというのはさすがに酷な気がして、やっぱりWord Pressみたいな管理画面（CMS）を用意したいということで、今回はNetlify CMSというものを試してみた。

目次

前提

GitHubとJekyllに関する基本的な知識はあるものとする。

Jekyllで作ったサイトをGitHub Pagesで公開できるレベルであれば十分。

準備

まず、GitHubとNetlifyのアカウントを作成しておく：

Jekyllのインストール

Rubyの環境を構築済みであれば、下記コマンドでインストールできる；

gem install jekyll

なんのこっちゃわからん人は公式docを参照。

例えばmy-siteという名前でサイトを作る；

jekyll new my-site

ディレクトリ移動しておく；

cd my-site

Gitリポジトリの作成

GitHubに飛んで、適当な名前でリポジトリを作成する。

以下の作業はデスクトップアプリを使ってやっても良い。 というかむしろそっちでやった方が良い（理由は後述）。

下記コマンドを順に打って、GitHubにプッシュする；

## 初期化
git init

## ステージング
git add .

## コミット
git commit -m "First commit"

## リモートリポジトリを登録
git remote add origin https://github.com/[user name]/[repo name].git

## チェックアウト
git branch -M main

## プッシュ
git push -u origin main

pushするとユーザー名とパスワードを聞かれるが、正しく入力してもうまくいかないハズ。

ここを参考に、トークンというものを作成して、パスワードの代わりにトークンを入力してください。

デスクトップアプリを使っていればこの苦労はないハズ。

デプロイ

Netlifyにアクセス。

ログインが済んでいればhttps://app.netlify.com/teams/[user name]/overviewというURLに飛ばされるはず。

「New site from Git」というボタンをクリックする。

「GitHub」のボタンをクリックして、アカウント認証する。

そうしたらリポジトリ一覧が表示されるので、さっき作ったリポジトリを選択する。

jekyllのサイトであることが自動で判定されるので、そのまま「Deploy site」をクリック。

デプロイが始まるのでしばらく待つ（3分ぐらい？）。

「Site deploy in progress」となっているところがサイトのURLになったらデプロイ完了。

そのURLからサイトにアクセスできる。

f:id:geniusium:20211007185243p:plain

管理画面を導入（Netlify CMS）

今までの作業ではただJekyllで作ったサイトをNetlifyでデプロイしただけ。

これから管理画面（CMS）を導入する。

さっき作ったmy-site/の中に、ファイルadmin/index.htmlを作成し、以下の内容をコピペする；

<!-- admin/index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Content Manager</title>
    <!-- Include the identity widget -->
    <script src="https://identity.netlify.com/v1/netlify-identity-widget.js" type="text/javascript"></script>
  </head>
  <body>
    <!-- Include the script that builds the page and powers Netlify CMS -->
    <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
  </body>
</html>

もうひとつファイルadmin/config.ymlを作成して、下記内容をコピペする；

# config.yml

backend:
  name: git-gateway
  branch: main # Branch to update (optional; defaults to master)
media_folder: 'assets/uploads'
collections:
  - name: 'blog'
    label: 'Blog'
    folder: '_posts/'
    create: true
    slug: '{{year}}-{{month}}-{{day}}-{{slug}}'
    editor:
      preview: false
    fields:
      - { label: 'Layout', name: 'layout', widget: 'hidden', default: 'post' }
      - { label: 'Title', name: 'title', widget: 'string' }
      - { label: 'Publish Date', name: 'date', widget: 'datetime' }
      - { label: 'Body', name: 'body', widget: 'markdown' }

変更をリモートに反映；

git add .
git commit -m "Create CMS"
git push -u origin

GitHubへプッシュが完了すると、自動でNetlifyの方でビルドが開始される。

デプロイを待っている間に、管理画面を使うための設定を行う。

Netlifyのページから「Site settings」タブの「Identity」を開いて「Enable Identity」をクリック。

このままでは誰でも自由にサインアップしてサイトの編集ができるようになってしまうので、サインアップできるユーザを招待限定にする。

「Site settings」タブの「Identity」を開いて、少しスクロールすると「Registration」の節が見えてくるので、そこにある「Registration preferences」の「Edit settings」をクリック。

f:id:geniusium:20211007172203p:plain

「Registration」を「Invite only」に変更して「Save」ボタンをクリック。

f:id:geniusium:20211007172433p:plain

また、そのまま下へスクロールして「Services」の「Git Gateway」というところの「Enable Git Gateway」ボタンをクリック。

これで管理画面にアクセスできるようになった。

まだログインできるユーザを登録していないので、自分をセルフで招待する。

「Identity」タブを開いて「Invite users」ボタンをクリック。

表示されたポップアップの枠内にメールアドレスを入力して「Send」ボタンをクリック。

そのアドレスに招待メールが届くので、「Accept the invite」のリンクをクリック。

するとデプロイされたサイトが表示されるが、URLが間違っているので次のように修正する。

ブラウザでURLを見てみるとサイトのURL/#invite_token=...みたいな感じなっていると思うので、間にadminを挿入してサイトのURL/admin#invite_token=...のようになるようにURLを修正して開き直す。

あとはパスワードを入力して、サインアップを完了する。

f:id:geniusium:20211007173529p:plain

そうすれば、管理画面が表示されるはず。

f:id:geniusium:20211007174319p:plain

次からは、サイトのURL/adminを開くことで管理画面にアクセスできる。

記事の作成

管理画面の「Blog」というところで、「New Blog」をクリックすれば新しい記事を作成できる。

「TITLE」には記事のタイトルを、「BODY」には記事の本文を入力し、「Publish」＞「Publish now」で記事を公開できる。

自動でgit pushされ、デプロイも自動で始まる。

※バグ：

もうお気付きかと思うが、「BODY」で日本語入力がぶっ壊れている。

これはNetlify CMSのバグで、issueが出てから1年くらい放置されている。

あとで応急処置の方法を紹介する。

ともかく、デプロイを待ってサイトのURLにアクセスすると、さっき作った新しい記事が反映されているはず。

記事に画像を使いたい場合は、管理画面上部の「Media」をクリックして、「Upload」ボタンをクリックして自分のPCから画像ファイルを選択する。

※注意：画像のファイル名に日本語とかの非アスキー文字が含まれていると、公開するサイト上でうまく画像が表示されないっぽい。適切な名前に変更してからアップロードすること。

アップロードしたファイルを利用するには、画像をクリックして「Copy Path」ボタンを押すと画像ファイルへのパスがクリップボードに保存されるので、それを記事中にペーストしてやればいい。

デフォルトだと/assets/uploads/以下に画像ファイルが配置される。

日本語入力できない問題

どうやらマークダウン（リッチテキスト）入力のときだけおかしくなる模様。

マークダウンではなく普通のテキスト入力に変更すればこのバグは見えなくなるっぽい。

つまり、admin/config.ymlの中でwidget: 'markdown'と書いているところをwidget: 'text'に変更すればよい。

おわりに

一応これでJekyll + Netlify CMSが実現できたが、日本語入力のバグとか管理画面のモバイル非対応とか度し難いことがいくつかあるので、実際にこれを使ってサイト運用するかはまだ未定。

microCMSを推奨する動きが見られるが、こっちはAPIベースなので面倒くさそう。

他にもCMSはいろいろあるみたいなのでもう少し調べるかな（CMS一覧？）。

あとJekyllで管理画面を使いたいだけなのであればJekyll Adminというプラグインがあるのでこれで良い気がする。

ということで最後まで読んだ人はお疲れさまです。

それではまた。

参考

qiita.com

www.netlify.com

www.netlifycms.org

blog.saladbowl.work