ちゃんとしたポートフォリオをつくることにした
まずはこれをご覧いただきたい。
andou666.github.io
おわかりいただけただろうか?そう僕が昔作ったポートフォリオサイトである。GitHub Pagesで公開できる貴重なユーザ用リポジトリ*1をこんなクソみたいなものに使ってちゃんとしたポートフォリオが作れないでいたのです。だけど、GitHub Pagesはプロジェクト用リポジトリというものがあります。なので、本日はそっちを使って「ちゃんとしたポートフォリオサイト」を作っていこうと思ったのでした。
んで、作った。ちゃんとしたとは……?
andou666.github.io
とりあえずデザイン面はJekyll感を全力で出していきたい所存。こうやってGitHub上に静的サイトジェネレータを使ってサイトを公開するとなんか色々やった感のするリポジトリができていいんですよ。
GitHub - Andou666/poo-jekyll
こんな感じに色々ファイルが生成されるので、すごい頑張っている感しません?まあ自動生成がほとんどなんで見る人がみたらバレバレなんですけどね……。んで、肝心な書く内容なんですけど……、僕にはそういうのを載せられる実績なかった(爆笑)。まずは実績ですね。なんとかエンジニアとか自称して怪しい商材をつくらなきゃいけないですね……。
参考:Jekyll公式
Jekyll • シンプルで、ブログのような、静的サイト | プレーンテキストを静的サイトやブログに変えましょう
それで僕が叫んでいるJekyllですが以下のようなものです。
Jekyll はシンプルな、ブログを意識した静的サイトジェネレータです。 それは様々なフォーマットの生テキストファイルを含むテンプレートディレクトリをとり、 Markdown (または Textile) や Liquid コンバータを通して実行し、あなたの好みの Web サーバとサービス提供に適した、 完全かつすぐに公開できる静的 Web サイトを吐き出します。 Jekyll は GitHub Pages の背後で動いているエンジンでもあります。このことは、 プロジェクトのページ、ブログまたは Web サイトをGitHub のサーバから無料でホストするために Jekyll を使用できることを意味します。
機械翻訳的違和感を感じますが、静的サイトジェネレータです。GitHub Pagesがオススメしてくるサイトジェネレータです。そんなわけなんで今回これを使ってみました。
$ gem install bundler jekyll $ jekyll new my-awesome-site $ cd my-awesome-site $ bundle exec jekyll serve
導入はこんな感じ。最新版はbundle
使うようになっているので日本語版だけ見ていると混乱する仕様になってます。動作的な違いはどこにあるのかは分かんないです。
やったことメモ
多分、おそらくあとからぼこぼこと静的サイトをつくる予定なんで自分用メモ残しておきます。まあ詳しいことは公式をみて。僕はこの公式の英語サイトを毎度解読してサイトを公開するのやなんで自分用メモとして残すだけなんで……。
Configuring a publishing source for GitHub Pages - GitHub Help
「gh-pages」ブランチを利用して公開する
① 新規リポジトリを作成します
② リポジトリに公開するファイル(Jekyll)をプッシュします
③ 「gh-pages」ブランチを作成します。「master」は不要なんでgit branch -d master
で消します*2
④ GitHubの[Setting -> GitHub Pages -> Source] から「gh-pages branch」を選択して保存
以上で公開できるとのことです。masterは別に消す必要ないんですけど、普段使いもしなかったGitブランチ関連のコマンド使ういい機会だと思ったので使った。今は「gh-pages」なんてブランチ切る必要ないしね自己満足以外のなにものでもないのです。
詰んだところ
公式手順通りにすれば公開できるわけなんだけど詰まったところまとめる。
_config.yaml
baseurl: "/{your repository name}" url: "https://{your name}.github.io"
上記url指定しなきゃページ移動できないこと忘れて404だしてた。