個人サイトを作りました

個人サイトを作りました。

なんで？

令和の時代の流れに逆行するような個人サイト制作、なぜでしょうか。どうしてこんな面倒なことを

サイトプラットフォーム内で他人の記事と比べられるのに疲れた。

例えば技術系ならQiitaやZenn、そうでなくてもNoteなどの有名プラットフォームがありますが、ほかの人の記事と並べて同じ土俵で勝負する必要があります。

Qiitaなどでは組織票などによるランキング稼ぎが行われていたりなど、穏やかではありません。

また、次の項の内容にも続きます。

いわゆるクソ記事を気軽に投げたい

もちろん継続的なアウトプットは重要です。しかしQiitaやZenn、Noteを開いて1行記事やどうしようもない内容だと少し残念ですよね。

しかし、個人サイトであればそのような心配は無用です。なにせ個人サイトです。どんなコンテンツが置いてあるかなど未知数です。ギャグだけ置いてあるページなどを作ってもよいのです。

カスタマイズ性

これが一番の決め手です。以前までであればヘッドレスCMSを用意して記事を作成するなど、煩雑な手順を踏む必要がありましたが、そういった面倒さもNuxt Content v2 (と Nuxt Studioを組み合わせることにより)なくなりました。

Nuxt Studioはベータ版の初期公開の時点では無料でブランチを分けるなどもできたり、オープンソース向けの相談フォームもあったのですが、有料の機能が増えたうえにオープンソースでなく、セルフホストもできないのがやや残念です。

自分の今後のモチベーション次第ですが、オープンソースでセルフホスト可能なNuxt Content用のCMSの代替を作ることも構想としてあります。

どう作ったの？

ここでは、実際の構成などを踏まえてどんなサイトかをお伝えできればと思います。

基本的な構成

• Nuxt3 による静的コンテンツ生成(SSG)
• Nuxt Content v2によるファイルベースのドキュメント管理
• Cloudflare Pagesによるビルド・静的ページのホスティング
• GitHubによる文章・リビジョン管理

こだわりポイントは？

• 基本的にテンプレートなど使わずに全部自分で1から構築していること
• SSGかつCloudflareのエッジサーバーから配信されるのもあり読み込みが爆速（かも）
  • いろいろ足したので保険をかけたくなった
• ダーク・ライトモード両対応
  • 個人的にライトモードもダークモードも明るすぎず・暗すぎずにできたかなと思い満足している
• コードハイライトの部分めっちゃカスタムしたから見て！
  • (Nuxt Contentでshikiによるハイライトだとテーマの色をきちんと適用するのが割と面倒)

/// @ 0.13.1
// ソースコードを読んでる君はAiScriptすき？
//
// © @[email protected]
// 下記ライセンスに従った改変や頒布を許可します。
// Licensed under MPL-2.0
// https://www.mozilla.org/en-US/MPL/2.0/
//

var currentColor = "#fff"

let letters = "0123456789ABCDEF"

let randGen = []

for let i, 6 {
  randGen.push(Math:gen_rng(`{USER_ID}{Date:year()}{Date:month()}{Date:day()}{i}`))
}

let color = randGen.map(@(f){ letters.pick(f(0 15)) }).join()

let result = [
  "#ラッキーカラー診断",
  `今日のラッキーカラーは{"`"}#{color}{"`"}でした！`,
  `今日のラッキーカラーはこんな色 -> $[bg.color={color} :blank::blank::blank:]`,
  "",
  `{THIS_URL}`
].join(Str:lf)

@render() {
  Ui:render([
    Ui:C:mfm({ text: result })
    Ui:C:postFormButton({
      text: "投稿する"
      rounded: true
      primary: true
      form: {
        text: `{result}`
      }
    })
  ])
}

render()

TODO

• ポートフォリオ
  • 一番大事
  • こんなブログ作り込んでる場合じゃない
  • ある意味このサイト自体も成果物だが
• ブログの一覧のページネーション
• 実は存在するdocsやnewsもblogみたいに書ける・一覧表示できるようにする
• articleのjson+ld (DONE)
• etc...
  • やれることならいっぱいある

(2024/08/22時点で完了済みのものにDONEを追記)

とはいえ更新するの？

わからん！

正直ここまで作って満足した感じもある。

• Vueコンポーネントを記事中に自由に置けるので普通に開発が楽しい。全然作るモチベがある。

というわけで

たいにゃんぷ先生の次回作にご期待ください。