アウトプットするwebサイトを変えていった話
# 概要
アウトプット用の web サイトをより良くする為の一連の話とそれに基づくアウトプットを記載。
# 初期段階
# 構成
とりあえず何も考えず VPS 契約して wordpress のブログ用テーマで公開してみた。
# 課題
- マークダウンが使えるプラグインを入れたが、web 上で編集するため通常のマークダウンより自由度が低く、書きにくい
- そもそも web にアクセス、ログインが面倒で作業スピードが遅くなる、wordpress の公開手順が面倒などいろいろ使いづらい
- VPS なのでサーバ保守が必要（VPS 上の centos に nginx、php-fpm、mysql の構成）
- VPS 使用分のお金がかかる
# 第二段階
# 構成
そもそも思考停止して wordpress にしたのが間違い。静的サイトジェネレータにする形で検討。特に何も考えずとりあえず VuePress を GitHub Pages にデプロイする形とした。
# 改善結果
- マークダウンが使えるプラグインを入れたが、web 上で編集するため通常のマークダウンより自由度低く、書きにくい
- そもそも web にアクセス、ログインが面倒、wordpress の公開手順が面倒などいろいろ使いづらい
→ ローカルでマークダウン書いて github に push する形でサイトのデプロイができる構成とした為、改善。
- VPS なのでサーバ保守が必要（VPS 上の centos に nginx、php-fpm、mysql の構成）
- VPS 使用分のお金がかかる
→ GitHub Pages はクラウドなので保守不要。かつ無料で使える為、改善。（因みに私は元々 GitHub の pro 版使ってるので、私は完全無料で使ってるわけでは無い）
その他、マークダウンファイルを git でバージョン管理できるので作業や管理が格段に楽になった。
# さらなる改善事項
- ページが増えるとビルドに時間がかかる
- 技術ドキュメントとブログ系記事を同じ VuePress 上に作成していて、それぞれに適したテーマを分けたほうが見やすい
# 第三段階
# 構成
用途ごとに静的サイトジェネレータごと分割した。技術ドキュメントはこれまで通り、ブログ系記事は VuePress のブログテーマを使用する形にした。
また、それと同時にブログ系記事の方は GitLab Pages の方にデプロイすることにした。
# 改善結果
- ページが増えるとビルドに時間がかかる
- 技術ドキュメントとブログ系記事を同じ VuePress 上に作成していて、それぞれに適したテーマを分けたほうが見やすい
→VuePress ごと分けたため改善。
# 一連の作業で得られた知見
# GitHub Pages の仕様認識誤り
「GitHub アカウント名」/github.io で作れるリポジトリは 1 アカウント 1 つなので、他リポジトリで作った場合、独自ドメインを使ってもトップページがリポジトリのディレクトリ名になるかと思っていたが、これは間違いだった。
例えば以下のケースの場合、
- ドメイン：hogehoge.com
- リポジトリ名：blog
サイトのトップが「hogehoge.com/blog」になると思っていたが、「hogehoge.com」で公開できる。
独自ドメインを設定する際に使用するファイル「CNAME」の名前からして勝手にそうなると思い込んでいたのが過ち。実際には CNAME と言うよりはリバプロでリダイレクトの動きをしているのかと。
※DNS レコードで設定する CNAME はドメイン部分までしか関与できない
# GitLab の CI/CD についての理解
GitLab Pages に静的コンテンツをデプロイする際、CI/CD を使用する。（GitHub Actions と似たような機能）
GitHub Actions と同様、基本的には yml で命令ファイルを作りそこに命令文を書いていく形だが、当然ながら GitHub Actions とは文法が違う。 とはいえ、やってることはほぼ同じなので GitHub Actions を使ってる人はすぐに CI/CD を使うことはできると思う。
# まとめ
所感だがエンジニアで技術ドキュメントやブログをやるなら静的サイトジェネレータ ☓ 無料ホスティングサービスの一択だと思う。