LoginSignup
3
2

More than 1 year has passed since last update.

この記事について

hugo-adcademicにより、Github Pagesを利用してポートフォリオを公開するまでの手順を共有します。
ご参考までに私が作成したWebページはこのような形になっています。

ポートフォリオを作成する目的

ポートフォリオは自己紹介だけではなく、自身のこれまでの活動やスキルを他者(人事担当者、エンジニア)にすぐに理解してもらえることに役立ちます。
もし、転職を検討している場合、準備して公開しておくことで人事担当者の方の目に付いてご連絡いただく機会を得ることもできます。

また、ポートフォリオの更新は、自分のこれまでについて改めて見つめ直すことや、足りない部分・これからのチャレンジしたいことを発見する良い機会になります。

本環境

  • Macbook Air 2020
  • Intel Processor
  • macOS Ventura 13.1
  • hugo v0.101.0+extended darwin
  • go version go1.19
  • Homebrew 3.6.15

hugoのインストール

  1. hugoのインストール
    $ brew install hugo
  2. hugoのインストール確認
    $ hugo -v
    バージョンが出力されればOK

goのインストール

  1. goのインストール
    $ brew install go
  2. goのインストール確認
    $ go version
    バージョンが出力されればOK

Githubリポジトリの準備

Githubに新しいソースリポジトリを作成します。
Githubのstarter-hugo-academicリポジトリからUse this templateを選択して、リポジトリをforkします。

forkしたAcademic templateをダウンロードします。

$ git clone https://github.com/[yourname]/[yourname]-portfolio.git
$ cd [yourname]-portfolio
$ git submodule update --init --recursive

image.png

config/_default/config.tomlbaseurl自身のGithub Pagesのurlに書き変える。

config/_default/config.toml
baseurl = "https://[yourname].github.io/"

Github Pagesの公開リポジトリをサブモジュールとしてダウンロードする

$ git submodule add -f -b master https://github.com/[yourname]/[yourname].github.io.gi public

サンプルポートフォリオの確認

hugoサーバーを起動して、ブラウザ上でローカルサーバーを確認する。

$ hugo server

image.png

サイトコンテンツの更新

[yourname]-portfolio/content/home配下のファイルを更新する。
公開予定のないページは対応するマークダウンファイルを削除するもしくは、マークダウンファイル内をactive=falseのように書き変える。

Github上での公開

$ hugo
$ cd public
$ git add .
$ git commit -m"launch my portfolio"
$ git push origin main

https://[yourname].github.ioをブラウザで確認する。

参考

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2