GitHubPagesとHugoでポートフォリオを作った際のメモ

4695 ワード
githubpages portfolio Hugo portfolio テキストリンク

ポートフォリオ

エンジニアならカッコいいポートフォリオが欲しい！ということで作りました。

GitHub Pages

GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process, and publishes a website.

【引用元】：About GitHub Pages

GitHub Pagesを使えば静的サイトが簡単に作れるってことですね。

Hugo

Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.

Hugoは有名なOSSの静的サイトジェネレータの1つらしいです。
マークダウン形式で記述したmdファイルからhtmlを生成してくれます。

流れ

①GitHubにリポジトリを作成し、GitHub Pagesの設定を行う。
②Hugoのテンプレートを選ぶ。
③ローカル上にポートフォリオを作成。
④デプロイする。

GitHubにリポジトリを作成し、GitHub Pagesの設定を行う。

リポジトリを作成します。
リポジトリ名をポートフォリオのURLのホスト名と同名(全部小文字)になるように作成します。
例) ユーザー名がForJobOkの場合　→　リポジトリ名をforjobok.github.ioとする

あとは下記を参考にGitHub Pagesの設定を行います。
【参考リンク】：GitHub Pages サイトを作成する

Hugoのテンプレートを選ぶ

Hugo Themesの中からお気に入りを見つけます。
作者からの説明が丁寧に書いてあるものを選んだ方がいいかもです。

ローカル上にポートフォリオを作成。

Hugoを使用する環境を手に入れるのは超簡単です。
下記コマンドを入力するだけです。
私の場合は管理者権限で起動したコマンドプロンプトでないとダメでした。

Windowsの場合
choco install hugo -confirm

【参考リンク】：Install Hugo

あとは先ほど選んだテーマの説明通りにテンプレートをCloneしてきて編集します。

ローカル上でプレビューするには、
ポートフォリオのディレクトリに移動し下記コマンドを入力し、ローカルサーバーを立ち上げ、
http://localhost:1313/ をブラウザで開けばOKです。

hugo server

デプロイする。

ポートフォリオのディレクトリに移動し下記コマンドを入力します。

hugo

これでmdファイルからhtmlが生成されました。
あとはリポジトリに反映すれば完成です。

詰まったところ

Twitterで共有した際にカードが表示されない。

ベースとなるhtmlを特定し、下記を記述して解決しました。

<head>
   <meta name="twitter:card" content="summary">
   <meta property="og:title" content="hoge">
   <meta property="og:description" content="hoge">
   <meta property="og:image" content="絶対パス">
</head>

og:imageは絶対パスでないとダメでした。
【参考リンク】：OGP設定 og:image で画像を指定しても表示(反映)されない場合にチェックすべき事項

なかなか反映されない

リポジトリへの変更が反映されるまでに少し時間がかかるようです。待つしかないです。

参考リンク

Hugo + GitHub Pages（独自ドメイン適応）でサイトを作成・公開する