ブログサイト"Stroll at Dawn"の制作日誌

2023.08.06

このブログはNuxt3とNuxtConentで開発しています。本来の目的も忘れ、思うさま時間をかけて作り込んでしまいました。

※近日中に清書予定！

この記事の目次

制作の経緯

Nuxtがデプロイできて、アフィリエイトOKのホスティングサービス

ちなみに、デザインは行き当たりばったりです。もはやどうやって作り始めたのか思い出せない…（そりゃ難航するわ）

Nuxt3にした理由：スキルアップのため、ブログのような静的サイトが超作りやすい。
ブログなので、記事ページはURLを払い出してmeta属性を設定したかった。だからSSRかSSGが必須。

NuxtContentとは、マークダウン記法で記事を書くことができるNuxtのプラグインです。

WordPressとはついぞ向き合えなかった
- ブログを始めようとウゴウゴするも何もできなかった半生
- 12,000円ぐらいの有料テーマを無駄に２つも買った。が、何もしなかった。
HeadlessCMSもイマイチ気が乗らなかった
通信量を気にするのがいやだった
APIを作り替えるのが結構めんどくさい

結局VSCodeが一番ハードル低い
Contentは投稿体験もカスタマイズ体験も最高

いわゆる PX - PosterExperienceと CX - CustomizerExperience ですね。
こういう言葉があるかは分かりませんけども。

後述するMDCSyntaxが決め手だった

MDCSyntaxに感動した
マークダウン記法(.mdファイル)の中でVueコンポーネントを利用できる機能です。
Markdownをslotで渡したり、propsで属性を変えたり、さまざまな用途に使えます。書き方やディレクトリ構成もシンプルかつ直感的。

例えば、ブログでよく見るこんなパーツ...

JavaScript

わぁっ、これこれ！！
このフキダシでしゃべるやつがやりたかったんです〜！

PHP

Markdownの中でVueコンポーネントが使えるとか超便利だなMDC Syntax。 Spanにカスタムクラスを当てる当てるのも簡単じゃねーか。もうWordPressいらねーな…(複雑)

JavaScript

開発環境でウィンドウ２つ並べればほぼリアルタイムでプレビューできて、Qiitaみたいな投稿体験ですよ〜！ VSCodeで完結するしあわせ…。見てくださいよPHPさん、私たちの会話のソースコード！

/post/dev-diary.md

::baloon{chara="JavaScript"}  めっちゃシンプルじゃないですか！？::::baloon{chara="PHP" opp}  はあ！？マジでこれだけかよ！？すげぇな… っていうか::

PHP

これもうほとんどティラノスクリプトじゃね？

JavaScript

そういえばゲーム制作ぜんぜん進んでない...

コードはこんなふうに表示される

/post/dev-diary.md

// コメントasync fetchData () => {  const res = await client.get('', {    apiKey: 'xxxxxx'  })  console.log(res)  return res.contents}

zennのもくじがすごくカッコいいので、あれを目指しました。

/pages/post/[...slug].vue

const toc = post._value.body.toc.links  .flatMap((h2) => h2.children ? [ h2, ...h2.children ] : [ h2 ])