😳

Hugoでお手軽最強ポートフォリオを作る

2022/10/07に公開

frontend

Hugo

tech

はじめに

私はフロントエンドが苦手で、デザインセンスもありません😭
手っ取り早く、ウケが良さそうでレスポンシブなポートフォリオを作りたかったので、サイトジェネレーターのHugoを使用してみました。

Hugoについて

hugo-toppage
Hugoとは、Goで記述された静的サイトジェネレータです。
使用したいThemeを選択して、あとは好きなようにカスタムすれば、お手軽にレスポンシブなサイトが構築できます。
他の静的サイトジェネレーターとして、React製のGatsbyや、RubyのJekyllなどが挙げられます。

Hugoのインストール

基本的に、公式ドキュメントの通りに進めれば問題ありません。

zsh

$ brew update
$ brew install hugo

Hugoのプロジェクトを作成

以下のコマンドで、実行に必要なファイル等を生成します。

zsh

# hugo new site <project-name>
$ hugo new site portfolio

project-nameには、作成したいディレクトリの名前を入力します。
今回はポートフォリをを作るので、「portfolio」と入力しました。

使用するThemeを選択

ますは、https://themes.gohugo.io/から、サイトに使用するThemeを決定します。
今回はPaperModという、洗練されたシンプルなデザインのThemeを使用することにしました。
PaperMod-thumbnail
PaperModでは、後述するprofile modeを選択することで、上手い具合にポートフォリオの画面を生成してくれます。
こちらのDownloadボタンを押すことで、Githubのリポジトリページが表示されますので、リポジトリのURLをコピーしておきましょう。

プロジェクトにThemeを追加

先ほど選択したThemeを、作成したプロジェクトに追加します。

zsh

$ cd portfolio
$ git init
$ git submodule add --depth=1 <追加したいThemeのリポジトリURL> <Theme名>

PaperModを選択した場合、以下のようになります。

zsh

$ cd portfolio
$ git init
$ git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

Webサイトをローカルで確認

それでは、現状のサイトをローカルで確認してみましょう。

zsh

$ hugo server -t PaperMod -w -D

PaperMod-local
現時点では、Themeを追加してから何もカスタマイズしていないので、デフォルトの内容となっています。

サイトをカスタマイズ

Hugoでは、プロジェクトルートにあるconfig.ymlに変更を加え、表示するコンテンツを指定します。

サイトに表示されるコンテンツをカスタマイズしていきます。
まずは、PaperModをProfile Modeに変更します。
config.tomlに、以下の内容を追記しましょう。

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' },
]