Tbpgr Blog

Employee Experience Engineer tbpgr（てぃーびー） のブログ

HugoとGitHub PagesでMarkdownベースのWebサイトをお手軽に構築

Hugo GitHub デスマコロシアム CodeIQ

f:id:tbpg:20150816032304j:plain

HugoとGitHub PagesでMarkdownベースのWebサイトをお手軽に構築します。
今回は行った作業の概要のみをまとめて細部については省略します。

経緯

CodeIQで出題しているデスマコロシアムのWebサイトを作りたい、
と前々から思っていて放置していたのですが、
最近CodeIQのアイコンイラストをお願いしている
Webデザイナの湊川あいさんのアドバイスもあり着手することにしました。

作成しはじめた時点ではデスマコロシアムが最終回になる予定じゃなかったんですけどね・・・

湊川あいさんについて

マンガでわかるWebデザイン執筆中の湊川あいさんにデスマコロシアムのアイコンを発注しました。
これが成果物です。

f:id:tbpg:20150816032304j:plain

湊川さんは、Webデザイナでありつつイラスト・SEO・マーケティングなど
幅広い知識を持っており、アイコンイラストのみの枠に閉じていません。

マネーフォワード社のエンジニアブログに掲載されている下記の記事に有るような視点を持った方です。

【レポート】スタートアップのデザイナー集合！ サービスづくりについて語り合う会 - マネーフォワード エンジニアブログ

「デザイン」だけの目線でレビューをしてしまうと、好き嫌いでの永遠レビュー地獄になってしまう。 デザイナーもきちんとビジネス目線で考えて、レビューを「選択」「決定」の場にしていく必要がある。

湊川さん関連リンク

湊川さんのポートフォリオは以下です。
何か発注・相談したい方は、お問い合わせフォームから。

MIXED - 絵を描くWebデザイナー 湊川あいポートフォリオ

Hugoとは？

Go言語製のWebサイトエンジンです。詳しくは下記を参照。

tbpgr.hatenablog.com

GitHub Pagesとは？

GitHub PagesはGitHubのリポジトリにpushするだけで手軽に、無料でWebサイトを構築できるサービスです。

GitHub Pages

構築手順

  • Hugoのテーマを選定。今回は hugoscroll を選びました。
  • config.tomlに必要な項目を設定
  • Markdownでコンテンツを作成
  • 基本レイアウトを変更( themes/hugoscroll/layout 配下の各種htmlを編集 )
  • GitHubにdeathcolo Organizationを作成
  • GitHubにdeathcolo/deathcolo.github.io リポジトリを作成
  • お名前.comで deathcolo.com を取得
  • GitHubにCNAMEファイルを追加し、独自ドメインを設定
  • deathcolo/deathcolo.github.ioリポジトリのmasterブランチにコンテンツをpush

たったこれだけの手順でホームページの完成です。

http://portal.deathcolo.com/portal.deathcolo.com

Hugoは公式サイトのドキュメントも充実しており、迷いどころが少なかったです。

リポジトリ

実際に構築したデスマコロシアムのWebのリポジトリは以下です。

github.com

資料