まるまろぐ

本ブログに記載の情報は全て飼い犬が書いたものであり、その内容に誤りや欠陥があった場合にも、私は一切の責任を負いません。

Hugo + Academic + Netlify で一瞬でウェブサイトを作って公開する

記事タイトルで一瞬でウェブサイトを作るとか言ってるので、何が起きているのかの説明は後回しにして、まずは最短の手順を示したいと思います。

1. GitHub 上に Academic のテンプレートをダウンロードしつつ Netlify と連携

以下のリンクを踏んで緑色のボタンをポチポチしてください。GitHub アカウントを持っていない場合は作ってください。

https://app.netlify.com/start/deploy?repository=https://github.com/sourcethemes/academic-kickstart

するとこんな感じの画面になると思います。 f:id:hidamarumaru:20180820200141p:plain これでもうウェブサイトは完成し公開されました。上の画像で言うと 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のページに移動したあと、ペンっぽいアイコンをクリックしてください (下の画像で矢印が指してる先です)。

f:id:hidamarumaru:20180820204419p:plain

すると編集できるようになるので、
title = "Academic"
となっているところを
title = "Test"
と書き換えてください (もちろん Test じゃなくても自分の名前でもなんでも良いです)。 それから、59行目の
color_theme = "default"

  • ocean
  • forest
  • coffee
  • dark
  • 1950s

のいずれかに変えてください。

できたらページの一番下までスクロールして Commit changes をクリックしましょう。しばらく待つと自動的にウェブサイトの内容が更新されているはずです。同様の方法でconfig.tomlcontentディレクトリ内の様々なファイルを編集し 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 記法なので、見出しを追加したり、シンタックスハイライトをつけたりすることもできます。 f:id:hidamarumaru:20180820222147p:plain より高度な編集をしたい場合は 公式ドキュメント を参照してください。

何が起きているのか?

Hugo

上記の手順では全く表に出てきませんでしたが、このウェブサイトを作る上で裏では Hugo という静的ウェブサイトのジェネレータが動いています。Academic は Hugo のテーマのひとつです。リポジトリthemesを開いてみると入っているのがわかると思います。テーマの一覧は

Complete List | Hugo Themes

で見ることができ、Netlify との連携を提供してくれているテーマであれば Academic 以外のテーマでも今回のようなことができます。

Netlify

Netlify は静的サイト用のホスティングサービスです。本来であれば更新をサイトに反映するには Hugo がページを生成するためにhugoコマンドを打ち、それから生成したファイル群をサーバにデプロイしなければいけないのですが、Netlify が そのへんのことを GitHub に変更が加えられるたびに勝手にやってくれています。そして、その勝手にやってもらうための設定もテーマの製作者が用意して提供してくれているので、もはや我々は何もする必要がなかったわけですね。ただ、Netifly は本当に簡単なのでやろうと思えばすぐに自分でも自動化できます。ちなみに設定はリポジトリnetlify.tomlや Netlify 上の Settings の Build & deploy にあります。