【こういうのでいいんだよ】GitHub Pagesで職務経歴サイトを公開した【クオリティ】
目的
yagishというブラウザ上で職務経歴書を作成するサービスを使用していたが、自分のエディタで、かつ馴染みのあるマークダウンで書きたくなりました。
また、変更点を差分を確認できるために、GitHubで管理して、手間を書けずにデプロイしたい。
要件
- HTTPS必須
- マークダウンで書ける
- mainにマージされると自動でデプロイされる
- デザインはシンプルでいい
- 金銭・メンテ的にサーバーを持ちたくない
- 本名など踏み込んだ情報も書くので、簡易的なパスワード認証を入れたい
結論
GitHub Pagesを採用しました。
<username>.github.ioのリポジトリを作成し、下記のチュートリアルの通りにすれば簡単にデプロイ可能です。
URLは、https://<username>.github.io/となります。
ソースは、index.html > index.md > README.mdの順に探して該当するコンテンツを表示します。
考慮した点
要件でも上げましたが、6.を導入することが少し手間です。
前提として、静的なページですので、サーバーでの認証は不可なので、擬似的な実装です。
内容
先人がいましたので、下記をありがたく使用させていただきました。
内容としては、認証ページをindex.htmlを持っておき、パスワードとハッシュ化されたディレクトリが一致すれば配下にあるindex.htmlのコンテンツを閲覧できるというものです。
しかし、パスワード認証後に特定のpathに遷移しないといけないので、README.mdをそのまま表示することはできません。
なので、index.htmlを書かないといけないのですが、これは面倒です。
よって、pandocを導入し、書いたマークダウンをhtmlに変換します。
$ brew install pandoc
$ pandoc -s ./<hash_dir>/index.md -t html5 -c github.css -o ./<hash_dir>/index.html -T 職務経歴ページ
pandocで生成されるのは、あくまでプレーンなHTMLなので、CSSを入れたい時は何かしらを書きましょう。
pandocで-cオプションを設定することで、<link rel="stylesheet" href="github.css" />を挿入してくれます。
私の場合、github.cssは下記から拝借しました。
最終的なディレクトリです。
<hash_dir>/index.mdを編集するイメージです。
.
├── README.md
├── _config.yml
├── <hash_dir>
│ ├── github.css
│ ├── index.html
│ └── index.md
├── index.html
├── sha256.js
└── style.css
確認
-
https://<username>.github.io/のコンテンツ
凝ったことは難しいですが、プレーンなHTMLでしかないので、http-serverなどで確認可能なのも良いです。CDN経由でbootstrapなども読み込めます。
-
パスワード認証後のコンテンツ
ただし、URLがわかると直アクセスは可能なので、過信は禁物です。
維持費
パスワード認証の仕組み上、ディレクトリ構造がわかると認証をいれている意味が半減します。
よって、プライベートリポジトリにしないといけないので、プライベートリポジトリ x GitHub Pagesにするためには、有料プラン契約は必須です。
よって、Teamにすると、$4/month。
まとめ
Notionなど使用すれば、よりデザインを綺麗に無料でいい感じに公開できるかもしれない。
GitHubには毎日お世話になっているので、お布施も兼ねてということで個人的には納得してます。
今はそこまで更新ないのでデプロイ前に手作業で生成してますが、デプロイ前にpandocで自動変換する処理いれるとより楽かもしれないです。
以上、お疲れさまでした。
Discussion