ブログの更新もしていないのに引っ越しをするというのも変なのですが、今までブログの投稿に利用してきたWordPressがどうも使いにくく感じていたので思い切って静的サイトジェネレーターの「Hugo」を使ったサイト構築に挑戦してみました。
HugoとNetlifyを選びました。
HugoはGoogleのGO言語で作成された静的サイトジェネレーターで、最近いろいろな記事を読んでその存在を知りました。
今まで使ってきたWordPressなどのシステムはページを画面に表示するときにデータベースに保存してあるデータを読み込みます。データベースにはセキュリティ攻撃のターゲットになることもあり、割と頻繁なバージョンアップがあります。さらに便利にしてくれるプラグインの機能もこまめにバージョンアップしてくれるものもあれば、更新がないものもあります。無料で有志の方が作っているので文句を言う筋合いはないのですが、かといって自分でメンテする力量もないので、どうしたものかと思っていました。そんな時に静的サイトジェネレーターのことを知りました。端的に言うとサーバーではすでに出来上がったページを表示するという仕組みなのでシンプルです。
サーバーはNetlifyにしました。ある程度の制限がありますが無料でhttpsでGithubのプライベートレポジトリへプッシュしたら連動してデプロイをしてくれるのはすごい。個人でブログを運営するぶんにはドメイン代を払えばで十分やっていけるんじゃないかな・・・。
今年に入ってから少しずつ勉強をしだして、途中で何度か投げて放置していたこともありましたが、Google検索を最大限活用して情報を集めて準備をすすめてきました。
WordPressからのデータをエクスポートするプラグインがあるので、それを利用してまずは文章と画像を抽出しました。データのバックアップの意味合い的にも将来違うサイト構築方法に移行するときにも再利用しやすいデータがあると非常に便利ですね。
色々なサイトを検索して参考にさせてもらいながらテーマを作ることに。何かのテーマを参考にして改造するつもりでしたが、どこを直せば自分の意図したデータが表示されるのか最初は分からなかったので、エラーを出しては立ち止まり、遠回りしながらも超シンプルなブログのスタイルをようやく作れるようになりました。
今回サーバーを移動して、システムも変わったので過去にいただいたコメントが見られなくなりますが、コメントのデータは大切に保存させていただきました。
今後「disqus」というサービスでコメントできますので引き続きご愛顧いただければ幸いです。
プログラムはむずかしい・・・。
それにしても自分の作りたいようにテーマを作るのは結構大変でした。HTMLとCSSを書くのはとくに難しいわけではないのですが、どのコードがどのファイルのどの項目を読み取るのかイマイチ理解していないまま割と適当に配置してたんですが、適当では当然エラーになりますしスペルミスもあいまって心が折れて2〜3日放置したこともありました。それでもVSCodeでローカル環境のサイトを見ながら少しずつ直していくとプログラムの通りに動作するのを見られると面白かったです。小学生の時にPC-8001が家にありゲームを作るため雑誌に書いてあったベーシックを入力するうちにif文をなんとなく理解していたのも今回役に立ったのかもしれません。とはいうもののベーシックとは全然違いますけどね。
今までさくらインターネットのサーバーを利用していて、ドメインもさくらで取得したのでドメインサービスはそのまま継続で契約してドメインの設定だけを変更しました。これも難しかった・・・。よく設定のしかたを読めば理解できることなのですが、英語で専門用語が書かれているとひるみます。
これから少しずつ直しながら、読みやすいブログを作りながらWebサービスに関する知見をさらに得たいと思います。
Hugo公式サイト
参考にさせていただいたサイト
👉 Hugo で静的なサイト・ブログを構築しよう
👉 Hugo公式
👉 まくまくHugo/Goノート
👉 tanaken.me
👉 blog.unresolved.xyz
ほかにも多数ありますが、大変勉強になりました。