Hugoを使ってポートフォリオサイトを構築する手順をまとめました。
環境構築でGitを使用し、コンテンツもMarkdownで記述するため、
普段コードを書かないデザイナーにはややハードルが高く感じられるかもしれません。
しかし、HugoとGitHubを活用すれば費用をかけずに高速で洗練されたサイトを構築できるためおすすめです。
Hugoの環境構築
作業フォルダの作成
作業用のフォルダを作成します。
C:Hugo
Hugoフォルダの直下に「bin」と「Sites」を作成します。
Hugo
L bin
L Sites
最新版のHugoをダウンロード
GitHubのReleasesページから、最新版のHugo（hugo_extended_xxx_Windows-64bit.zipなど）をダウンロードします。
※academicテーマを使用するためにextended（拡張版）をダウンロードしています。
ZIPファイルを解凍し、中身の実行ファイルをbinフォルダへ配置します。
Hugo
L bin
L hugo.exe
L LICENSE
L README.md
L Sites
環境パスを通す
どこからでもHugoコマンドを実行できるように、環境変数Pathを設定します。
コマンドプロンプトを開き、以下のコマンドを実行します。
setx /M path "%PATH%;C:Hugobin"
「成功: 指定した値は保存されました」と表示されたら、バージョン確認コマンドを実行します。
hugo version
バージョン情報が表示されれば、Hugoの設定は完了です。
Gitのインストール
コマンド操作に慣れていない場合でも、手順どおりに進めれば問題ありません。
公式サイトからインストーラーを入手してインストールします。
Hugoと同様にPathを通します。
インストーラー実行時に自動設定するオプションもありますが、ここでは手動で設定する手順を記載します。
setx /M path "%PATH%;C:\Program Files\Git\cmd
コマンドプロンプトで以下のコマンドを実行します。
git --version
バージョン情報（git version 2.23.0.windows.1など）が表示されれば完了です。
サイトの作成
公式ドキュメントに沿ってサイトを構築します。
まず、作成したSitesディレクトリに移動します。
cd C:HugoSites
テーマの選定
Hugoには多彩なテーマがありますが、今回はポートフォリオに適した「academic」を使用します。
git clone https://github.com/sourcethemes/academic-kickstart.git My_Website
テーマのリポジトリをクローンします。
生成されたディレクトリへ移動し、サブモジュールを初期化・更新します。
cd My_Website
git submodule update --init --recursive
以上でテーマの設定は完了です。
ローカル環境でサイトを表示する
コマンドプロンプトで以下のコマンドを実行し、ローカルサーバーを起動します。
cd C:HugoSitesMy_Website
hugo serve
エラーが出ずにビルドが完了すれば成功です。
ブラウザで表示されたURLを開くと、ローカルサイトを確認できます。
http://localhost:1313/
ポートフォリオサイトのコンテンツ作成
主に以下の3つのフォルダを編集してカスタマイズします。
①config
_defaultフォルダ内の各種設定ファイルを編集します。
- config.toml サイトの環境設定。*サイト名を入力します。そしてgithubへのパブリッシュ用の設定の記述も足しておきます。
baseurl = "https://ユーザー名.github.io/"
canonifyurls = true
publishDir = "docs"
- menus.toml ヘッダーメニューの項目を入力します。urlはcontentのフォルダ名を記述します。
- params.toml お問い合わせ先の情報を入力します。
②content
実際のページ本文は、HTMLよりもシンプルなMarkdownで記述します。
- home ページの項目を管理。中身は「index.md」「about.md」「contact.md」「contact.md」[publications.md]の5つ
- authors about プロフィール
- project works 案件
- publication books 書籍
③static
サイト内で参照する画像などの静的ファイルはこちらに格納します。
GitHubでの公開方法
GitHubアカウントの作成
GitHubのアカウントをお持ちでない場合は、事前に作成しておきます。
GitHubの秘密鍵（SSH）の設定
安全に通信を行うため、SSHキーの生成とGitHubへの登録を行います。
アップロード準備
- まず作業していたフォルダ名をわかりやすいように名前を変更しておきます
「ユーザー名+.github.io」（cg-method.github.io）
フォルダ名をGitHub Pagesのリポジトリ名に合わせて変更しても、ローカルでそのまま表示確認が可能です。
- Githubへアクセス。プラスボタンを押してリポジトリだけ作成します。
cg-method.github.io
アップロード方法
- コマンドプロンプトを起動
コマンドプロンプトからGitコマンドを実行してリポジトリに反映します。
- Hugoのディレクトリに移動して、Hugoコマンド
cd C:HugoSitescg-method.github.io
hugo
docsフォルダが生成され、公開用データが出力されます。
- Gitの初期化
公開用のdocsへ移動
cd docs
git init
4. コミットの実行
git add -A
git commit -m "Initial commit"
5. リモートリポジトリの追加とプッシュ
git remote add origin https://github.com/cg-method/cg-method.github.io.git
- プッシュ
git push -u origin master
以上でGitHubへのアップロードは完了です。
公開サイトの確認
GitHub PagesのURLへアクセスし、サイトが正常に公開されているか確認します。
関連記事や関連操作については、以下のリンクからご覧いただけます。
まとめ
今回の手順を振り返ります。
- GitHubの設定
- GITコマンド
- マークダウンの編集
普段業務でGitやコマンドラインに触れていない方には難しく感じられる部分もあります。
しかし、一度構築してしまえば無料で高速・高機能なポートフォリオサイトを運用できるため、挑戦する価値は十分にあります。