Hugoを使ってポートフォリオサイトを作成したかったので、構築することにしてみました。
環境構築にgit使ったり、記述方法もマークダウンで書いたりと、
コードを書かないデザイナーにとっては敷居が少し高いのですが
Hugo+GitHunで無料で素敵なサイトが構築できるのでおすすめです。
Hugoの環境構築
作業フォルダの作成
適当にフォルダを作成します。
C:Hugo
子にも「bin」と「Sites」を作成
Hugo
L bin
L Sites
最新版のHugoをダウンロード
下記のサイトからHugoを最新のダウンロード「hugo_extended_xxx_Windows-64bit.zip」
※academicというテーマを使用する為にextended（拡張版）をダウンロードしています。
中身を解答してbinフォルダに格納します。
Hugo
L bin
L hugo.exe
L LICENSE
L README.md
L Sites
環境パスを通す
Hugoのコマンドを使いやすく設定します
コマンドプロンプトを開き
setx /M path "%PATH%;C:Hugobin"
「成功: 指定した値は保存されました」とでたら、コマンドを打って確認します。
hugo version
バージョンが表示されたら、OKです。
gitのインストール
デザイナーは苦手ですが、コマンドを打って環境構築したほうが確実なので下記のサイトからインストールしてきます。
Hugo同様に環境パスを通します。（インストール時にチェックをつければ自動でパスが通りますが一応手動の方法も書いておきます）
setx /M path "%PATH%;C:\Program Files\Git\cmd
コマンドプロンプトで
git --version
打ってバージョン（git version 2.23.0.windows.1など）が表示さればOKです。
サイトの作成
公式ドキュメントに沿って、環境構築します。
まずサイトのデータ場所を指定。
cd C:HugoSites
テーマの選定
様々なテーマがあるのですが、今回はacademicというポートフォリオのベースとして適したテーマにします！
git clone https://github.com/sourcethemes/academic-kickstart.git My_Website
テーマをクローン（コピー）します。
子の階層に移動して、Initialize（初期化します）
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よりシンプルなマークダウンで記述します。
- home ページの項目を管理。中身は「index.md」「about.md」「contact.md」「contact.md」[publications.md]の5つ
- authors about プロフィール
- project works 案件
- publication books 書籍
static
参照したい画像はこちらに格納
③githubでの公開方法
Githubのアカウントの作成
端折ります。
Githubの秘密鍵の設定
デザイナーが苦戦する場所なのですが、端折ります。
アップロード準備
- まず作業していたフォルダ名をわかりやすいように名前を変更しておきます
「ユーザー名+.github.io」（cg-method.github.io）
※ちなみにフォルダ名を変更してもローカルで表示確認できます
- 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
以上でアップロードが完了！
公開サイト
下記のURLへアクセスするとサイトが公開されているのを確認できます。
まとめ
書いてみてなのですが、あらためて…
- GitHubの設定
- GITコマンド
- マークダウンの編集
普段から業務でgitに触れていないデザイナーにとっては敷居が高い気です。。。
ただ乗り越えられると無料で高速な素敵なポートフォリオサイトが作成できるので、やはりおすすめしたいです。
