みつのーと

頑張ってます・・・

GitHubページでプロフィールページ作った

雑記 HTML / CSS

会社外のアレコレで人と合う機会があったりして、最近個人名刺の必要性を感じてきた。 で、それに合わせて簡単なプロフィールサイトでも作ろうと思った。

GitHub Pages

以前からGitHub Pagesに興味があったので、それを使おうと思った。 ちょっと調べると参考になるサイトが色々ヒットする。

僕は以下のサイトを参考にさせて頂いた。

GitHub Pages テンプレートの使い方

上記のサイトにも書いてあるんだけど、GitHub Pagesのテンプレートを使うには、

  1. GitHub上でリポジトリを作成
  2. リポジトリページからSettingページを開く
  3. GitHub Pages > Automatic page generator から Launch automatic page generator を選択
  4. サイト内容の編集画面に移動するので、いろいろ入力し、Continue to layoutsを選択する。
  5. レイアウト・テンプレートを選ぶ画面に移動するので、そこでレイアウトを選択する。

という手順が必要。

当初はGitHub Pagesのテンプレートを利用しようと考えていたんだけど、個人的にどれもしっくり来なかったので、結局別のHTML/CSSテンプレート（CSSフレームワーク）を使うことにした。

Concise CSS

僕はHTML/CSSを書くのは面倒で嫌いなので、なるべくシンプルに扱えそうな構成のモノを探してみた。 探すに当たって以下のサイトが凄く参考になった。

色々見ていった結果、ConciseCSSが気に入ったので、それを利用させて貰うことにした。

ダウンロードリンクからCSSフレームワークを落としてきて、それを使うようにページを構成すればいいだけ……なんだけど、僕は面倒なので、ConciseCSSのテンプレートをそのまま使った。

Concise CSS テンプレートの使い方
  1. Concise CSSの公式ページのDownloadリンクから、CSSフレームワークをダウンロード。
  2. Get Started > Examples から、テンプレートを選ぶ。
  3. テンプレートサイトを開き、index.htmlとその他必要な追加分のcssを落とす。
    • 特にリンクは無いので、ソースを表示してコピペした。
  4. テンプレートの内容を必要に応じて変えていく

作った

最終的に、GitHub Pages + Concise CSS でプロフィールサイト作った。

テンプレートを利用したお陰で基本的な部分は直ぐ出来たんだけど、どういった内容を書くか、っていうのでかなり時間が掛かった。

おわり(*･ω･)ﾉｼ