はじめに
自前でBlogページ作ってみました。一発目の投稿は、このページ作成の経緯とか技術的なちょっとした解説をしていきます。 よろしくお願いいたします。
profile ページにも記載していますが、本サイトは以下のような構成で成り立っています。
便利サービス・ツールにすがりまくっているので、自前と堂々と名乗っていいものか、、、というのはありますが。
なぜブログを始めようと思ったか？
もともとどこかのブログで何かしらアウトプットしよう、と思っていました。僕はインフラエンジニアをやっていてIT技術に触れる機会はよくあったのと、個人的に分散システム全般的に興味があり、社内でちょこちょこ草の根勉強会でプレゼンしたりはしていました。その活動自体はとても良かったと思っていて、技術的なキャッチアップだけではなく、プレゼン能力も大きく向上したのかなと感じています。一方で、ブログ形式で静的に情報を残していく活動も必要なのではないかと感じていました。自分が発表した内容といっても、時間が経てば自分ですら忘れてしまいますしね。
外部サービスと比較したときのデメリット
今回は自前で作ったのですが、ブログ化のプラットフォームとして社内の情報発信サイトや、Qiita/hatena/Zennなどの外部サービスでもいいのですが、前者はクローズドでもったいないですし、後者はまあありっちゃありなのですが、色々とそれ自体が勉強になるかなと思って自前でやってみました。
もちろんデメリットはいくつかあると思っていて、以下に並べてみました。
初期セットアップが面倒、お金がかかる
やっぱりこれに尽きますよね。 サーバやドメイン取得など、ブログ運営において全く本質的でないところに時間を掛けたくないのは当然です。 といっても、一昔前と比べるとかなり楽に、かつお安く運用できるようになったのではないでしょうか。
画像データのデプロイが面倒
Qiitaだとエディタに画像データをペーストすればアップロードされる仕様ですが、Hugo(のようなCLIベースの静的サイトジェネレータ)の場合は基本的に、画像をローカルの作業フォルダ(static)に保存⇒markdown から参照 になります。
これ地味に辛くて、「画像が少なくなりがち」になるの要因です。もしかしたらいいソリューションがあるかもしれません。
と思ったらやばいソリューション見つけてしまいました。次回試します。
人に見られにくい
これは仕方が無いので、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 にしました。
こちらも理由はそんなになく、シンプルだからです。
ちなみに僕は Windows を使っており、WSL2環境で作業しています。
config 修正
本家の config を丸パクリしてから、
publishDirを docs に変更(github pages対策)- ドメインを変更
- （Google Analytics 導入したい人）googleAnalytics` をやります。
baseURL: "https://a2ito.ml/"
canonifyurl: true
publishDir: "docs"
こんな感じです。
Google Analytics について、古いバージョンでは特別な設定（gtag.js対応のためにカスタムヘッダを埋め込む）が必要だったようですが、今回使ったバージョン v0.96 では不要でした。⇒参考
profile ページ作成
まずはページをhugoコマンドで作成します。
hugo new misc/profile.md
hugo new [something]を実行すると something が content フォルダ配下に作られるのですが、以下のようにファイルを管理していこうかなと。
content
├── misc # ここにprofileページなど雑多なもの
│ └── profile.md
└── posts # ここに投稿を作っていく
└── 20220403-post.md
次に作ったprofileページを公開するために、config.yml で以下の設定をしましょう。
menu:
main:
- identifier: posts
name: posts
url: /posts
weight: 10
- identifier: profile
name: profile
url: misc/profile
weight: 15
あたりをいじります。
投稿ページ作成
hugo new posts/20220403-post.md
でOKです。言うまでもないですが、ファイル名は適当に読み替えてください。 あとは作られたmdを修正して、がりがりブログを書いていきましょう。
ページ確認、作成
hugo server
でローカルでページを確認しつつ、修正が終わったら
hugo
でdocsへ静的ページが作成されることを確認しましょう。
3. github pages 作成
github 上に適当なリポジトリを作ってください。 最初は、プライベートリポジトリでパブリック公開pagesにしようと思いましたが、フリープランだとそういう選択はできないようです。⇒参考
作ったリポジトリにごっそりpushしてもらって、docs を公開してください。 これで、以下のようなURLでアクセスできるようになるはずです。
https://[個別のgithub ID].github.io/docs/
非同期でWeb公開されるようなので、ご注意ください。 deploy状況は、リポジトリトップページの右下 Environments から確認できます。
github pages と独自ドメイン紐づけの話をしようと思いましたが、またの機会に。
おわりに
今回は以上です。 予想外に長くなってしまいました。
2022/4/4 追記
本ブログのソースがあるリポジトリを private 化しました。本サイト自体は public なリポジトリで公開していますが、privateリポジトリでテキストを書いて、actions で build 済みのブログ公開データの docs ディレクトリだけ別の pubulic リポジトリに deploy することで実現できました。 そのうち、そのやり方とtemplateを公開したいと思います。
参考にさせて頂いたサイト
https://zenn.dev/okaponta/articles/c302f58507febc https://www.bedroomcomputing.com/2020/08/2020-0815-engineer-static-site-gen-blog/