最近個人ブログをはてなブログからHugoという静的サイトジェネレーターを使う方法に変えました。
今回はなぜはてなブログをやめたのか、Hugoへ移行したことなどを雑記程度に書いていこうと思います。
目次
なぜ はてなブログ を卒業したのか
実はだいぶ前からはてなブログへの不満はあり、最近独自ドメインを契約したことを機に他のブログプラットフォームに移そうと思いました。
不満1 : 重い
はてなブログは重いです。一つの指標としてサイトのパフォーマンスなどを診断できるLighthouseの結果を見てみましょう(デバイスはパソコンです。スマホだと絶望的)。以下のような結果です。あんまり良くはありません。
原因は大量のファイルの読み込みだと思っています。こんなに読み込む必要があるのかと言う程のjsファイルの量。なんのファイルなのかはよく分かりません()
サイトが重いことはSEOにも影響してきますし、ページによっては体感できるほど読み込みが遅いときもありました。
不満2 : Google様がサイトを読み込んでくれない
これは本当に謎ですがGoogleのサービス、Google AdsenseやSearch Console等で「サイトにアクセスできません」的なエラーがよく出ます。はてなブログを使っている人の中では有名なのではないでしょうか。これははてなブログとGoogleの相性問題なのかもしれませんが読み込んでくれないと困ります。
ですがこの問題はひたすらに待ったり、複数回申請を出したりするとGoogleもアクセスできるときがあるので一応解決してはいました。ですが今後もGoogleとお付き合いしていくことを考えると解決しておきたいことです。
不満3 : 無料版だと制限が多い
正直ここははてな側が収益を確保するためにもしょうがない事ですが、使用者目線でいくと有料版にしなくちゃ解禁されない機能が多くて、しかも重要な機能ばかりで困ります。
独自ドメインを指定するのも、固定ページを作るのも、既存の広告を排除するのにも、はてな固有のヘッダー・フッターを非表示にするにも有料版にしなければなりません。
そしてこの有料版が高い。これに1000円/月越え、独自ドメインも含めるともう少し高くなります。
流石にそこまで払えないし、、、
不満4 : カスタマイズがあまりできない
これは無料ブログのほとんどがそうなのですが、カスタマイズがあまりできません。でもはてなブログは他の無料ブログよりもカスタマイズが効く方ですし、ある程度知識もあれば力技である程度のことはできるし問題はあまりありません。
個人的にこの位の制限がある中で色々なCSSやJSを駆使してカスタマイズをするのは好きですし、なによりはてなブログを使っているユーザーは多いのでカスタマイズ方法を記事にするとアクセス数が稼げる有益な記事を作ることができます。
結果的に1~3の問題が個人的に大きくてはてなブログから移行しようという結果に至ったわけです。
はてなブログはそこそこ好きだったので残念です。
なぜHugoを選んだのか
最初は後学のためにもMySQL等を使ったブログシステムを自分で一から作ろうと思っていました。ですが開発時間などの関係もあり諦めました。
実際に投稿/編集ページは試しに途中まで作ってたのでここで成仏しておきます。デザインもまだまだだし、機能も中途半端に作ってあります()。ちなみにtinyMCEを使っています。
で、肝心のHugoにした理由はHTMLやJSなどの静的なサイトだからです。
WordPressも候補にありましたが動的にページが生成されるという点と、普通にWordPressが好きじゃないという点よりWordPressはなしになりました。それとHugoを使いたかったという好奇心に負けたってのもありますね。
そして静的サイトジェネレーターの中でもHugoにした理由は、特にありません。このVCbornのブログでwamoさんがHugoに関する記事を書いていたのでHugoにしてみた感じです。以上！
Hugoに移行する上で大変だったこと
記事の移行
まずHugoに移行する上で一番大変だった事は記事をHugoのシステムに合うようにすることです。
はてなブログのCSSがまだ含まれていたり、見出しのタグの構成も違います。VSCodeの複数ファイルを一斉に置換できる機能や正規表現などを使って変換しました。これが地味に一番時間かかったかも。
301リダイレクトができない
もうひとつ、大変というか今でもまだ問題なのですが、はてなブログって301リダイレクトができないんですよね。301リダイレクトをすると旧ブログのSEOをある程度引き継げるようです。しょうがなくJSのリダイレクトで応急処置をしておきました。
そして301リダイレクトを使えない弊害が違うところでも現れました。Google Search Consoleです。
Search Consoleにはサイトを移行した時にアドレスの変更をGoogleに通知するシステムがあるのですが、それを使うには301リダイレクトをしておくのが必須のようです。もうお手上げです…
まったく同じ文章のページがインターネット上に二つも存在するので独自性の低いコンテンツ的な感じでSEOに影響がでないといいのですが。canonicalとかでどうにかできないかと模索中です。
Hugoの動作環境
役に立つかは分かりませんが今の個人ブログのHugoの動作環境的なものも書いておきます。
現在はGithub Pagesを使って、独自ドメインを設定して運用しています。そしてGithub Actionsを利用して自動ビルドしています。
以下のリンクが当該Githubのリンクです。masterブランチにビルド前のデータ、gh-pagesにビルド後のデータがあります。gh-pagesの方を公開してあります。(Github Actionがまだよく分からないので悪しからず)
まとめ
今回は雑記的な感じではてなブログからHugoに移行した事を書きました。
まぁSEO的にあんまりアドレスの変更はしたくなかったのですが、書いたように色々あったので移行する決断をしました。無念に終わった完全自作ブログ的なのもいつか再挑戦してみたいものです。
こんだけはてなブログの不満を言っていますが無料ブログの中では(noteとかQiita等を除いて)一番おすすめですね。
あと今回はあんまり書いてないですがHugoいいですよ。
