Hugo + Academic + Netlify で一瞬でウェブサイトを作って公開する
記事タイトルで一瞬でウェブサイトを作るとか言ってるので、何が起きているのかの説明は後回しにして、まずは最短の手順を示したいと思います。
1. GitHub 上に Academic のテンプレートをダウンロードしつつ Netlify と連携
以下のリンクを踏んで緑色のボタンをポチポチしてください。GitHub アカウントを持っていない場合は作ってください。
https://app.netlify.com/start/deploy?repository=https://github.com/sourcethemes/academic-kickstart
するとこんな感じの画面になると思います。 これでもうウェブサイトは完成し公開されました。上の画像で言うと https://objective-sammet-5a4f1a.netlify.com がウェブサイトのURLで既にアクセスできるわけですが、もしこの自動的に割り当てられたURLが嫌な場合は Site settings から Change site name ボタンを押すことで変えられます。独自ドメインも使えますがここでは触れません。
2. GitHub から更新する
次はウェブサイトの内容を編集します。先ほどの手順によって GitHub にリポジトリが作成されているはずです。リポジトリ名を変更していなければURLは https://github.com/username/academic-kickstart になっているはずです(username は適宜置き換えてください)。
まずはconfig.toml
を編集してみましょう。git clone
してもいいのですが、ここでは簡単のため GitHub 上で直接いじります。config.toml
のページに移動したあと、ペンっぽいアイコンをクリックしてください (下の画像で矢印が指してる先です)。
すると編集できるようになるので、
title = "Academic"
となっているところを
title = "Test"
と書き換えてください (もちろん Test じゃなくても自分の名前でもなんでも良いです)。
それから、59行目の
color_theme = "default"
を
- ocean
- forest
- coffee
- dark
- 1950s
のいずれかに変えてください。
できたらページの一番下までスクロールして Commit changes をクリックしましょう。しばらく待つと自動的にウェブサイトの内容が更新されているはずです。同様の方法でconfig.toml
やcontent
ディレクトリ内の様々なファイルを編集し commit すればウェブサイトの各コンテンツを更新できます。ファイルを見ればどこをどう編集すればよいかというのはだいたいわかると思います。たとえば、Biography を編集したい場合はcontent/home/about.md
を開いて一番下の
# Biography Lena Smith is a professor of artificial intelligence at the Stanford AI Lab. Her research interests include distributed robotics, mobile computing and programmable matter. She leads the Robotic Neurobiology group, which develops self-reconfiguring robots, systems of self-organizing robots, and mobile sensor networks. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
となっている部分を
# 自己紹介 こんにちは
と書き換えてください。もちろん、これはただの Markdown 記法なので、見出しを追加したり、シンタックスハイライトをつけたりすることもできます。 より高度な編集をしたい場合は 公式ドキュメント を参照してください。
何が起きているのか?
Hugo
上記の手順では全く表に出てきませんでしたが、このウェブサイトを作る上で裏では Hugo という静的ウェブサイトのジェネレータが動いています。Academic は Hugo のテーマのひとつです。リポジトリのthemes
を開いてみると入っているのがわかると思います。テーマの一覧は
で見ることができ、Netlify との連携を提供してくれているテーマであれば Academic 以外のテーマでも今回のようなことができます。
Netlify
Netlify は静的サイト用のホスティングサービスです。本来であれば更新をサイトに反映するには Hugo がページを生成するためにhugo
コマンドを打ち、それから生成したファイル群をサーバにデプロイしなければいけないのですが、Netlify が そのへんのことを GitHub に変更が加えられるたびに勝手にやってくれています。そして、その勝手にやってもらうための設定もテーマの製作者が用意して提供してくれているので、もはや我々は何もする必要がなかったわけですね。ただ、Netifly は本当に簡単なのでやろうと思えばすぐに自分でも自動化できます。ちなみに設定はリポジトリのnetlify.toml
や Netlify 上の Settings の Build & deploy にあります。