見出し画像

(非エンジニア向け) Notion Blog でブログを開設する方法(2021年4月版)

💡 この記事は、1年ほど前に書いた こちら の記事のリライトになります(Vercel の UI が変わったりなどして、情報が古くなってしまったため、2021年4月時点の最新情報で書き直しました。)

この記事では、Notion Blog という Notion のデータベースをブログ化する技術について解説したいと思います。ざっくりいうと、Notion 上で書いた文章が、そのままブログ記事として、世の中に公開されるような仕組みのことです。

画像2

僕の Notion 上のブログ・データベース

コードもオープンソースで公開されているので、コードを編集することで自由にカスタマイズすることができます。Notion Blog のコア部分だけ使用し、デザインやその他のカスタマイズは自由自在です。独自ドメインを当てて、自分のメディアにすることなんかも可能です。

僕のポートフォリオサイト兼ブログ https://blog.35d.jp/ も、Notion Blog で出来ていて、ゴリゴリにカスタマイズすると、こんなのが作れるようになります。

画像1

僕のポートフォリオサイト兼ブログ https://blog.35d.jp/

そんな便利な Notion Blog なのですが、

・ドキュメントが英語
・GitHub 連携が必要
・ちゃんとカスタマイズしようとするとコードを書かなければならない

などといった理由で、非エンジニアの方には少し開設までのハードルが高さがあるなと、僕自身感じています。

ということで、僕が Notion Blog の運用を通して得たノウハウを、なるべく丁寧に解説して非エンジニアの方にもぜひ使ってもらえたらなと思ってこの記事を書き始めました。今回の記事では Notion Blog の概要と、ブログの開設までの手順を記事化にしてみたいと思います。

💡 なるべく非エンジニアの方でもスムーズに進められるように、全ての画面のスクリーンショットと画面の操作の解説を付けました。

記事内で分かりづらい部分、詰まってしまった部分がありましたら Twitter で DM いただければ最大限サポートするのでお気軽に(@___35d)までご連絡ください。

🐈🐈🐈

Notion Blog の仕組みの説明

Notion Blog はバックエンド部分が Notion で、フロントエンド部分が Next.js という構成で作られた CMS(コンテンツマネジメントシステム) です。Notion 上で記事を書くと、Next.js が Notion 上の書いた記事を読み込みに行き、読み込んだ結果をうまくパース(解析)してレンダリング(画面上に表示)されるという仕組みです。Next.js を開発している企業 Vercel (旧 Zeit)のエンジニア ijjk さん によって制作されたオープンソース・プロジェクトです。

画像3

Notion Blog の GitHub 画面

ブログを開設するだけでしたら、このあたりの仕組みは完全には理解しなくても大丈夫なので、ふわっとそういうもんなんだなとわかっていれば大丈夫だと思います。

この記事では、ブログを開設することをゴールとしたいと思います。

⚠ Notion Blog は記載のとおり、有志によって作られた「非公式」プロジェクトです。Notion 本体の仕様変更に伴い、動かなくなる可能性もあるのでそのあたりはご自身の責任でお使いくださいませ(僕は1年以上使っていてダイナミックに動かなくなったことは今の所ありません)

🐈🐈🐈

開設手順 

では、実際に開設する手順を説明していきたいと思います(以下有料です)

💁‍♀️ (少しマニアックな)Notion の使い方まとめマガジン というマガジンを連載しています。月額500円で週に一度 Notion に関する情報が更新されます。記事をご購入いただくよりマガジン登録をしていただく方がお得な場合があるのでぜひご検討ください。

🐈🐈🐈

この続きをみるには

この続き: 4,616文字 / 画像19枚
記事を購入する

(非エンジニア向け) Notion Blog でブログを開設する方法(2021年4月版)

35d

480円

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
Notion とタスク管理が好きな Web エンジニアです。 Notion を使ったタスク管理・ライフログについて発信します。