GitHub PagesとHugoでポートフォリオサイトを作った-ぐぐりらにっき

こんにちは、ぐぐりら(<a href="https://twitter.com/guglilac">@guglilac</a>)です。

就活やらバイトやインターンなど、面接する機会が多くなってきたこともあり、自分の経歴やアウトプットをまとめる場が欲しくなりました。

このブログは特に名前など出していないので、ここにポートフォリオ的なものを載せるのはちょっとあれだし、ということから、別にポートフォリオサイトを作ろうと思いました。

他にも、知人のエンジニアにGitHub Pages + 静的ページジェネレータで技術ブログなりポートフォリオなり作るのがイケてるんだぜ、って言われて使ってみたかったという理由も大きいです。

ブログはBloggerで結構カスタマイズしちゃったし、まあ困ってはないので乗り換える気にもならず。

GitHub Pages + 静的ページジェネレータを試す場としてポートフォリオは手軽で良さそう！と思って始めました。

## 技術選定

選定といっても大したことはせず。

GitHub Pages + 静的ページジェネレータは多くの人がやっていて、記事とかもたくさん転がっているのでそれらをざーっと眺めてみました。

静的ページジェネレータにもいろいろ種類があって、今回僕がつかったHugoのほかにも、GitHub Pagesの標準としてJekyllというものや、node.jsで作られているHexoというものもあるらしいです。

自分の好きなReactを使ったGatsbyというものも最近注目されているなど、気になるものはいろいろありましたが、

* 良さげなテーマデザインがある(テーマが豊富)
* 解説記事が多い
* ブログ用ではなく自己紹介ページ用のテーマがある

あたりを基準に選びました。

## 開発の流れ

HugoはGo言語で作られているらしいですが、Go言語はインストールする必要がなかったです。手軽。

1. 雛形となるディレクトリを作る
1. themeをダウンロードしてくる
1. ダウンロードしたテーマのファイル,ディレクトリをディレクトリ直下の対応するところにコピーしてくる
1. ローカルにサーバーを立ててプレビューを見ながら開発(直下の方をいじる)
1. ある程度できたらビルドして公開用ディレクトリを作成
1. 公開用ディレクトリをGitHubにpushする

### ディレクトリ作成
まず雛形となるディレクトリを作ります。
```bash 
Hugo new site sitename
```
これによりsitenameディレクトリと、その中に
```
config.toml data        resources   themes
archetypes  content     layouts     static
```
が作られます。ほぼ空っぽのディレクトリですが、ここにいろいろ作っていきます。

### テーマのダウンロード
次に、気に入ったテーマをダウンロードしてきます。
テーマのレポジトリのところに行ってurlをコピーして、themesの中で`git clone`しましょう。

themesの中にテーマがダウンロードされます。

最初よくわからず、ディレクトリ直下の`config.toml`に`theme=hoge`みたいに書いて、themesの中にダウンロードしたテーマ自体を編集していました。

今思うと、ディレクトリ直下のlayoutとかstaticとかにthemeからコピーしてきて、そちらをいじって開発していくのがいいのかと思います。

ディレクトリ直下の`config.toml`に`theme=hoge`みたいに書いてみるのは、お試し的な用途なのかな？

### ローカルでチェック

```bash
hugo server
```
をするとサーバーが起動するので、そこで開発の状況が確認できます。

ファイルが更新されると自動で変更が反映されるので、基本的にサーバーは立てっぱなしでいいと思います。

### ビルド

完成したら、(もしくはある程度できたら)公開用のファイルを作るためにビルドをします。

基本的なことですが、いままで書いていたのは生成するための生成元ファイルで、これ自体をGitHubにおいてもダメです。静的ページジェネレータを使ってビルドして、公開用のファイルを作りましょう。

ビルドはこうやります。

```bash
hugo
```
速いです。Hugoは速さがウリらしいです。速い。
(ほかの使ってないから比較はできないけど)

ビルドすると、ディレクトリ直下にデフォルトだと公開用ディレクトリである`public`というディレクトリができます。
この中にHTMLとかCSS、JS、画像ファイルなどが入っています。

このpublicをGitHubにおけば公開できます。

ここまで、Hugo側の流れを追ってきました。次に、生成された公開用の`public`ディレクトリをGitHub pagesで公開するところを見ていきます。

## 公開まで

GitHub pagesはユーザーページとプロジェクトページの2種類を作ることができます。

今回はポートフォリトサイトを作るという目的なので、ユーザーページを作っていきます。

ユーザーページは、`username.github.io`というレポジトリをGitHubで作って、masterブランチのディレクトリ直下にファイルやディレクトリをおくことで作成することができます。

なので、先ほどビルドしてできた`public`ディレクトリを`username.github.io`レポジトリと紐付けてpushすれば公開できるわけです。

なのですが、公開するファイル以外の生成元のファイル(`hugo new site "sitename"`してできるやつ)ももちろん同じGitHubのレポジトリで管理しておきたいという気持ちが生じます。

`username.github.io`レポジトリに`sitename`ディレクトリ全体をpushすればいいように思いますが、それだとmasterブランチのディレクトリ直下が公開対象という制約にひっかかり、うまく表示されなくなります。

ユーザーページめ。。。となります。

ただ、先人たちがちゃんと解決してくれているので、記事を参考に頑張るとうまくできます。

[Hugo + GitHub Pagesでポートフォリオを作る - プログラミングで世界を変える](http://kohki.hatenablog.jp/entry/hugo-portfolio)

[GitHub PagesのUser Pagesでドキュメントルートを変更するにはmasterを殺す - Qiita](https://qiita.com/kwappa/items/03ffdeb89039a7249619)

何をやっているかというと

sourceブランチを生成元のファイルを保管するブランチにして、デフォルトブランチをsourceブランチに設定しています。
masterブランチを一旦消して、docsディレクトリ自体をmasterブランチとしてpushしている(subtreeとかいう)

なので、GitHubのページにいってsourceブランチとmasterブランチを見比べると、sourceブランチは`config.toml`とかがいるのに対し、masterブランチはdocディレクトリの中身が直下にある形になる。

GitHub pagesのユーザーページは、masterブランチの直下にあるファイルのみが公開対象だから、この方法でどうにかできる。

これをやらずに、ユーザーページでかつ生成元ファイルと公開ファイルを同じレポジトリで管理するのは難しそう。
考えた人頭良いな。

ちなみに、デフォルトで`hugo`コマンドを打つと`public`ディレクトリに公開用ファイルが生成されるが、今回は記事に従って`config.toml`に`publishDir="docs"`を追加している。`docs`以外の名前でも今回の場合大丈夫そうな気がするけど。

長くなりましたが、これで大丈夫です。

ちなみに、`themes`を`.gitignore`にいれてsourceにpushしないようにすると良いです。

## 運用
ずっとローカルではsourceブランチにいて作業します。

### コンパイルした公開用フォルダをmasterブランチにpushする

記事にもありますが、

```bash
git subtree push --prefix docs/ origin master
```
で`docs`ディレクトリのみをmasterブランチにpushできます。

ただ、いちいちこれうつのはあれのでシェルスクリプト(`deploy.sh`)にしました。

### 生成元のファイル群をsourceブランチにpush
sourceブランチにいる状態で普通にpushすればいい

```bash
git push origin source
```

## ファビコン追加

おまけ。
細かいですが、最初ファビコンが設定されていなくて、公開したときもブラウザのタブがダサかったので、ファビコンを設定しました。

`head`内にこれを追加すればおっけー
```html
<link rel="shortcut icon" type="image/x-icon" href="path/to/favicon.jpg">
```

## 記事作成

今回自分は`prologue`というポートフォリオ用のテーマを選んだのでシングルページにしか対応しておらず、記事追加はできませんでした。(正確にはマークダウンファイルは作れるけどビルド時にhtmlになってくれない)

[Prologue | Hugo Themes](https://themes.gohugo.io/prologue/)

```bash
hugo new posts/hoge.md
```
的なかんじ。これで`content/posts/hoge.md`が作成される。

ブログを運営するならこれで。

markdownでかけるし、いろいろテンプレートを作ったりタグつけたりできるっぽいので、調べてみると楽しいかもしれません。

markdownでかけると移植しやすくていいですね。Qiitaとか。

## まとめ

以上、GitHub pagesとHugoを使ってポートフォリオサイトを作って公開する話でした。

いろいろ調べて勉強になったので、次になにか静的ページ作りたくなった時はこれで手軽に作れるといいなと思います！

ありがとうございました。

GitHub PagesとHugoでポートフォリオサイトを作った

0 件のコメント:

コメントを投稿

このブログを検索

POPULAR POSTS

SPONSORED LINK

RECENT POSTS

TWEETS

ARCHIVES

LABEL

CONTACT