Help us understand the problem. What is going on with this article?

自己紹介をサボるためにポートフォリオを作る

最近,知らない場所で知らない人に自分が作ってきたものを紹介する機会が増えたんですが,毎回それをするのはコストがかかるし自分でも覚えてないものがあったりするので,そういうときに「これ見てください」って言って済ませられるように過去の制作物をまとめたポートフォリオを作りました.

https://te260ku.github.io/portfolio/

Golangベースの静的なサイトジェネレーターとして知られるHugoを使って作ったポートフォリオサイトをGithub Pagesにデプロイしています.これについて書いた記事はすでにたくさんありますが,デプロイの手順が少し複雑だったので,自分用の備忘録として残しておこかと思います.

スクリーンショット 2020-02-12 17.32.49.png

1. 公開用サイトを作成する

作業環境

macOS Mojave 10.14.6

Hugoのインストール

まずはhomebrewを使ってhugoをインストールします.

$ brew install hugo

サイトの生成

任意のディレクトリに移動して,以下のコマンドを叩きます.ちなみにhugoはサイト生成の速さを推しているらしく,信じられないくらい速く終わります.

$ hugo new site portfolio

テーマを適用する

hugoでは基本的にテーマと呼ばれるテンプレートのようなものをベースにサイトを作ります.今回はhugo-cardsテーマをsubmoduleとして登録します.そうすると,元からあったthemesディレクトリの中に色々なファイルが生成されます.

$ git submodule add https://github.com/bul-ikana/hugo-cards themes/hugo-cards

設定ファイルの編集

hugoでは設定ファイルが意外と重要です.ルートディレクトリにあるconfig.tomlを編集します.今回の変更点は以下の通りです.その他細かい設定は.テーマの開発者が公開しているドキュメントの通りに進めれば大丈夫だと思います.

  • baseUrlをhttps://<アカウント>.github.io/blogにする

  • theme = "hugo-cards"で使用するテーマを指定する

  • piblishDirをdocsに変更する
    ビルドされたファイル群が作業ディレクトリ直下のdocsディレクトリに保存されるように変更します.デフォルトだとpublicディレクトリが自動生成されます.

  • canonifyurlsをtrueにする
    相対パスではなくbaseurlを基点とした絶対パスに変更します.

config.toml
baseURL = "https://te260ku.github.io/portfolio/"
languageCode = "en-us"
title = "Tetsuro Okuya"
theme = "hugo-cards"
publishDir = "docs"
canonifyurls = true

ローカルサーバーで動作確認

以下のコマンドを実行するとサーバーを建てることができます.ここで適用したテーマが正しく表示されているか確認します.

$ hugo server -D

公開用にビルドする

デプロイするファイル群を生成するには以下のコマンドを実行します.これも相変わらず爆速です.

$ hugo

すると,ルートディレクトリ配下にdocsというディレクトリが新たに追加されます.この中に公開に必要なファイルが入っています.

2. Github Pagesにデプロイする

ビルドまで終わったので,いよいよデプロイしていきます.githubで適当なリポジトリを作ったうえで,まずは作業ディレクトリの中身を丸ごとpushします.

$ cd portfolio
$ git init
$ git add .
$ git commit -m "initial commit"
$ git remote add origin リポジトリのURL
$ git push origin master

無事pushできたら,githubリポジトリのSettingsにあるGithub Pagesというエリアを確認します.先ほど生成されたdocsディレクトリを公開したいので,Sourceの項目をmaster branch / docs folderに変更します.

スクリーンショット 2020-02-01 15.13.54.png

その後しばらくすると,https://ユーザー名.github.io/portfolio/にサイトがデプロイされていることを確認できます.github pagesは変更が反映されるまでに時間がかかることがあるので注意.

3. 記事の更新

今後何事もなければポートフォリオに掲載する作品は増えていくと思います.その際には以下のコマンドを実行して,生成されたファイルに記事の内容を記述し,上記の手順にしたがって再度リポジトリにpushすればサイトの内容が更新されます.ビルドするのを忘れずに.

$ hugo new <記事名>.md

4. おわりに

HugoとGithub Pagesを使うと,名刺代わりになるようポートフォリオサイトを秒速で作れる.

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした