CODE:LIFE

NotionZEIT NowReact

Notion に書くだけでブログとして公開出来る notion-blog の作り方②

avatar

今回は Yarn のインストールnowのインストールからVSCode(Visual Studio Code)での開発環境構築、notion-blogのサイト名やContactページの変更方法、記事に反映するブロック数の設定変更などを紹介。

必要なもの

  • Git
  • Node.js
  • Yarn
  • エディタ(VSCodeなど)

パッケージマネージャ Yarn (ヤーン) のインストール

Mac

brew install yarn

Windows は以下からインストーラをダウンロードしてインストール

https://classic.yarnpkg.com/ja/docs/install#windows-stable

※ node.js が未インストールなら https://nodejs.org/en/ からダウンロード/インストール

インストールが完了したらインストール出来ていることを確認

$ yarn --varsion

 

now のインストール

yarn global add now

インストールが完了したらインストール出来ていることを確認

now --version

now をZEITアカウントで接続しておく。

メールアドレスに認証メールが届くのでVERIFYボタンをクリックすると接続される。

now login <email>

 

GitHub リポジトリをクローン

前回 GitHub 上に作成したリポジトリのURLを Clone or download からコピー。

An image from Notion

任意のディレクトリに git clone コピーしたURL

cd C:\Users\marumo\dev\
git clone https://github.com/marumo/notion-blog.git

 

取得したリポジトリを VSCode で開いてローカルで実行してみる

ターミナルから依存関係をインストール

yarn
An image from Notion

環境変数をセット。前回取得したやつです。

set NOTION_TOKEN=<your-token>
set BLOG_INDEX_ID=<your-blog-index-id>

localhost:3000 で実行。

yarn dev

[ ready ] compiled successfully - ready on http://localhost:3000 と表示されれば成功。

ブラウザで http://localhost:3000 を閲覧すればnotion-blogが表示されるはず。

An image from Notion
An image from Notion

 

ブログタイトルの変更箇所

VSCodeの場合は Ctrl + Shift + F でフォルダ内の全文検索を行うと早く見つけられます。なんならそのまま一括置換してもいいですね。

An image from Notion

ヘッダー情報

notion-blog/src/components/header.tsx 内 「My Notion Blog」 (22-27行目あたり)

An image from Notion
<title>{titlePre ? `${titlePre} |` : ''} My Notion Blog</title>
<meta
  name="description"
  content="An example Next.js site using Notion for the blog"
/>
<meta name="og:title" content="My Notion Blog" />

11行目は GitHub へのリンクなのでコメントアウトしよう

// { label: 'Source Code', link: 'https://github.com/ijjk/notion-blog' },

トップページ

notion-blog/src/pages/index.tsx (18行目あたり)

<h1>My Notion Blog</h1>

記事一覧ページ

notion-blog/src/pages/blog/index.tsx (66行目あたり)

<h1>My Notion Blog</h1>

https://notion-blog.now.sh/atom に生成されるRSSリーダ用ATOM.xml

notion-blog/src/lib/build-rss.ts (69行目あたり)

<id>My Notion Blog</id>${postsString}

 

Contact 情報の変更

notion-blog/src/pages/contact.tsx

12-33行目 それぞれ書き換え、不要な場合は { } ごと削除

const contacts = [
  {
    Comp: Twitter,
    alt: 'twitter icon',
    link: 'https://twitter.com/_ijjk',
  },
  {
    Comp: GitHub,
    alt: 'github icon',
    link: 'https://github.com/ijjk',
  },
  {
    Comp: LinkedIn,
    alt: 'linkedin icon',
    link: 'https://www.linkedin.com/in/jj-kasper-0b5392166/',
  },
  {
    Comp: Envelope,
    alt: 'envelope icon',
    link: 'mailto:jj@jjsweb.site?subject=Notion Blog',
  },
]

40行目 alt 書き換え

<img src="/avatar.png" alt="avatar with letters JJ" height={60} />

45-48行目 書き換え

<div className={contactStyles.name}>
  JJ Kasper - Next.js Engineer @{' '}
  <ExtLink href="https://zeit.co">ZEIT</ExtLink>
</div>

アバター画像は notion-blog/public/avatar.png を置き換えることで反映されます

 

いろいろ変更したあとはローカルで動作確認

http://localhost:3000 に自動的に変更が反映されているはずなので確認。

 

ローカルで確認できたら now とすればデプロイされる

now

たった3文字でビルド→デプロイされてURLまで振られるなんてすごいですよね

An image from Notion

正常にデプロイが完了したらVisitからページにアクセスして最終確認

An image from Notion

問題なければ 本番ドメインにリリースする

now --prod

あれ、よくよく考えたらリモートリポジトリに上げる意味そんなに無い気がしてきた。

けど、GitHubの方にPushすることでも本番ドメインへのリリースが可能です。

git push

now --prod したときと同様にデプロイされます。