OthloBlog - オスロブログ -

名古屋のIT系学生コミュニティOthloTechのブログです。

Hugo+GithubPagesでサイトをリニューアル

Web

Hugo + GithubPages で公式サイトを作り直したお話

こんにちは、@pokohideです。

この度、OthloTechの公式サイトをリニューアルしました。過去のサイトは
Node.js|サーバーサイド
Material UI|CSSフレームワーク
Heroku|PaaS
gulp|タスクランナー
ect|テンプレートエンジン

サーバーサイドも自前で作っておけば何か機能を追加したいと思ったときに対応できるかなと、サーバーサイドも書いていたのですが 当分は必要にならないだろうという理由と、動作に不調があったので、乗り換えることにしました。

リニューアルする目的としては

  • マークダウンで記事が書ける
  • 保守が楽

この条件から、今回は Hugo と GitHub Pages で構成しました。

Hugo

f:id:othlotech:20170829173856p:plain

HugoはGo言語で動いている静的サイトジェネレーターで静的なhtmlを生成することができます。静的サイトジェネレーターは他にも JekyllやHexoなど他にも色々あったのですが、なんとなくで今回はHugoを選びました。

一応特徴としては、記事の生成が高速らしく、他のブログから参照したのが以下の表。

{{% table %}}

|記事数|Octopress|Hexo|Pelican|Gitbook|Jekyll|Hugo| |:----|:-----|:----|:-----|:----|:-----|:----| |1|2.86|2.88|0.39|1.77|0.43|0.02| |10|2.98|2.96|0.44|1.64|0.37|0.03| |100|4.94|4.22|1.14|1.79|0.55|0.11| |1000|25.02|14.61|6.02|3.34|1.88|0.82| {{% /table %}}

静的サイトジェネレータの生成時間比較 より

1000記事の生成ともなると、違いがわかるほどの速いことがわかります。まぁ1000記事まで貯まるまでには何年かかるかわからないですけどね。

Hugoのテーマはここにあるので、これを参考にして作るか自作するかどちらでもいいでしょう。

http://themes.gohugo.io/

GitHub Pages

GitHub PagesはGitHubのサービスのひとつで、GitHub上のリポジトリにあるコンテンツを利用してWEBページとして公開できるホスティングサービスです。 静的ページ、静的コンテンツのみを公開できるのでNode.jsやPHPなどで動的ページの生成などはできません。

あと無料∩(ﾟ∀ﾟ∩)

詳細は本家を参照してください。

サイトつくろー

雑ですが、Hugoの導入からテンプレートを使ってサイトを作るまでの流れは以下のリンクを参考にしてください。

http://qiita.com/syui/items/869538099551f24acbbf

マークダウンで記事とかを書くときはShortcodeを使うといいですよ。

http://qiita.com/waytoa/items/4107945cbd3883f51755

デプロイの流れ

今回はOthloTechの組織アカウントでOthloTechというレポジトリを作って開発を行っていました。

GitHub Pagesには2種類の方法があって、グループページというアカウント名.github.ioというレポジトリのmasterブランチを反映する方法と プロジェクトページといって、適当なレポジトリのgh-pagesブランチをhttp://アカウント名.github.io/リポジトリ名/に反映する方法があります。

※ 最近ではどのブランチを反映するかを設定できるみたいです。ただ今回は通例に従ってgh-pagesブランチをデプロイブランチにすることにします。

今回は後者の方法で実装するので、gh-pagesにデプロイする流れを説明して終わりにします。流れとしては、同じレポジトリのあるサブディレクトリの中身を 別ブランチにpushする方法をとります。

そのためにgit-worktreeを使います。git-worktreeを使うと指定のブランチをサブディレクトリ以下にチェックアウト することができるので、作業用のブランチと公開用のgh-pagesブランチを切り替えずに同時に編集できるようになります。

hugo -d pages # pagesディレクトリにコンテンツを生成する。(デフォルトだとpublicフォルダ)

このコマンドでコンテンツをpagesフォルダに生成できるので、このディレクトリの中身をgh-pagesにプッシュします。

git checkout master
git worktree add pages gh-pages # pagesがブランチをチェックアウトするディレクトリ名、gh-pagesが取り込むブランチ名

これでgh-pagesブランチにpagesディレクトリ以下がプッシュされます。しかし、この方法だとコンテンツを消した際に再びhugo -d pagesと コマンドを打っても、過去の記事がpagesフォルダから消えずに残ったままになります。

なので、過去の記事を消して、記事を再生成して、デプロイするのをシェルを書いて楽します。

deploy.sh
#!/bin/sh

# pagesフォルダの ., .., .git 以外を消去
ls -la pages | grep -v -E '.|.git$' | xargs rm -rf

# deploy用のファイルを生成
hugo -d pages

# deploy
cd pages
git add .
git commit -m 'updated by deploy.sh'
git push origin gh-pages
chmod 755 deploy.sh # 実行権限を与える

これであとは

./deploy.sh

デプロイできます。ハッピー。

ドメイン設定

こうして公開したサイトに独自ドメインを設定して、 OthloTechの公式サイトとしました。

そのあたりはここを参考するとわかりやすいと思います。

http://qiita.com/tiwu_official/items/d7fb6c493ed5eb9ee4fc

さいごに

せっかくリニューアルしたので、イベントレポートやブログを書いていこうと思います！

一応作業のフローはプルリクベースで文章の校正などを見て、メンバーのLGTMが2つ以上ついたらマージ可能にするという体制で

記事の更新もしていこうと思っているので、そのあたりもまとまってきたらまた記事にしたいと思いますー！

これからもOthloTechをよろしくお願いしますo(*⌒─⌒*)o