Ikechan

Nuxt.jsでブログ作ってみた（脳筋ver.）

#Web#Nuxt#個人開発

はじめに

この記事はNuxt初心者がNuxtを少しずつ理解していくために 備忘録的な形で残していくものになります。
Nuxt上級者には何も役に立たないかもしれませんので ご注意ください。

Nuxtが楽しい

いきなりですが、私はNuxtを楽しく使わせてもらっています。 元々、PHPを使ってワードプレスを使っていたのですが、 表示スピードが若干遅かったりして、個人的に使いにくいな と思っていたので、PHPから離れようと思いました。

てなわけで、脱・ワードプレス

はい、題名にある通り、脱・ワードプレスをしようと思いました。 誤解がないように言うと、表示速度などを省くとワードプレスは個人的には、とても好きです。 ですが、もっとモダンな言語で開発したい！というポンコツエンジニアとしての 願望があり、思い切ってワードプレスから離れる事にしました。

CMSはどうするの？

技術選定をするにあたって、とりあえずNuxtを使いたかったので、 Nuxt3を使う事にしました。 理由としては、vueファイルではHTMLをそのまま書ける点です。 それも、特段普通のHTMLファイルとあまり変わらないルールで書ける。 ここが、決め手となりました。

ただ、ここで問題が発生します。普通ブログなどでは、CMSを 導入するのが普通です。ところが、Nuxt3だけではCMS機能が ありません。Nuxtと合わせて使われるCMSとして、micro CMS などがありますが、無料で使うには制限があります。

フロントエンドだけで管理しちゃえ！笑

はい笑　ただの馬鹿ですね。バックエンドを作るのが 面倒だったので、フロントエンドに記事を直書きする事 にしました。ガチの脳筋ハードコードです。

これがお客様のプロダクトだったら、大問題案件ですが 私の個人的なブログなので、好きにしちゃえという事で笑 思い切って、バックエンドがない状態にしてみました。

でも記事一覧ぐらいは楽したい

お客様のWebサイトなどで、長らくワードプレスを使っていた 人間としては、記事一覧ぐらいは楽したいという感情が 芽生えてきました。なので、記事一覧ぐらいは楽しようと思い、 jsonファイルを使って構築してみました。 

                
    [
        {
            "id": 2,
            "title": "Nuxt.jsでブログ作ってみた（脳筋ver.）",
            "url": "article/2",
            "register_date": "2024/02/04",
            "hashtag1":"#Web",
            "hashtag2":"#Nuxt",
            "hashtag3":"#個人開発"
        },
    ]

はい。こんな感じでDBの代わりに情報を格納しておきます。 これによってトップページの「人生の足跡」欄は自動で 表示される仕組みになっています。ガチで頭悪いやり方ですね。

後はv-forで回すだけ

シンプルなので、コードは載せませんが、後はimport 文でjsonの情報を取得し、変数に格納します。 変数に格納後 

v-for
で、ループ文を回して記事を一覧表示させます。簡単ですね。

最後に

はい。というわけで、このブログのシステムについて ご説明しました。個人サイトなので、本当に好き勝手やってます。 今後も、音楽・写真・WEB・小説などについて投稿していきます ので、よろしくお願いいたします。池ちゃんでした。

2024 Ikechan