Hugoでお手軽最強ポートフォリオを作る
はじめに
私はフロントエンドが苦手で、デザインセンスもありません😭
手っ取り早く、ウケが良さそうでレスポンシブなポートフォリオを作りたかったので、サイトジェネレーターのHugoを使用してみました。
Hugoについて
Hugoとは、Goで記述された静的サイトジェネレータです。
使用したいThemeを選択して、あとは好きなようにカスタムすれば、お手軽にレスポンシブなサイトが構築できます。
他の静的サイトジェネレーターとして、React製のGatsbyや、RubyのJekyllなどが挙げられます。
Hugoのインストール
基本的に、公式ドキュメントの通りに進めれば問題ありません。
$ brew update
$ brew install hugo
Hugoのプロジェクトを作成
以下のコマンドで、実行に必要なファイル等を生成します。
# hugo new site <project-name>
$ hugo new site portfolio
project-nameには、作成したいディレクトリの名前を入力します。
今回はポートフォリをを作るので、「portfolio」と入力しました。
使用するThemeを選択
ますは、https://themes.gohugo.io/から、サイトに使用するThemeを決定します。
今回はPaperModという、洗練されたシンプルなデザインのThemeを使用することにしました。
PaperModでは、後述するprofile modeを選択することで、上手い具合にポートフォリオの画面を生成してくれます。
こちらのDownloadボタンを押すことで、Githubのリポジトリページが表示されますので、リポジトリのURLをコピーしておきましょう。
プロジェクトにThemeを追加
先ほど選択したThemeを、作成したプロジェクトに追加します。
$ cd portfolio
$ git init
$ git submodule add --depth=1 <追加したいThemeのリポジトリURL> <Theme名>
PaperModを選択した場合、以下のようになります。
$ cd portfolio
$ git init
$ git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
Webサイトをローカルで確認
それでは、現状のサイトをローカルで確認してみましょう。
$ hugo server -t PaperMod -w -D
現時点では、Themeを追加してから何もカスタマイズしていないので、デフォルトの内容となっています。
サイトをカスタマイズ
Hugoでは、プロジェクトルートにあるconfig.ymlに変更を加え、表示するコンテンツを指定します。
サイトに表示されるコンテンツをカスタマイズしていきます。
まずは、PaperModをProfile Modeに変更します。
config.tomlに、以下の内容を追記しましょう。
baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
# ここから追記
[params.profileMode]
enabled = true
title = 'ここにタイトルを入力'
subtitle = 'ここにサブタイトルを入力'
[params]
socialIcons = [
{ name = 'twitter', url = 'https://twitter.com' },
{ name = 'github', url = 'https://github.com' },
]
上記のようなページに、リアルタイムで変更されます。
あとはこのページを好きなようにカスタマイズして、完成です。
詳しい変更方法等については、READMEを読みましょう。
サンプルページ
PaperModを使用して、最終的にこのようなページになりました。
Discussion