herohoro / easy-notion-blog-02

Easy to start your Notion Blog with Official API

English | 日本語

easy-notion-blog

Easy to start your blog.

You can write on your Notion.

Screenshot

Demo

https://easy-notion-blog-otoyo.vercel.app/blog

Users' blogs

• techPeck
• チャベログ
• オマツリ
• 八朔 Blog
• shmn7iii
• nitaking.dev (Contributor)
• www.gadge7.net
• herohoro ブログ (Contributor)
• アルパカログ (Owner)

Features

• Very fast!
• Write on the Notion
• Using official API
• Full customization

Requirements

• Notion account
• Vercel account
• Git

(For your customization)

• Node.js v14 or higher
• Yarn

1. Star this repo 😉
   • It makes me motivative!
2. Duplicate the template into your Notion.
3. Note the part of URL https://notion.so/your-account/<HERE>?v=xxxx as DATABASE_ID
   • ex) 158bd90116004cd19aca26ad88cb5c07
   • ⚠️ CAUTION: ?v=NOT_THIS_VALUE. Use ahead strings.
4. Create an integration and note "Internal Integration Token" as NOTION_API_SECRET
5. Share a database with your integration at the Notion database page
6. Go to vercel.com and log-in
7. Create new project by importing this repository otoyo/easy-notion-blog (Skip creating a team)
8. In "Configure Project", open "Environment Variables" settings and set NOTION_API_SECRET and DATABASE_ID
9. Your Notion Blog will be published after deploy

How to customize

Fork this repo into your GitHub account and develop.

# Install dependencies
yarn install

# Start local server at localhost:3000
yarn dev

Open http://localhost:3000 in your browser.

Entries without Published are also displayed for preview in local. But no Slug entries are not displayed.

Press Ctrl+C to stop local server in the terminal.

How to deploy to Google Cloud Run

See the wiki.

Lint & Test

yarn lint
yarn test

Optional settings

• favicon
  • Place favicon.ico under public/ directory
• Google Analytics 4
  • Set your tracking ID in lib/gtag.js

Twitter community

• easy-notion-blog

Contribution

Pull requests are welcome.

---

easy-notion-blog is based on ijjk/notion-blog and otoyo/notion-blog

easy-notion-blog-02's Issues

VSCode 拡張機能

Pretter

【自動整形】VSCodeでPrettierを使う方法【設定必要です】

他の人のリポジトリにお邪魔するときTips

Merge後にローカルmainブランチを最新にする

git pull origin main

いつもだと同期ボタンを押せば最新になってたけど.
お邪魔するときはpullしないといけないみたい

ブログの骨組みを解読したい

blog learn

1. 自走できるように公式リファレンスをベースに要素の組み合わせる方法を整理する👉記事化
2. 画面遷移についても整理できたらいいな👉Nextjs特有!?
3. 外データの参照はNotionAPI公式リファレンスをもとに整理していく予定👉記事化する計画

---

【新たな試み】

• code sandboxで作ってみる
  　- embedしたいからbranch分けして工程を目次化する???
  　- push commit分けでもいいけど....

GitHubの複数アカウントを切り替える

Visual Studio CodeでGitHubの複数アカウントを使い分ける

Contributor_メモリー

ひょいなことからイラストを使ってもらえることになったので、
嬉しかったことをスクショにして残していくことにしましたヽ(=´▽`=)ﾉ

yarn の開発環境を自分で用意する

セットアップからコマンドラインの説明まで分かりやすく解説されてる
【JavaScriptの応用】パッケージマネージャー -Yarn

Brunch切り替え/ 誤爆commit修正/Brunch作成...

mastarブランチから....

git checkout -b 作成したいブランチ名

これでローカルBrunchを用意できる

public pushの時にremoteブランチをもとのmasterブランチにすればいい？？

デフォルトOgImageを設定する

• アルパカさんのコード
  https://github.com/otoyo/notion-blog/blob/93213ddbaea359e5177e4ef18bab4c047e20444d/src/components/document-head.tsx#L44

Notion Tips_Formula

日付に曜日をまとめて表示させる

参考：Notion で習慣トラッカーを作成する
解説動画で扱った_Notion pageテンプレート

created-image

作ってPRできた画像、作ったはいいけどPRするまでもなかった画像...そんなデータをあげていく。

試し書き_Mermaidギャラリー

サンプル１

  graph TD;
      A-->B;
      A-->C;
      B-->D;
      C-->D;

  graph TD;
      A-->B;
      A-->C;
      B-->D;
      C-->D;

Include diagrams in your Markdown files with Mermaid_GitHub公式Blog

勉強用リポジトリを作成する_コマンドonly

progate 講座(無料)で学んだことを実践する。

• Git
• Command Line

ブランチ発行ボタンをおしてぐるぐるしまくる

GitHub_VSCode上でプルやプッシュをする　
https://note.com/ym202110/n/ncf0080e7cfed

全imageをImageに統一したい

目標

• サムネは余白のない(フィットした)表示にしたい。
• 記事内imageブロックの余白を違和感ない表示にしたい。

現状

【サムネ】

• サムネはサイズを統一して収納している
• サムネは表示させる場所によってクラス名でサイズ変更している
• 画面サイズによっても変更している

【記事内imageブロック】

• 高さをいろいろ設定して余白が生まれすぎない値を探ったが縦長or横長のimageどちらかを優先するしかない

本家IssueをLINE通知させたい

目的

アルパカさんが開発に専念できるようにする。
質問に答えることで1upする。

経緯

Issueに気づけない。
数日経過してるのざら。

他_GitHub 運用Tips

Fork元とのやりとりでGitHub Issueで記録してきたからこそ便利だなと感じたことを記録しておく＼(^o^)／

本家Issueをnotionへ反映させてzapierを卒業させたい

zapier有料は高いので自力でやれることはやっていく

アルパカ先生へ_いいねボタンが本番環境では反応しない件

経緯

#37 による不具合

✅　開発環境ではNotionDBのLike列に値が入る
❌　本番環境では入らない

---

本題

Vercel functionの詳細ログです

何卒お願いしますm(_ _)m

リリース調整でのエラー集

Install mermaid

npm install mermaid

本家へPRする

PR用にbranchを用意して申請するとなぜか本家との差分全てのcommitが行ってしまう。
otoyo#57

「main」branchに切り替えたらそれは本家と一致したcommitだったので

1. 申請したいcommitを追加
2. PRタブから本家mainと分家mainとをcompereさせる
3. PR送信

でなんとかできた。

メインTagを600px以下時２カラム固定にしたい

目的

メインTagが増えても見やすくするため

リリースコードで「なるほど」と思ったcommit

otoyo@27e43cd

共通部分を先に記述して、差分を追加していく。

ローカル保存版OgImageがブログ上で表示されない_他は表示確認済み

otoyo#91
と同じ内容。

サムネを節約する_Vercel Limit 対策

サムネを保存して使い回す仕様にアルパカ先生直々にPRしてくれた。

commit

• 40b0573
• 37e7fc7

Merge

• #14
• #13