【Hugo】GitHub(無料)で構築できるポートフォリオサイトの作成方法

hugo-github-make-portfolio

前々から下記のサイトのようなポートフォリオサイトを作成したかったので、構築することにしてみました。

参考 Hugo + GitHub Pagesでポートフォリオを作るhttp://kohki.hatenablog.jp

環境構築にgit使ったり、記述方法もマークダウンで書いたりと、

コードを書かないデザイナーにとっては敷居が少し高いのですが

Hugo+GitHunで無料で素敵なサイトが構築できるのでおすすめです。

Hugoの環境構築

作業フォルダの作成

適当にフォルダを作成します。

C:\Hugo

子にも「bin」と「Sites」を作成

Hugo
 L bin
 L Sites

最新版のHugoをダウンロード

下記のサイトからHugoを最新のダウンロード「hugo_extended_0.55.6_Windows-64bit.zip

https://github.com/gohugoio/hugo/releases

academicというテーマを使用する為extended(拡張版)をダウンロードしています。

中身を解答してbinフォルダに格納します。

Hugo
 L bin
   L hugo.exe
   L LICENSE
   L README.md
 L Sites

環境パスを通す

Hugoのコマンドを使いやすく設定します

コマンドプロンプトを開き

setx /M path "%PATH%;C:\Hugo\bin"

「成功: 指定した値は保存されました」とでたら、コマンドを打って確認します。

hugo version

バージョンが表示されたら、OKです。

gitのインストール

デザイナーは苦手ですが、コマンドを打って環境構築したほうが確実なので下記のサイトからインストールしてきます。

参考 gitgit-scm.com

Hugo同様に環境パスを通します。(インストール時にチェックをつければ自動でパスが通りますが一応手動の方法も書いておきます)

setx /M path "%PATH%;C:\Program Files\Git\cmd

コマンドプロンプトで

git --version

打ってバージョン(git version 2.23.0.windows.1など)が表示さればOKです。

サイトの作成

公式ドキュメントに沿って、環境構築します。
参考 Academic: the website builder for Hugogithub.com

まずサイトのデータ場所を指定。

cd C:\Hugo\Sites\

テーマの選定

参考 Hugo Themesthemes.gohugo.io

様々なテーマがあるのですが、今回はacademicというポートフォリオのベースとして適したテーマにします!

ちなみに以前にもWIKI用にHugoを導入方法書いているので、こちらも参考になります。

【Hugo】静的サイトジェネレーターでのサイト作成方法
git clone https://github.com/sourcethemes/academic-kickstart.git My_Website

テーマをクローン(コピー)します。

子の階層に移動して、Initialize(初期化します)

cd My_Website
git submodule update --init --recursive

以上でテーマの設定が完了です!

ローカル環境でサイトの表示をする

コマンドプロンプトから

cd C:\Hugo\Sites\My_Website
hugo serve

エラーがでなければ成功です!

ブラウザで下記のURLを開くとサイトを表示できます。

http://localhost:1313/

ポートフォリオサイトのコンテンツ作成

下記のサイトを参考にしています

参考 Hugo + GitHub Pagesでポートフォリオを作るhttp://kohki.hatenablog.jp

主に3つのフォルダ内だけ調整します

①config

_defaultの中身です。設定周り。

  • config.toml サイトの環境設定。**サイト名を入力します。そしてgithubへのパブリッシュ用の設定の記述も足しておきます。
baseurl = "https://ユーザー名.github.io/"
canonifyurls = true
publishDir = "docs"
  • menus.toml ヘッダーメニューの項目を入力します。urlはcontentのフォルダ名を記述します。

  • params.toml お問い合わせ先の情報を入力します。

②content

実際の内容はをHTMLよりシンプルなマークダウンで記述します。

  • home ページの項目を管理。中身は「index.md」「about.md」「contact.md」「contact.md」[publications.md]の5つ
  • authors about プロフィール
  • project works 案件
  • publication books 書籍

static

参照したい画像はこちらに格納

③githubでの公開方法

Githubのアカウントの作成

端折ります。
参考 GitHubアカウント作成方法qiita.com

Githubの秘密鍵の設定

デザイナーが苦戦する場所なのですが、端折ります。

参考 GitHubの登録手順。SSH設定&リポジトリをclone, pushまで解説vdeep.net

アップロード準備

  1. まず作業していたフォルダ名をわかりやすいように名前を変更しておきます
    「ユーザー名+.github.io」(cg-method.github.io)

※ちなみにフォルダ名を変更してもローカルで表示確認できます

  1. Githubへアクセス。プラスボタンを押してリポジトリだけ作成します。
cg-method.github.io

アップロード方法

  1. コマンドプロンプトを起動

gitコマンドを使って設定していきます(要秘密鍵の設定)

  1. Hugoのディレクトリに移動して、Hugoコマンド
cd C:\Hugo\Sites\cg-method.github.io
hugo

docsというフォルダが作成され、公開の用のデータがまとめてあります。

  1. 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
  1. プッシュ
git push -u origin master

以上でアップロードが完了!

公開サイト

下記のURLへアクセスするとサイトが公開されているのを確認できます。

https://cg-method.github.io/

作業用データ

もし参考になれば…

ダウンロード

まとめ

書いてみてなのですが、あらためて…

  • GitHubの設定
  • GITコマンド
  • マークダウンの編集

普段から業務でgitに触れていないデザイナーにとっては敷居が高い気です。。。

ただ乗り越えられると無料で高速な素敵なポートフォリオサイトが作成できるので、やはりおすすめしたいです。