mimonjo

みつきくらしげ文書
目次にもどる

実測165分でブログつくる

2024/6/11 21:11:42

こんにちは

ブログをつくりてぇのよ

ブログがつくりたいのでつくります。これは開発中のサンプルデータも兼ねているのでこの前置きをかいている時点で何分でつくれたのかはわかっていません。そして途中から酒飲みながら作ってるので急いでもいないです。さぁやっていこう。

つかうもの

Arc

  • 現世に存在する最高のブラウザ
  • macOSでは完璧、Windowsでは開発途中という感じだけど最高なのでみんな使おう

Notion

  • みつきの生活のあらゆるメモがここにある
  • この記事がCMSに載る前の下書きにつかう
  • 今後降りかかるであろう工程管理につかう

Next.js

  • 爆速webページが爆速でつくれるすげ～～やつ
  • ボカロエレクトロを作りそうな名前ですね

Prismic

  • ブログの記事とかのデータを置く場所
  • 無料でありえないくらい使える、すごい
  • ボカロのサークルがありそうな名前ですね

GitHub

  • ソースコードを置く場所
  • webページの公開につかえる
  • webページのビルドにつかえる
  • これがないと本当に仕事にならない
  • おかげさまで生きております

記事を書く

そもそもブログらしい文体のものがないと書いたプログラムが正しいのかわからないのでガーっと書く。

Prismicの準備

Prismic: Headless Page Builder - Launch and Iterate Faster

PrismicはヘッドレスCMSというジャンルの存在で、データをしまって置く場所と、データを効率的につくる画面を提供してくれるものです。

ブログのようなものだと、タイトルを入れる部分があって、本文を書くところがあって、その本文を書くところには便利でリッチなエディタがついていて、タグみたいなのをつける機能があって…と割とテンプレみたいな仕組みが必要となります。

だけど、ブログとして公開され、読者のひとがみるページは個性あふれたこれぞみつきっぽいぞみたいなページがいいな、みたいな欲求は全世界の誰しもが持っているわけです。

なので、みんなには見えないテンプレみたいな裏側の部分はあらかじめサービスとして展開されているヘッドレスCMSというサービスをつかって退屈な開発をスキップ、みんなにみえる表側の部分は0から（これもすでにあるライブラリを組み合わせるので実際には5くらいかも）つくっていって、個性あふるる画面をワクワクしながら作っていきましょうね、というわけです。

Next.jsでいい感じに作れそうな画面が出てきますが、それを無視してSomething else → Otherを選んどきます。こういうのはとりあえずこちらの環境を明示しないほうがやりたいことができたりするのだ。

できたら、それらしくCustom typeというのをつくります。

ブログの構成要素が何でできるか、ですね。UID、Title、Rich Textでとりま良いでしょう。

で、ここまでつらつら書いてるこの記事をDocumentにつくります。

記事ができちゃったなぁ

驚くべきことに、これでバックエンドと呼ばれる領域はだいたい準備完了なのでこれからはゴリゴリとフロントエンドと呼ばれる部分をつくっていきます。

Next.jsの準備

コマンドをたたきます

npx create-next-app@latest

後は指示通りホイホイホイとやっていきます。これは便利なのでいうことを聞いてやっていきます。

PrismicのSDKもいれておく。

pnpm add @prismicio/client @prismicio/react

んで、どっかにこういうコードをつくっときます。いい感じのところに。

import { createClient } from "@prismicio/client"
export const repositoryName= "geki_omoshiro_blog"
export const client = createClient(repositoryName, {
    accessToken: process.env.PRISMIC_AT
})

Prismicの情報が欲しいところでこのコードを使えば、いい感じに情報がとってこれるってこと！

ページをつくる

ここからは実際にWebページとして表示される部分をつくっていきます。

今回はNext.jsのSSGという方法を使ってつくっていきます。SSGではWebサイトをビルドするとき、わーっと書いたプログラムコードを実際にブラウザとかで読み込める形式に変換するときに通信が必要な情報をあらかじめ読み込んでおく方法です。

このブログではコメントとかふぁぼみたいな、読者の人がリアクションできる機能をつくるつもりは今のところないので、情報を更新したいタイミングは記事が増えたときのみ、とかなり限定的になります。

そのため、ビルドの時だけ通信する方式でも成り立つのです。お金的にエコな方法でWebサイトが作れるので安心。

だんだん細かく書くのもつらくなってきたのでざっくりやったことを列挙します

  1. getStaticPaths関数の作成、動的に生成するページのURLとPrismicのデータのUIDを対応させる
  2. getStaticProps関数の作成、記事データを取得して、Webページとして公開する内容をPrismicから取得する
  3. Webページそのものの実装、PrismicにはPrismicRichTextのような便利なコンポーネントを提供してくれているので、それにデータを渡して、表示してもらう。

そんなこんなで激ショボ見た目のブログが完成！

おもむろにスクショ貼ったんですが、見た目が質素すぎて画像が画像に見えなかったらすいません。

公開する

.github/ というディレクトリを作って、その中に workflows/ というディレクトリをつくって、その中に deploy.yaml というファイルを作成します。

そして、コードをビルドするとか、公開環境へ良い感じにやるとかの作業をつらつらと書いていきます。

GitHubにpushしておけば、更新をしたいときにボタンをポチっとな！すれば更新ができてしまうのだ！！

できた

というわけで完成！！タイマーストップです。

2日に分けて作業してて、2台のスマホで測ったのでややこしいことに...

合計165分くらいですかね。途中Prismicのログインに手こずったり、GitHub Pagesの設定で若干時間を食ったりしましたが、とにかくブログとして機能するものは3時間かからずに作ることができました。

とにかくメチャメチャ質素な見た目のものが爆誕したので、ここからは良い感じの見た目に強化していきたいと思います。

ヘッドレスCMS最高！Next.js最高！！ おわりです。

目次にもどる