Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

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

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

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

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

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

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

やったこと

  1. Hugoで作ったサイトをgithubにホスティング
  2. 上記のリポジトリをNetilifyにDeploy
  3. https://github.com/settings/developers でnetlify用のOAuthアプリを生成
    • Authorization callback URLにhttps://api.netlify.com/auth/doneを設定
  4. Netlifyの管理画面のAccessにgithubのAuthentication providerを追加
  5. 以下のファイルを新規作成して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ログインすると...

image

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

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

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

https://www.netlifycms.org/docs/test-drive/

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

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away