Hugo + GithubPages で公式サイトを作り直したお話
こんにちは、@pokohideです。
この度、OthloTechの公式サイトをリニューアルしました。過去のサイトは
Node.js | サーバーサイド |
Material UI | CSSフレームワーク |
Heroku | PaaS |
gulp | タスクランナー |
ect | テンプレートエンジン |
サーバーサイドも自前で作っておけば何か機能を追加したいと思ったときに対応できるかなと、サーバーサイドも書いていたのですが 当分は必要にならないだろうという理由と、動作に不調があったので、乗り換えることにしました。
リニューアルする目的としては
- マークダウンで記事が書ける
- 保守が楽
この条件から、今回は Hugo
と GitHub Pages
で構成しました。
Hugo
Hugo
はGo言語で動いている静的サイトジェネレーターで静的なhtml
を生成することができます。静的サイトジェネレーターは他にも
Jekyll
やHexo
など他にも色々あったのですが、なんとなくで今回はHugo
を選びました。
一応特徴としては、記事の生成が高速らしく、他のブログから参照したのが以下の表。
記事数 | 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 |
1000記事の生成ともなると、違いがわかるほどの速いことがわかります。まぁ1000記事まで貯まるまでには何年かかるかわからないですけどね。
Hugo
のテーマはここにあるので、これを参考にして作るか自作するかどちらでもいいでしょう。
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