GitHub PagesとHUGOで静的サイトのポートフォリオを作成する①

はじめに

静的サイトって何さ？

WordPressで管理しているようなサイトは動的サイトと呼ばれ、動的サイトは基本的にアクセスされる度にページを生成するような仕組みで動いています。
それに対して静的サイトはユーザーがアクセスする前に、予めページを用意しておくような仕組みでページを表示しています。

脱WordPress！静的サイトの特徴やメリットなどのまとめ
なるほど、PHPとかJavaとか使わず、HTML/CSS/JavaScriptだけでできてるようなページを言うのね

GitHub Pagesって？

GitHub Pages とは、GitHub による静的サイトのホスティングサービスです。とても簡単でお手軽です。しかも無料です。
例えば、自分のポートフォリオサイトやプロフィール、職務経歴書などを、GitHub Pages を使って公開しておくと、自己紹介をするときに便利です。 GitHub Pages とは、GitHub による静的サイトのホスティングサービスです。とても簡単でお手軽です。しかも無料です 10分でできる！GitHub Pagesで静的サイトを公開する方法
タダで静的サイトをインターネットに公開できるのね！
ポートフォリオも欲しかったし丁度よき。

HUGOって？

HUGOは、静的なhtmlを生成する事ができる静的ページジェネレータです。HUGOの場合、ローカル環境ではHUGOの動的機能を使って動的にサイトを開発し、成果物の出力時に動的要素を全て静的要素（html,css,js,img等）として出力します。 生成された成果物にはサーバサイドの処理を含まないため、サイトの表示速度は高速になり、サーバサイドの処理が無い分セキュリティリスクが減ります。 HUGOとは？
ふごー！オシャレな静的サイトを簡単に生成できるツールってことね。
HTML/CSSをイチからガリゴリ書く元気もないので丁度いいね！ 早速やってみよ。

GitHub Pagesに適当なサイトを公開する

GitHubでリポジトリを作成するよー。
ローカルに作ったリポジトリをクローンして、適当なHTMLを作ってコミット＆プッシュ！ 
$ git clone https://github.com/danishi/MyPortfolio.git
$ cd MyPortfolio/
$ echo '<html><body><h1>It works!</h1></body></html>' > index.html
$ git add index.html
$ git commit -m "add index.html"
$ git push origin master
マスターブランチに追加されます。
Settingタブを押してSourceのところをmaster brancheに変えます。
公開完了！
とても簡単でした（コナミ感）。

HUGOで静的サイトをジェネレートして
GitHub Pagesにデプロイする

ここからが本番。

↓こちらの記事を参考にやっていきます
Hugo + GitHub Pages でブログのプロトタイプを構築してみた。
↓ここからHUGOをダウンロード。
https://github.com/gohugoio/hugo/releases

今回はWindwos版を使うよー。
解凍するとEXEが入っているので、適当なフォルダに置いてパスを通します。 
# ローカルリポジトリのフォルダまで移動してプロジェクトを作成します。
>hugo new site myportfolio

# よさげなテーマを選んでダウンロード（https://themes.gohugo.io/）
>cd myportfolio
>cd themes
>git clone https://github.com/mismith0227/hugo_theme_pickles

# テーマをgit管理から外す
>cd infinity-hugo
>rmdir /S /Q .git

# プロジェクトのルートに戻りテスト投稿
>cd ..\..
>hugo new posts/test.md

# content\postにMarkdownファイルができるのでこれを編集
# -------- ここから --------
test.md
---
title: "Test"
date: 2019-04-04T13:49:02+09:00
draft: false
---

# Hello HUGO!

# -------- ここまで --------
# なるほど投稿はMarkdownで行うのね。スマート。

# config.tomlを編集する
# -------- ここから --------
baseURL = "https://danishi.github.io/"
languageCode = "ja"
title = "MyPortfolio"
thema = "aafu"
# -------- ここまで --------

ローカルでプレビューする
>hugo server
表示されているIPにアクセスすると…
でけた！ 
# 公開用にビルドします。  
>hugo

# publicフォルダにビルドされたサイトが出来上がります。     
# Gitプッシュ＝デプロイになる理解なのでプッシュしてみる。

>git add myportfolio    
>git commit -m "add hugo site"  
>git push origin master
アクセスできひん…。
なんかでとる…。
どうやら、GitHub Pagesで公開する場合、ビルドできないものを上げると怒られる模様。 一旦今のリポジトリを削除して、
素直に参考記事の通りリポジトリを2つに分けて作ってみる。 
# プロジェクトフォルダの階層でローカルリポジトリを作成する。
>hugo new site MyPortfolio
>git init

>git remote add origin git@github.com:danishi/myblog.git
>git add -A
>git commit -m "first commit"
>git push origin master

# hugoコマンドでpublicフォルダをビルド。サブモジュールなるものを作る。
>git submodule add git@github.com:danishi/danishi.github.io.git public
>cd public
>git add -A
>git commit -m "create submodule"
>git push origin master

# プロジェクトフォルダに戻り.gitmodulesをプッシュする。
先ほどの手順でサブモジュールのリポジトリを公開する。
と、思ったらすでに公開されてた。
なんでだ？

https://danishi.github.io/
でも取り急ぎ見れた！
メインのリポジトリでビルドしてから、サブモジュールのリポジトリをプッシュしてデプロイする流れになるんですね。
サブモジュールは今回初めて使いましたが、1つのプロダクトの中に別のプロダクトがサブモジュールとして組み込まれていて、それぞれ別にバージョン管理したいときとかに使うのかな？
Gitに不慣れなものでかなり手間取りましたが何とか公開できました！
次回はHUGOの勉強しながら見た目を整えていきたいと思います。 でわ！
Web制作者のためのGitHubの教科書 チームの効率を最大化する共同開発ツール Web制作者のための教科書シリーズ
記事の続き
GitHub PagesとHUGOで静的サイトのポートフォリオを作成する②

やってみた, 作ってみたGitHub, GitHub Pages, HUGO

Posted by danishi