Nuxt+Content+Cloudflareで無料でブログを作ってみた

　この記事では、ブログ初心者が1カ月で自前のブログを立ち上げるようすを紹介します。エンジニアでもない素人にそんなことができるのでしょうか？

そうだ、ブログを始めよう！

　ハダノは中学校教頭として定年退職して1年間、勤めに出ずにインプット中心の生活をしてきました。

　これからは、アウトプットに力を入れていきたい　→　そうだ、ブログを始めよう！　と考えました。しかし、そこには大きなハードルがあったのです。

記事を管理するシステムが必要

　シングルページとは違い、記事の数が増えてくるとリンク構造が複雑になります。記事を管理する何らかのシステムが必要です。手入力ではやっていられません。

無料ブログシステムの闇

　そこで、はてなブログなどの無料ブログシステムを使おうと考えます。運営会社の都合に合わせる生活が始まります。予告なく仕様が変更されたり、突然サービスが終了されたりします。無料だから仕方ないとはいえ、使い捨てにされる気分です。

ブログなら WordPress 一択

　有名なブロガーは、口をそろえてそう言います。実際に全ウェブサイト中 43% のシェアがあり、2位の 4% を大きく引き離しています。日本国内CMSでは、 84% と独走状態です。

　PHPの動くレンタルサーバーを借りればすむ話ですが、月千円程度必要です。ブログで稼ぐことを考えていない者にとっては、けっこうな負担です。教員には勧められません。

Jamstackで動的サイトと静的サイトのいいとこ取りを

　Jamstackの冒頭3文字はJavaScriptの”J”、APIの”A”、Markupの”M”を並べたものです。Jamstackとはこれらの3つの技術を利用し、Webをより速く、より安全に、そしてより簡単に拡張できるように設計されたしくみです。

　ブログの場合でいうと、WordPressはサーバーサイドでPHPによって動的にページを作ります。JamstackはJavaScriptによって事前に作っておいた静的なページを配信するのです。無料のホスティングサービスを使えばお金は一切かかりません。しかも、Web標準技術（HTML,CSS,JavaScript）の知識さえあれば、自分好みにカスタマイズできます。PHPプログラミングを覚える必要はありません。

　Jamstackにはいろんなシステムがあります。Webアプリを作るのにVue.jsというJavaScriptフレームワークを使ったことのあるハダノは、Vue.jsを拡張するNuxt.jsに挑戦することにしました。

nuxt/contntでブログシステムを構築

• Nuxt+Content+Cloudflareで無料でブログを作ろう！【初心者向け】
• Nuxt Content × SSG で作る静的ブログ

などのサイトを参考にブログを作っていきました。

　最初につまづいたのは、ESlintです。JavaScriptのコードが正しいかをチェックするツールで、とても助かるのですが、いちいち細かいことまで指摘してきます。注意だけならともかく警告が出て止まってしまうこともありました。

  // add your custom rules here
  rules: {
    'vue/multi-word-component-names': 'off'
  }

Vueのコンポーネント名として一つの単語を使っても止まらないようにするため、このルールを .eslintrc.js に追加しました。

　次に困ったのはデバッグです。VScodeでのデバッグ方法がよくわからず、結局 Google Chrome で右クリック-検証 とやってデバッグしました。ほとんど単純ミスでした。layout は、うまく使えず、原因不明のままです。ヘッダーなどの共通部品をコンポーネント化したので、さほど困ってはいません。

　いちばん困ったのが、date-fnsという日付処理用のプラグインをインストールしようとしたときです。何やらエラーメッセージが出て、そこで何かまずい操作をしたらしく、システムが停止しました。そのあと、Gitで復旧を試みましたが、何かのバージョン違いで復旧作業自体がストップしてしまいました。結局、nuxtのインストールからやり直すはめになりました。「おかしいと思ったら早めに引き返すこと」が教訓となりました。

　作成日付と更新日付は、markdownファイルから自動取得していました。Cloudflare Pagesにデプロイすると、なぜかリセットされてしまいます。nuxt-content-gitというモジュールをインストールすれば解決するらしいと試みるもまたエラー　→　今度は深入りせず、自動取得をあきらめてcreatedAtとupdatedAtを手動で入力することにしました。

　このあとも npm install ではエラーに悩まされました。firebase-tools のインストールで試しに yarn を使ってみたところ、あっさり成功しました。これは使えるかもしれません。

　サイトの看板となるアイコン（favicon.ico）がうまく表示されない問題については、nuxt.config.jsを

  pwa: {
    manifest: {
      lang: 'en'
    },
    icon: false // ←PWAのバグに対応
  },

としてみたところ、ちゃんと favicon が表示されるようになりました。

Cloudflare Pages にカスタムドメインを設定

https://qiita.com/akitkat/items/8aeaee639ba5f2bda141

を参考に、kyodx.com に設定しました。「24時間かかる」との説明でしたが、数分でつながりました。

https://●●●blog.pages.dev/*
  X-Robots-Tag: noindex

と書いた _headers ファイルをルートに置き、Cloudflare Pages の pages.dev ドメインを無効にして、独自ドメインだけを有効にするようにしました。

とても簡単なブログ更新作業

　content/articles フォルダに ●●●.md という記事ファイルを作ります。マークダウンの書き方に慣れていなくても、HTMLを貼り付ければ大丈夫です。

　GitHub Desktop で 「commit to master」ボタンをクリックし、「Push origin」ボタンをクリックして、数分間待つだけで勝手に更新されます。

　これまで Git はあまり使っていなかったのですが、変更履歴がきちんと残るので便利です。

title タグや meta タグを動的に設定

• nuxt.js(v2)でSEOに必要なmeta(OGP)を入れたい

を参考に、title タグや meta タグを設定しました。トップページ・記事一覧ページ以外のページでは、title,description,url,imageなどが動的に設定されるようにしました。

トップページに「教育DX」の概要説明を

　教育DXとは何かを簡単に説明しました。知っている部分は読まなくていいように、details タグ　summary タグ を使いました。それぞれの「カテゴリー」や「タグ」への道案内になればよいと思います。

E-A-T を意識した自己紹介を

　自作ソフト（ソックリッカー、ソックサーガ、ヌルパ）の紹介記事を書きました。

　プロフィールのコンポーネントを作って、各記事の末尾に表示するようにしました。

• nuxt/contentでサイトマップを作る

を参考に、ビルドしたらサイトマップが sitemap.xml に書き出されるようにしました。Google Search Console への登録に使います。

　Cloudflare Pages でデプロイエラー → 環境変数の設定（NODE_VERSION,YARN_VERSION）で解決しました。Glitchもデフォルトのバージョンが低すぎて、似たようなことがありました。依存ライブラリのバージョン問題には悩まされます。

• DLLヘルが去ってパッケージヘルがやってきた

Google Search Console へ登録

　Google Search Console のドメインプロパティで、1日待っても「所有権が証明できない」エラーが消えません。本に書いているのとやり方が違って戸惑ったので、

• GCP + CloudFlareな環境に移行してGoogle SearchConsoleの設定をした話

を参考に、DNSレコードを「ドメイン登録サービス」ではなく、Cloudflare のDNS設定で追加すると、すぐに解決しました。

　URL検査で「このページはモバイルフレンドリーです」 が出て、一安心です。

　Cloudflare の Web Analytics も始めました。

Google AdSense 審査通過

　2022/7/22、記事数が20に達したので Google AdSense の利用にとりかかりました。

　プライバシーポリシーにGoogle AdSenseについての記述を追加します。

　@nuxtjs/google-adsense をインストールし、nuxt.config.jsを編集、adsbygoogleコンポーネントをセットします。

　「審査をリクエスト」をクリックして待ちます。審査完了まで平均1～2週間かかるようです。

　審査は年々厳しくなっていく傾向にあり、信頼性の高いWebサイトに求められる

1. ユーザーが抱える悩みや疑問を解決できるか
2. 独自性のあるコンテンツか
3. コンテンツの量や質が適切であるか
4. お問い合わせ・プライバシーポリシーがあるか

という4つの基準が重視されるようです。

　ドキドキしながら待っていると、1日半で「AdSense アカウントの有効化おめでとうございます！」のメールが届いてホッとしました。「教育DXブログがGoogleに認められたんだ！」とうれしくなりました。

staticフォルダ内のページが表示されない！

　マークダウンは書きやすく便利ですが、たまに、マークダウン以外で書かれたページが必要になります。自作のWebアプリ（🔗ソックリッカー、🔗ソックサーガ）やPDF形式の文書などです。

　そんなファイルは、static フォルダに入れておけばルートフォルダに置かれるので、/（スラッシュ）から始まる相対URLでアクセスできます。

　ところが実際は、すんなりと表示されないようです。リロードすれば表示されるので、アドレス指定は間違っていません。

　いろいろ調べますが、今のところ原因がわかっていません。名前解決の問題かもと思いながら、とりあえず絶対URL指定に変えることにしました。

これからも改良を

　自前のブログシステムなので、使っていきながら改良していきます。中身が全部わかっているというのは、安心です。

　これからも応援よろしくお願いします。

Vue.js&Nuxt.js超入門 [ 掌田津耶乃 ]

※ ネットの情報には、間違いも含まれています。
ハダノは掌田さんの本のおかげで、Vue.jsの全体像とNuxt.jsの基本を一通り理解することができました。

楽天

Amazon

Yahoo!

次へ→　持続可能なブログ作り