はじめに 自前でBlogページ作ってみました。一発目の投稿は、このページ作成の経緯とか技術的なちょっとした解説をしていきます。 よろしくお願いいたします。 profile ページにも記載していますが、本サイトは以下のような構成で成り立っています。 Webサイトホスティング github pages Webページ作成 Hugo v0.96 (2022.04時点の最新版) ドメイン取得 freenom 0円でドメイン取得・運用できるなんていい時代ですね。 便利サービス・ツールにすがりまくっているので、自前と堂々と名乗っていいものか、、、というのはありますが。 なぜブログを始めようと思ったか？ もともとどこかのブログで何かしらアウトプットしよう、と思っていました。僕はインフラエンジニアをやっていてIT技術に触れる機会はよくあったのと、個人的に分散システム全般的に興味があり、社内でちょこちょこ草の根勉強会でプレゼンしたりはしていました。その活動自体はとても良かったと思っていて、技術的なキャッチアップだけではなく、プレゼン能力も大きく向上したのかなと感じています。一方で、ブログ形式で静的に情報を残していく活動も必要なのではないかと感じていました。自分が発表した内容といっても、時間が経てば自分ですら忘れてしまいますしね。 外部サービスと比較したときのデメリット 今回は自前で作ったのですが、ブログ化のプラットフォームとして社内の情報発信サイトや、Qiita/hatena/Zennなどの外部サービスでもいいのですが、前者はクローズドでもったいないですし、後者はまあありっちゃありなのですが、色々とそれ自体が勉強になるかなと思って自前でやってみました。 もちろんデメリットはいくつかあると思っていて、以下に並べてみました。 初期セットアップが面倒、お金がかかる やっぱりこれに尽きますよね。 サーバやドメイン取得など、ブログ運営において全く本質的でないところに時間を掛けたくないのは当然です。 といっても、一昔前と比べるとかなり楽に、かつお安く運用できるようになったのではないでしょうか。 画像データのデプロイが面倒 Qiitaだとエディタに画像データをペーストすればアップロードされる仕様ですが、Hugo(のようなCLIベースの静的サイトジェネレータ)の場合は基本的に、画像をローカルの作業フォルダ(static)に保存⇒markdown から参照 になります。 これ地味に辛くて、「画像が少なくなりがち」になるの要因です。もしかしたらいいソリューションがあるかもしれません。 と思ったらやばいソリューション見つけてしまいました。次回試します。 Paste Image プラグイン(VS Code) 人に見られにくい これは仕方が無いので、Twitter等のSNSを通じてURLを共有したり、Google検索に引っかかるようにするとよいのでしょう。 まあデメリットたくさんありますよね。 敢えてメリットは列挙しませんが、上記がどうしても、という方はぜひ既存のブログサービスをお使いください。 なぜ Hugo にしたか？ 特に理由はありません。他のツール(Gatsbyなど)を触ってみたわけじゃないのでわかりません。 たまたま目に入った、参考にさせて頂いたサイトが Hugo だったので。 結果としては、とても楽でいいツールでした。逆にいうと、Hugo を使っちゃうとブログ環境セットアップを通じてのエンジニア力のアップはのぞめませんのであしからず。笑 で、どうやってブログ作ったの？ 1. ドメイン取得 あとからでもいいのですが、モチベーション的になんとなく先にドメイン登録してみました。一番世に出る情報ですしね。これ取りたいな、とかわかりやすいものが取れるかな、という点では重要です。今回は、無料ドメインを提供している freenom で登録してみました。 登録した結果はこんな感じです。 無料の場合は、1年毎に更新が必要です。有料版であれば1年以上更新せずそのまま使えるようです。 2. ローカル環境で静的ページ作成 Hugo初期セットアップ Hugo 自体のインストールから行います。 Macユーザの方はbrewで良いかと思います。 僕の場合は、バイナリを github からダウンロードしています。パスとかはよしなに。 Hugo インストール後、 hugo new site blog を打つだけでテンプレが生成されます。こちらのディレクトリ全体をそのままgit pushしていく形になります。 Hugo のテーマは Toha にしました。 こちらも理由はそんなになく、シンプルだからです。 ...