ここのところ、かなり詰めて勉強していたのですが休養も必要だと思い今日は休もう。 と、決めて本を読んでいたら…
「学習には、アウトプットが重要だよ。」
と書かれていて、「あァ、しっかりアウトプットしないとあかんなァ。」と思い結局、一日中Hugoと戯れてしまいました。
その際、エンジニアを目指すものらしく、gh-pagesにブログを公開するのは良いアピールになると思いアウトプット用に Hugoを使ってgh-pagesにブログを公開してみました。
結構、詰まったので詰まった点をアウトプットしていきます。
まずは、Hugoをインストールしてみる。
僕は、macを使用しているのでHomebrewでインストールしました。
$ brew install hugo
Hugoをインストールします。
次に、ブログ用にインストールするので、適時、作業用のディレクトリに移動してサイトを作成します。
$ hugo new site ブログ名
例えば、hugo new site blog など
こうすると、サイトの基盤ができあがります。
blog
├── archetypes
├── config.toml
├── content
├── data
├── layouts
└── static
もし、こういった階層構造を確認したいのであれば、
$ brew install tree
してください。treeコマンドが使えるようになります。
テーマを入れてみる。
基盤ができたので、テーマをいれてみます。 いきなり、テーマを作成する猛者の方もいらっしゃると思いますが、まずは既存のテーマで挙動などを確認してみると良いと思います。
こちらに色んなテーマがあるので、お好きなテーマを選択してください。
テーマを選択すると、おそらくInstallationという項目があると思います。
その通りに実行します。
Polymerというテーマであれば、 (あ、hugo new site ブログ名 で作成したブログ名に、cdで移動しておいてください。)
$ mkdir themes
treeコマンドで確認すると、
.
├── archetypes
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
このようになっているはずです。
それでは、themesフォルダに移動して、
$ cd themes
$ git clone https://github.com/pdevty/polymer
してください。themesの中にテーマがクローンされます。
ローカルサーバで確認してみる
それでは、ローカルのサーバで確認してみましょう。
まずは、themesの１つ上の階層に戻って、
$ cd ..
$ hugo server -t polymer
として、http://localhost:1313にアクセスしてみてください。 サイトが表示されたでしょうか？
テーマの設定は完了です。
ちなみに、-tオプションは、テーマ指定のオプションです。
僕が現時点での簡単な理解をしているオプションは、
| コマンド | 意味 |
|---|---|
| -t | テーマの指定 |
| -w | ウォッチコマンド?変更した際にオートリロードされます。 |
| -D | 下書き(draft)を表示させる |
動作確認をしてみましょう。
試しに、下書き記事を作成します。
$ hugo new post/test.md
こうすると、content/post/test.md というファイルができます。
なかを見てみると、
+++
date = "2016-06-12T02:00:33+09:00"
draft = true
title = "test"
+++
こんな感じになっていると思います。
draft = true
なので、下書き状態ですよ。ということですね。
それでは、ローカルサーバで確認してみます。
$ hugo server -t polymer -D
-D オプションで、ドラフトも表示させるようにします。-D は大文字なので注意。
実行すると、記事が表示されたのが確認できたと思います。
基本は、このような感じです。
それでは、github-pagesでも確認できるようにしてみます。
github-pagesに反映させる。
github-pagesは更新に時間がかかる事もあります。 更新されなければ少し待ってみましょう。1分以内。
なには、ともあれGithubにリポジトリを作成しましょう。
僕は、とりあえず確認したかったのでシンプルに１つのリポジトリで進めました。
リポジトリを新規作成してください。
リポジトリ名は、
あなたのユーザ名.github.ioです。
リポジトリ名だけ、入力したら作成でOKです。
一度、githubから離れて、再びファイルを編集します。
config.tomlというファイルがあると思います。
こちらを編集します。
# github-pagesでのURL
baseurl = "http://あなたの名前.github.io/"
# 言語の設定
languageCode = "ja"
# ブログのタイトル
title = "My New Hugo Site"
# パスの指定。これをしないとcssがうまく反映されません。
canonifyurls = true
# テーマの名前
theme = "polymer"
このファイルは地味に重要です。
注意点
- baseurlの最後の/を忘れずに！！絶対パスがおかしくなって、cssが反映されないです
- cononifyurls trueで絶対パス指定です。
- theme名を打ち込んでおいてください。hugoコマンドで-tオプションを指定しなくてよくなります。
ここまで、できましたらhugoコマンドを実行します。
$ hugo
-t オプションは、先ほどのconfig.tomlでテーマを指定しているので不要です。
hugoコマンドを実行すると、publicというフォルダができたと思います。
こちらが公開用のフォルダとなります。
それでは、cd で publicに移動します。
$ cd public
ここで、githubのリモートリポジトリを登録します。
public内でリモートを登録してください
git remote add origin git@github.com:あなたの名前/あなたの名前.github.io.git
登録できたら、以下のコマンドを打ち込みます。
$ git add .
$ git commit -am "Initial commit"
$ git push -u origin master
これで、リモートにリポジトリがアップされたはずです。
では、http://あなたの名前.github.ioにアクセスしてみましょう。
リポジトリのsettingsの中ほどにリンクがあるのでそちらをクリックでも良いです。 ここが、OKであればリンクが表示されているはずです。
どうでしょう？表示されましたか？
表示されていればここまでは、OKです。
マークダウンを作ったり、アップしたり
ここからが少しややこしかったのですが、マークダウンを作成した際に
$ hugo new post/test.md
としたと思います。 現在は、draft = trueなのでpublicには反映されていません。
では、draft = trueを削除してみます。
content/post/test.md の draft = true を削除して下さい。
そして、hugoします。
$ hugo
すると、publicフォルダの中にpostというフォルダが作成されたと思います。 さらにその中は、
post
├── index.html
├── index.xml
├── page
│ └── 1
│ └── index.html
└── test
└── index.html
このようになっていると思います。
post/test/index.htmlがマークダウンで作成したものの出力結果となります。
それでは、publicフォルダに移動して、git pushしてみましょう。
$ git push
先ほど、git push -u origin master で-uオプションをしているので、pushだけでよいです。 不安な方は、git push origin masterしてください。
これで、github-pagesにもtest.mdの内容が表示されたはずです。
「よし、わかった。次の記事を作ろう。もう余裕や。」
と思っていた時期がわたしにもありました。
実際に新しく作成してpushしても反映されませんｗ
注意点
public/postは、記事を作成したり更新したら削除しないといけません。
これがややこしい。
つまり、publicフォルダに入って、
$ rm -rf post
をしないといけません。
実際に、コマンドを打ってください。 現在は、publicフォルダにいるはずです。
削除できたら、１つ上の階層に戻って これを忘れてよくエラーで怒られます。
$ hugo new post/sample.md
をして、新しい記事を登録してください。
そして、hugo。
$ hugo
成功の結果
0 draft content
0 future content
2 pages created
2 paginator pages created
0 tags created
0 categories created
in 41 ms
先ほどの、test.mdとsample.mdの文で2つの記事が作成されました。
publicのpostの中にも二つの記事が作成されております。
では、cdでpublicに入って、git pushしてください。
gh-pagesでも反映されていると思います。
deploy.shを作成して手間を減らす。
サイトの一番上の階層に
deploy.sh
というファイルを作成してください。
# !/bin/bash
echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"
# Build the project.
hugo
cd public
# Add changes to git.
git add .
# Commit changes.
msg="rebuilding site `date`"
if [ $# -eq 1 ]
then msg="$1"
fi
git commit -m "$msg"
# Push source and build repos.
git push origin master
そして、上記のコードをコピペしてください。
こうすることによって、記事を作成した後に、ターミナルで
$ ./deploy.sh
と打ち込むだけで、リモートまでpushできます。
くれぐれも、publicの中のpostを削除するのをお忘れなく!!
もっと、効率的にできると思うのですが、何卒未熟者ですので Hugoをもっと理解したらどんどんアウトプットしていこうと思います。
最後に、おさらいです。 ここまで、できている状態で
- rm -rf post でpostを削除する。(public内)
- hugo new post/◯◯.mdを作成する。(publicより１つ上の階層)
- ./deploy.shを実行する。
以上です。それでは、また:)
