Netlify + Hugo で作った無料ブログがNetlify CMSでWeb上で編集可能に! 感無量 #Netlify

個人的にイチオシの静的サイトをホスティングしてくれるサービスNetlify

静的サイトジェネレーターってホスティング費用ゼロでメンテナンス費用もあまりかからなくて最高だが、投稿の作成や編集にいちいちgitを使わないといけないというイライラがあった。

Netlify CMS？　これはまさかこの課題を解決するものなのではないか？と思って試してみたらなんと、

まさに求めていたものであった。

そんな画期的なサービスがこのNetlify CMSなのだ。

static-site用の管理画面を生成するだけっちゃだけなんだけど(画期的でもない)、Netilifyで無料ホスティングできるというではないか。

感無量なテンションでよくわからない文章だが、実際に既存のHugoサイトに追加してみた。

やったこと

Hugoで作ったサイトをgithubにホスティング
上記のリポジトリをNetilifyにDeploy
https://github.com/settings/developers でnetlify用のOAuthアプリを生成
- Authorization callback URLにhttps://api.netlify.com/auth/doneを設定
Netlifyの管理画面のAccessにgithubのAuthentication providerを追加
以下のファイルを新規作成してcommit! push!
- Hugoのディレクトリ構成によっては作成場所が変わります

/content/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 stylesheets from your site here -->
  <link rel="stylesheet" href="https://unpkg.com/netlify-cms@^0.3.9/dist/cms.css" />
  <!-- Include a CMS specific stylesheet here -->

</head>
<body>
  <script src="https://unpkg.com/netlify-cms@^0.3.9/dist/cms.js"></script>
</body>
</html>

/content/admin/config.yml

backend:
  name: github
  repo: user/repo
  branch: master

media_folder: "static/img" # Folder where user uploaded files should go
public_folder: "img"

collections: # A list of collections the CMS should be able to edit
  - name: "post" # Used in routes, ie.: /admin/collections/:slug/edit
    label: "Post" # Used in the UI, ie.: "New Post"
    folder: "content/post" # The path to the folder where the documents are stored
    create: true # Allow users to create new documents in this collection
    fields: # The fields each document in this collection have
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Intro Blurb", name: "description", widget: "text"}
      - {label: "Image", name: "image", widget: "image", required: false}
      - {label: "Body", name: "body", widget: "markdown"}

(config.ymlが割りと色んな使い方ができるかもしれないとワクワクする)

上記のファイルを作ったら最後のgit push(そんなことはない)

公開されたサイトの/adminにアクセスしてgithubログインすると...

管理画面が使えるようになりました。

シンプルで割と誰でも使えそうなUIの感じがいいですね。

Netilify CMSをとりあえず試すだけなら

このページにDeploy to Netilifyボタンあるので、押して、OAuthとかの設定するだけで試せます。

自分はたまたまHugoつかってたけど、Hugo以外にも静的サイトジェネレータなら色々使えるようですね。