.png%3Ftable%3Dblock%26id%3Dc175df5d-538b-4b92-8ad1-d1f3ad0f2d7c%26cache%3Dv2&w=3840&q=75)
最初にまとめ🫖
- 公開リポジトリをクローン（transitive-bullshitに感謝！🤟）🧑💻
site.config.tsを設定🧑💻
npm run deployを実行🧑💻
Notionの設定方法、リポジトリ内の設定、運営する上での注意事項なども残していきます。
例1) Google Analyticsの導入はどうするか？
例2) 公開リポジトリみたいにサイト上で表示するには？
などなど
読者は、エンジニア経験がちょっとでもある方を想定しています。
プログラミングを全く触ったことが無い方は作り上げるの大変かもです。すいません🙇♂️
このブログの何が良いか？💘
- Notion上で編集すればそのまま反映されて公開できます。
- 厳密には異なったり実現できないNotionのデータベースがありますが、ほぼほぼ同じUIでブログ公開できるので、プレビューして確認する手間が減る。
- 従来のブログ記事作成と比べてブログ用の画像を選ぶ手間がほとんど無い。
- Vercelのライブラリで自動生成してくれる。
- Notionの気持ちの良い操作体験のまま作成できる。
- WordPressのブロック作成をポチポチせずにNotionのショートカットキー
/からゴリゴリ簡単に作成できちゃう。
つまり、最＆高。
へ？Notionページをそのまま公開すれば良くない？
とも思いましたが、
- Analyticsを入れ込むことができて自分のモチベーションになる。
- SNSシェアがOGP生成してくれるので楽。
- 自分でコードいじって拡張したり試したりできる余地があるのでエンジニアとしても楽しめる。
といった感じでやってみました。
公開リポジトリをクローン🧑💻
まずはリポジトリを自分の環境に持ってきて、パッケージ関連をインストールします。載せるのもあれですが一応。
$ cd ~ $ git clone git@github.com:transitive-bullshit/nextjs-notion-starter-kit.git $ cd nextjs-notion-starter-kit $ npm install
ローカルで起動はするには
$ npm ruv dev
このあたりは、
readme.md にも書いてあります。site.config.tsを設定🧑💻
site.config.ts を自身のNotion環境やお好みに合わせて設定する必要があります。私が特に設定していない箇所は割愛しています。
import { siteConfig } from './lib/site-config' export default siteConfig({ // ブログ化するトップページのidを埋め込みます。 // idはブラウザからnotionへログインしてページを表示した時のパスです。 rootNotionPageId: 'entsuka-log-9b29494b22d44554a78cf409bf15f486', // ここでの設定はブログにデフォルトで表示されるものだったりです。 // 実際に公開する時のdomainは自分で取得する必要があります。 name: 'entsuka-log', domain: 'entsuka-log.site', author: 'entsuka', // トップページで表示するdescriptionタグの内容です。 description: '地方製造業⚙️ → 都内ITベンチャー → 地方フルリモートWEBエンジニア | 30代からベンチャーへ転職 | TypeScriptがメイン | 使い勝手の良いエンジニア🧑💻 | 複数の企業さんとお仕事してる | 毎日の自転車で痩せるのが目標🚲', // SNSアイコンを記述の内容で表示させます。 twitter: 'entsuka', // ページにアイコン設定しない時のデフォルトアイコンだったり、デフォルトカバー画像を設定します。 defaultPageIcon: "🎧", defaultPageCover: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=2400', defaultPageCoverPosition: 0.5, // ナビを表示させることができます。idはブラウザで自身のNotionページへアクセスしてURIから確認してください。 navigationStyle: 'custom', navigationLinks: [ { title: 'about', pageId: 'about-bfadbf93121846da860b80028fa3a34f' }, { title: 'idea', pageId: 'idea-2429a96e63474e7cb4fba8ee9651cc05' } ] })
npm run deployを実行🧑💻
コマンドでVercel上にデプロイさせます。
今回Vercelはじめまして、でしたがアカウント作成もスムーズで滞りなくできて良かったです。
次回以降は、なにかリポジトリに変更を加えて
push するタイミングでVercel上でビルドが自動で走り変更が反映された状態でデプロイされます。便利！その他の設定や運用や注意事項などなど
いざ画面を表示してみると、ここちょっとテコ入れしたいとかでてきました。
- Githubリポジトリシェアボタンを非表示にしたい
- Google Analyticsいれてみたい
- もし商用利用したい時とかどうしよう
- Twitterでのリンクシェア時のOGP画像がうまく表示されない
- リポジトリ内にあるようなブログの表示ができない
Githubリポジトリシェアボタンを非表示にしたい
これは、シンプルで
/components/GitHubShareButton.tsx がありまして、これを利用しているページで削除してしまえばOKです。Google Analyticsいれてみたい
以下のような内容でファイル作成。
// /components/GoogleAnalyticsTag.tsx import * as React from 'react' import Script from 'next/script'; export const GA_ID = "hogehoge"; const GoogleAnalyticsTag: React.FC = () => { return ( <> <Script defer src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`} strategy="afterInteractive" /> <Script defer strategy="afterInteractive"> { ` window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '${GA_ID}'); ` } </Script> </> ) } export default GoogleAnalyticsTag;
作成したものを追加。
// /components/PageHead.tsx import GoogleAnalyticsTag from './GoogleAnalyticsTag' export const PageHead: React.FC< types.PageProps & { title?: string description?: string image?: string url?: string } > = ({ site, title, description, pageId, image, url }) => { // ~~~省略~~~ // return ( <> <GoogleAnalyticsTag /> {/* 追加 */} {/* 以下省略 */} </> )
Google Analyticsの設定は以下のリンクが参考になりました。
まだよくわかっていないこととして、新しくGoogle AnalyticsでGA4というものがでていますが、イベント取得時に重複して送信してしまうかもしれないということです。
ひとまずは上記の記載で様子をみて、挙動がおかしければテコ入れしてみます。
→確認してみた感じ問題なさそうでした🙆♂️
もし商用利用したい時とかどうしよう
Vercelは無料で利用できますが、商用利用（広告貼り付け・アフィリエイトリンクなどなど）するには規約上有料化する必要があります。$20。
Next.jsをサクッと低料金もしくは無料で利用するには、以下の技術選定が思いつきます。
- Vercel
- AWS Amplify
- Firebase Hosting
- Netlify
などなど。色々制限だったりトレードオフがあります。
また、色々調べているとホスティング先によってはSSR周りをサポートしていなかったり、していたり。ISRをサポートしていたり、していなかったり。
以下、自分調べ（○: Good, △: 条件あり, ✗: NG, -: 未調査）
ㅤ | Vercel | Amplify | Firebase | Netlify |
料金 | ○（無料） | ○（激安多分〜1000円） | ○（無料） | ○（無料） |
商用利用 | △（プラン変更$20） | ○ | - | ○ |
技術サポート | ○ | △（ISRが未） | △（SSRパフォーマンスが…） | △（応答速度…） |
導入しやすさ | ○ | △ ~ ○ | △ | △ |
順位 | 1 | 1 ~ 2 | 4 | 2 |
ということで、Amplifyをちょいと試してみたのと実際にコード読んで後から気づいたのもありますが、
- SSR周りのビルドで見事にコケてしまう。
- SNSでシェアで生成するOGPがVercel依存している。
ということで、結果Vercelでいくことにしました。
このあたりを解決できれば、Amplifyで低コストでかつ商用利用とかもできると思います。わたしの場合、この解決にかける時間的なコストを考えたら見合わなかったので、Vercelでいくことにしました。商用利用できたらいいけど、する予定もなかったので。
Twitterでのリンクシェア時のOGP画像がうまく表示されない
コードを良く追っていくと、OGP生成する時のアイコン画像が必須になっています。
必須というか、著者画像をアップロードする前提のコードになっています。
Zennとかで利用している絵文字を利用すると、srcをあてがうのに文字列が入ることになるので、Errorを吐いてOGP生成がうまくいかないようです。
コードをちょちょいといじれば一応どちらも対応できるようにテコ入れできます。
リポジトリ内にあるようなブログの表示ができない
これは、Notion側の設定で対応できるようになります。
まず、ギャラリービューとテーブルビューを組み合わせたテーブルを作成する必要があります。
ギャラリービューではサイトでのブログ表示を設定して、テーブルビューではブログで表示する項目を設定できます。
例えば以下の様なことができます。
- ギャラリービューでカバー画像を表示したい
- ギャラリービューでDescriptionやタグを表示したい
- 特定の記事を非表示にしたい
ギャラリービューでカバー画像を表示したい
以下画像のように、ギャラリービューの3点リーダーから、カードプレビューというものを選択します。
カードプレビューからページカバー画像を選択することで、カバー画像を表示することができます。
ギャラリービューでDescriptionやタグを表示したい
画像のようにプロパティから、ギャラリーで表示する項目をドラッグ&ドロップして調整することで、表示させることができます。
このプロパティは、ギャラリービューと一緒に作成したテーブルビューに追加するもので、プロパティはテーブルビューで管理する形になります。
特定の記事を非表示にしたい
これはプロパティが表示された画像にもある通り、Publicというプロパティをテーブルビューに準備しておいて、それがチェック入っているものだけ表示するという方法でできます。
ギャラリービューのフィルターから、Publicにチェックありという設定にすれば、Publicチェックありなしで表示/非表示設定ができます。
ざっとこんな感じです。
追記
いくつか課題を確認したので残しておきます。
- タイトルを変更するとURLも変わってしまう。
- タグを削除すると残って表示されてしまう。
- タグはあくまで外すまで
URLがタイトルを参照しているけど、日本語を参照していてクソダサい。- これはテーブルビューのプロパティにSlug(テキスト)を追加して、そこに記入すれば上書きできるようになります。（ちゃんとREAD.ME見てなかった…）
そこまで重要度を高く感じていないので、気が向いたら直してみます。
とりあえず、リリースしようぜ精神でいきます。