HugoとGitHub PagesでMarkdownベースのWebサイトをお手軽に構築します。
今回は行った作業の概要のみをまとめて細部については省略します。
経緯
CodeIQで出題しているデスマコロシアムのWebサイトを作りたい、
と前々から思っていて放置していたのですが、
最近CodeIQのアイコンイラストをお願いしている
Webデザイナの湊川あいさんのアドバイスもあり着手することにしました。
作成しはじめた時点ではデスマコロシアムが最終回になる予定じゃなかったんですけどね・・・
湊川あいさんについて
マンガでわかるWebデザイン執筆中の湊川あいさんにデスマコロシアムのアイコンを発注しました。
これが成果物です。
湊川さんは、Webデザイナでありつつイラスト・SEO・マーケティングなど
幅広い知識を持っており、アイコンイラストのみの枠に閉じていません。
マネーフォワード社のエンジニアブログに掲載されている下記の記事に有るような視点を持った方です。
【レポート】スタートアップのデザイナー集合! サービスづくりについて語り合う会 - マネーフォワード エンジニアブログ
「デザイン」だけの目線でレビューをしてしまうと、好き嫌いでの永遠レビュー地獄になってしまう。 デザイナーもきちんとビジネス目線で考えて、レビューを「選択」「決定」の場にしていく必要がある。
湊川さん関連リンク
- 湊川さん Twitter アカウント
- マンガでわかるWebデザイン Twitter アカウント
- 湊川さん note アカウント
- ITエンジニアさん必見「LTSV問題」で力試し! イラストを描かせていただきました - note
湊川さんのポートフォリオは以下です。
何か発注・相談したい方は、お問い合わせフォームから。
MIXED - 絵を描くWebデザイナー 湊川あいポートフォリオ
Hugoとは?
Go言語製のWebサイトエンジンです。詳しくは下記を参照。
GitHub Pagesとは?
GitHub PagesはGitHubのリポジトリにpushするだけで手軽に、無料でWebサイトを構築できるサービスです。
構築手順
- Hugoのテーマを選定。今回は hugoscroll を選びました。
- config.tomlに必要な項目を設定
- Markdownでコンテンツを作成
- 基本レイアウトを変更( themes/hugoscroll/layout 配下の各種htmlを編集 )
- 各ページ間に問題への導線とツイートボタンを追加
- OGPの設定を追加。 OGPについては => OGP(Open Graph Protocol)について - Tbpgr Blog
- フッターに個人サイトへのリンクを追加
- Google Webフォントの設定を追加
- 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のリポジトリは以下です。