zolaとは?

Rust で書かれた静的サイトジェネレーターです. このブログは zola + Netlify で公開しています.

zola install

Arch とか Mac ならパッケージがあるのでいいんですが,Gentoo にはありませんでした. バイナリをダウンロードする方法と,ソースからコンパイルして作成する方法があります.

バイナリをダウンロードする方法

ZolaのリリースページからOSに対応した圧縮ファイルを入れます.(linux では zola-v0.7.0-x86_64-unknown-linux-gnu.tar.gzを入れます.2019/06/15時点)
解凍すると,おそらくzola のバイナリのみ含まれているだけのため,こちらをパスを通すか,パスを通している場所に移動するかをします.
前者の場合は

$ export PATH="$PATH:$(zolaバイナリのあるディレクトリ)"

を.bashrcだったりに書き込んでsource .bashrcを実行してください.
後者の場合は

# mv zola /usr/local/bin

とかが一般的なんですかね.
HOMEディレクトリに戻って,zola コマンドを実行し,command not foundとかにならなければインストールは終わりです.usageに移動してください.

ソースからコンパイルして作成する方法

先にRustを入れておきます.

$ curl https://sh.rustup.rs -sSf | sh

git からソースをダウンロードし,ビルドします.

$ git clone https://github.com/getzola/zola.git
$ cd zola
$ cargo build --release
$ cd target/release

ここに zola バイナリがあります.
このディレクトリで作業するのもあれなので,ここにパスを通すか,このバイナリを既にパスを通している場所に移動させるかしてください.

ディレクトリ作成

まずはzola initコマンドを実行します.
ディレクトリを作成するので適当なディレクトリ名を考えます.(今回はpippiで)
いくつか質問されますが,後で簡単に変更出来るので本当に雑で大丈夫です.

$ zola init pippi
Welcome to Zola!
> What is the URL of your site? (https://example.com): https://pippi.com
> Do you want to enable Sass compilation? [Y/n]: y
> Do you want to enable syntax highlighting? [y/N]: y
> Do you want to build a search index of the content? [y/N]: n

Done! Your site was created in "/home/$(whoami)/pippi"

Get started by moving into the directory and using the built-in server: `zola serve`
Visit https://www.getzola.org for the full documentation.

pippi ディレクトリが作成されていると思います.
次にzola serveコマンドを実行します.
config.toml ファイルのある今回だとpippiディレクトリに移動してから実行します.

$ cd pippi
$ zola serve
Building site...
-> Creating 0 pages (0 orphan), 0 sections, and processing 0 images
Done in 35ms.

Web server is available at http://127.0.0.1:1111

Listening for changes in /home/$(whoami)/pippi/{content, config.toml, static, templates, sass}
Press Ctrl+C to stop
image

このような画像が表示されたら成功です.
ここから実際に書き込んでいきます.

ディレクトリ構成

zola initコマンドで作成されたディレクトリは以下のようになっています.

  • config.toml
    設定ファイル.zola initで問われた質問の他,タグやカテゴリー,RSSの設定などを設定します.
  • content
    表示するmarkdownファイルなどを格納します.
  • public
    初期状態では,上記画像(Welcome to Zola!)を表示するhtmlや404errorの際に表示するhtmlなど基本的なものが入ってます.
    scss ファイルをコンパイルしたcss ファイルなどがここに格納されます.
    私はディレクトリごと消しましたが,問題なさそうです.
  • sass
    sass というディレクトリ名ですが,sass でもscss でも大丈夫です.
    ただし,scss またはsass を用いる場合は,config.tomlの中をcompile_sass=trueにしてください.
  • static
    画像入れたり,ファイル入れたり
  • templates
    大体の概形を表したhtml が入ります.
    基本はindex.html とsection.html, page.html があれば十分です.
  • themes
    site generator あるあるのtheme です.
    zola はこちらのページにテーマ一覧がありますが,今の所残念ながら少ないです.
    templates下のhtml とcontent下のcss を使うという感じです.

概形

templates下がないと,記事を書いてもうまく表示されません.\ 詳細は別の記事で書くとして,今回は最速で公開するためにテーマ機能を使います.
準備が楽なのでテーマはhyde を用います.

$ cd themes
$ git clone https://github.com/getzola/hyde.git

次に,config.toml に使用するテーマの指定をします.
theme = "hyde"を追記してください.([extra]より上部に追記です)

# The URL the site will be built for
base_url = "https://pippi.com"

# Whether to automatically compile all Sass files in the sass directory
compile_sass = true

# Whether to do syntax highlighting
# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
highlight_code = true

# Whether to build a search index to be used later on by a JavaScript library
build_search_index = false
theme = "hyde"

[extra]
# Put all your custom variables here

zola serveを実行すると,このような画像が表示されていると思います.

image

実際に記事を書いていきます.
content/index.md に以下のようなmarkdown ファイルを書きます.

+++
title="Hello Zola"
date=2019-07-09
+++
# Zola 使ってみた
image

localhost:1111/にアクセスすると,このようになり,
localhost:1111/content/にアクセスすると,以下のようになります.
出来てますね!

image

Netlify 設定用

zola version 0.8.0からnetlify 用の設定が出来るようになりました.
config.toml と同じディレクトリにnetlify.tomlを作成し,以下のように書きます.

[build]
publish = "public"
command = "zola build"

[build.environment]
ZOLA_VERSION = "0.8.0"

[context.deploy-preview]
command = "zola build --base-url $DEPLOY_PRIME_URL"

公開

お名前.com で取得したドメイン + Netlify での公開の方法となります.
ドメインの購入に関しては略します.
Git を用いますので,作成したディレクトリをgit に挙げておいてください.

Netlify 設定

netlifyにログインすると,以下のような画面が出ますので「New Site from Git」よりまず,レポジトリの登録を行います.

image

次に表示される,「Continuous Deployment」はそのままレポジトリの場所を答え,連携がとれたことを確認すると,プロジェクトが表示されます. 表示されない場合は下部の「Configure the Netlify app on GitHub」から設定してください.

image

Build command がnetlify.tomlで設定したzola buildのようになっていることを確認して,Deploy Site をしてください.

すると,?????.netlify.comのようなところで公開されます.
この?????.netlify.comの部分に対してもリダイレクトするようにするため,一応メモしておきます.

Domain settings から自分の購入したドメインを設定します.

image

これでおそらくokなはずです. ssl化などは情報がごろごろ転がってるのでそちらで.

お名前.com 設定

image

ログインしましたら,ドメイン設定>DNS関連機能の設定に進みます.
対象のドメインを選択したら次のような画面になりますので,「DNSレコード設定を利用する」を選択します.

image

画像のように独自ドメインのvalueを104-198-14-52 に
www.独自ドメインのvalueをTYPEをCNAMEにしてから先程の?????.netlify.com にします.

image

これでおそらく独自ドメインで公開出来ていると思います.