😈

HugoとZennを一緒のリポジトリで運用しようとしたけど諦めた話

2023/06/18に公開

経緯

弊社ではエンジニアのキャリアパスとしてマネージャー職とプロ職(技術特化)があります。

マネージャーはご存知管理職ですが、プロ職は「自分の技術で、経験で、技術にこだわっている人を感動させる」ことをミッションに自分の技術を活かしていけるキャリアパスです。

私自身、今年からプロ職として活動していてまずは技術ブログだろ😎と思い、はじめはGithubPagesへHTML&CSS&Javascriptで作ったサイトをデプロイする予定でした。

Github Pagesとは

GitHub Pagesは、GitHubが提供するウェブホスティングサービスです。

GitHub上で管理されているリポジトリ(リポジトリとは、ソースコードやファイルを格納する場所)を使用して、静的なウェブサイトやブログを簡単に公開することができます。

GitHub Pagesは無料で利用できるし、カスタムドメインの使用やHTTPSによるセキュアな通信もサポートしてます。
まとめてメリットは以下です!


  1. 無料で利用できる
  2. カスタムドメインの使用が可能
  3. HTTPSによるセキュアな通信がサポートされている
  4. バージョン管理が簡単
  5. 静的コンテンツのパフォーマンスが高い

Hugoとは

Hugoは、Go言語で開発された高速な静的サイトジェネレータです。

これめっちゃいいな〜と思うのは超高速でページを生成することができるんですよね。※大規模でも全然早いらしい

また、いろんなテーマやカスタマイズオプションが結構あるので開発者にとっては色々できて非常に便利だと思います。メリットは以下です!


  1. 高速なビルドとパフォーマンス 👉ウェブサイトの読み込み速度もはやい
  2. 柔軟なテーマシステム 👉カスタマイズ性が高くウェブサイトのデザインを自由に変更できる
  3. Markdownサポート 👉書きやすい
  4. SEO最適化できる 👉メタデータの設定やパーマリンクのカスタマイズなどが簡単

今回の挑戦

HugoとZenn、それぞれの特性を活かしてGithubリポジトリで同時に運用しようと思いました。

具体的にはGithubリポジトリ1つにコミットしたらHugoでGithubPages上にあがって、Zennとも連携しておけばZennにも上がってええやん👨
ってなったんですが(今思うとそうでもない)

それぞれ連携&GithubPagesで表示するルールとして以下があります。


Zenn 👉リポジトリの[articles]配下に記事ファイルを置く
Hugo(というかGithubのルール) 👉リポジトリの[docs]配下に記事ファイルを置く


Hugoの設定でdocs配下に記事ファイルが生成されるように設定できるものの、元としたテーマとの互換性で記事ファイルが生成されたパスをうまく読み込めず。。

Hugoのテーマと設定ファイル諸々いじれば技術的には可能なんだろうなってところまでは行ったんだけど、これ以上時間かけるのもな、、というところできれいさっぱりオトコらしく諦めました。
嘘ですしっかりいじったむしろ2日くらい溶かした

まとめ

とりあえずHugoでサイト生成してテーマ入れて、ちょっとした設定変更はできるようになった&Zennでブログレビュー果たしたからよしとする。

https://docs.github.com/ja/pages/getting-started-with-github-pages/creating-a-github-pages-site

https://gohugo.io/

https://zenn.dev/zenn/articles/connect-to-github

GitHubで編集を提案

Discussion