Hugoのインストール
Hugoの簡単な使い方
Hugoは静的サイトジェネレーターです。
特定のフォルダ以下に、作法に従ってmarkdownなどのテキストファイルを配置して、 コンパイルすることにより、サイトを作成することができます。
Step 1: インストール
(Ubuntuの場合)
sudo apt-get install hugo
Ubuntuでは、aptによってインストールできます。
(Macの場合)
brew install hugo
macOSでは、Homebrewによってインストールできます。
Step 2: サイトを作成する
任意の作業フォルダで、次のコマンドを入れるとquickstartというフォルダ以下に、
テンプレートが作成されます。
hugo new site quickstart
Step 3: サイトの表示テーマを追加する
サイトを表示する際に用いる、テーマを追加します。
cd quickstart
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
ここでは、Ananke themeをgitによりダウンロードし、
themes/フォルダ以下に配置します。
追加したテーマを、サイトの設定に反映させます。
echo 'theme = "ananke"' >> config.toml
Step 4: サイトの内容を作成する
手動で、content/<CATEGORY>/<FILE>.<FORMAT>の場所にコンテンツファイルを配置することもできますが、
次のコマンドにより、いくつかの初期設定されたファイルを自動生成することができます。
hugo new posts/my-first-post.md
自動で作成されたファイルcontent/posts/my-first-post.mdの内容は、以下のようになっています。
---
title: "My First Post"
date: 2019-03-26T08:47:11+01:00
draft: true
---
このファイルを編集して、内容を作成します。その際、draft: falseに変更すると、
ドラフト状態が解除されコンパイル時に出力されるようになります。
実際の内容は、markdownで --- よりも下に記述します。
Step 5: デバッグする
ローカルでデバッグ用にサーバーを起動して、見た目をチェックできます。
hugo server -D
http://localhost:1313/にアクセスすることにより、デバッグ用サーバーの出力をみることができます。
Step 6: 出力する
次のコマンドを実行することにより、publicフォルダ以下にフォーマットされたサイトコンテンツが出力されます。
hugo
Step 7: gitを使ってサーバーにアップロードする
ソースはgitで管理されているので、この際サーバーにリモートgitレポジトリを作成して、自動でデプロイできるようにします。
まずは、gitで変更を保存します。
git add .
git commit -m initial
次に、リモートサーバーの任意の場所に、リモートレポジトリを作成することにして、そのURLを登録します。
git remote add origin user@example.com:git/site.git
サーバーサイドの作業を行います。sshで接続して、レポジトリの準備をします。
ssh user@example.com
user@example:~$ mkdir -p git/site.git
user@example:~$ cd git/site.git
user@example:~/git/site.git$ git init --bare
ローカルの端末で、リモートにpushします。
git push -u origin --all
これで公開サーバーにリモートレポジトリができて、内容が保存されました。
次に、デプロイするための作業ディレクトリを作成します。サーバーサイドでの作業です。 任意の場所に先程作成したリモートレポジトリのcloneを作成します。
ssh user@example.com
user@example:~$ cd git
user@example:~/git$ git clone --recursive site.git/
この作業により、git/site.gitというリモートレポジトリと、git/siteという作業ディレクトリができます。
次に、手動でサイトを生成して、そのコンテンツを公開フォルダ /var/www/html/以下にコピーする手順を確認します。
ssh user@example.com
user@example:~$ cd git/site
user@example:~/git/site$ hugo
成功すれば、git/site/publicにコンテンツが生成されます。
次に、userは、パスワードなしでsudoできるように設定してあるものとします。以下のコマンドで、コンテンツを同期します。
ssh user@example.com
user@example:~$ cd git/site
user@example:~/git/site$ sudo rsync --chown=www-data:www-data -avz --delete public/ /var/www/html/
これで、http(s)://example.comにアクセスすると、生成したサイトが見れる状況になっています。
次に、pushしたときに自動でデプロイするようにします。リモートサーバーの、リモートレポジトリのフォルダで作業します。
ssh user@example.com
user@example:~$ cd git/site.git
user@example:~/git/site.git$ vi hooks/post-receive
hooks/post-revieveファイルを新たに以下の内容で作成します。
#!/bin/sh
cd /home/ai/git/ichirai
git --git-dir=.git pull
rm -rf public && hugo && sudo rsync --chown=www-data:www-data -avz --delete public/ /var/www/html/
実行権限を付けておきます。
ssh user@example.com
user@example:~$ cd git/site.git
user@example:~/git/site.git$ chmod +x hooks/post-receive
ここまで設定できたら、何か変更を加えてローカルで次の様にpushすると、サイトが更新されます。
git add .
git commit -m 'some changes'
git push