GitHubページでプロフィールページ作った
会社外のアレコレで人と合う機会があったりして、最近個人名刺の必要性を感じてきた。 で、それに合わせて簡単なプロフィールサイトでも作ろうと思った。
GitHub Pages
以前からGitHub Pagesに興味があったので、それを使おうと思った。 ちょっと調べると参考になるサイトが色々ヒットする。
僕は以下のサイトを参考にさせて頂いた。
GitHub Pages テンプレートの使い方
上記のサイトにも書いてあるんだけど、GitHub Pagesのテンプレートを使うには、
- GitHub上でリポジトリを作成
- リポジトリページから
Setting
ページを開く GitHub Pages
>Automatic page generator
からLaunch automatic page generator
を選択- サイト内容の編集画面に移動するので、いろいろ入力し、
Continue to layouts
を選択する。 - レイアウト・テンプレートを選ぶ画面に移動するので、そこでレイアウトを選択する。
という手順が必要。
当初はGitHub Pagesのテンプレートを利用しようと考えていたんだけど、個人的にどれもしっくり来なかったので、結局別のHTML/CSSテンプレート(CSSフレームワーク)を使うことにした。
Concise CSS
僕はHTML/CSSを書くのは面倒で嫌いなので、なるべくシンプルに扱えそうな構成のモノを探してみた。 探すに当たって以下のサイトが凄く参考になった。
色々見ていった結果、ConciseCSSが気に入ったので、それを利用させて貰うことにした。
ダウンロードリンクからCSSフレームワークを落としてきて、それを使うようにページを構成すればいいだけ……なんだけど、僕は面倒なので、ConciseCSSのテンプレートをそのまま使った。
Concise CSS テンプレートの使い方
- Concise CSSの公式ページのDownloadリンクから、CSSフレームワークをダウンロード。
- Get Started > Examples から、テンプレートを選ぶ。
- テンプレートサイトを開き、index.htmlとその他必要な追加分のcssを落とす。
- 特にリンクは無いので、ソースを表示してコピペした。
- テンプレートの内容を必要に応じて変えていく
作った
最終的に、GitHub Pages + Concise CSS でプロフィールサイト作った。
テンプレートを利用したお陰で基本的な部分は直ぐ出来たんだけど、どういった内容を書くか、っていうのでかなり時間が掛かった。
おわり(*・ω・)ノシ