Cycle N' Craft

Pelicanで作成したウェブサイトをNetlify上に静的ホスティング

Posted on Sun 20 November 2016 ( 2018-08-03 update ) in computing

しばらくウェブ制作に関わることもなかったので、すっかり世の中の技術トレンドにも疎くなり、便利なサービスにも乗り遅れております。静的ファイルをホスティングしてくれるサービスとして、Amazon S3をこれまで使ってきましたが、Netlifyという便利なサービスが登場しているんですね。ファイルの取り扱いや設定をみているとなんか夢のような世界に聞こえてみます。どれどれちょっと使ってみようかとあれこれ調べはじめました。

Pelican環境の構築

僕は、これまでにPythonで書かれたPelicanを運用してきたので、やっていることは復習。Pythonのvirtualenvをインストールする。別に環境依存が気にならないというならスルーしてもいい。僕もスルーしがちだし。そもそもpipが導入されていない場合はそこからやること。

$ sudo pip install virtualenv

こんな感じで専用の環境を作ってしまう。

$ virtualenv /PATH/TO/Pelican
$ cd /PATH/TO/Pelican
$ source bin/activate

そして、pelicanの導入。静的なジェネレータとしてはシンプルでいいと思います。

$ pip install pelican markdown

これまではs3cmdが使えるように追加のコマンドを導入してきたけど、今回はなし。pelicanの設定を進めていく。

$ pelican-quickstart

サイト名やファイルのアップロード手法など簡単な設問に答えるだけで設定ファイルを作成してくれる。はじめの一回さえ終えてしまえば起動する機会もほぼないスクリプトですね。適当なファイルを作成してサイトを生成してみましょう。

$ pelican content

生成されたHTMLの確認は割愛。適宜ローカルサーバを起動してブラウザ確認してもいいけど、いままで運用してきたので出力ファイルは信用している。

そして、githubへのデプロイ準備をすすめる。

pelicanのルートディレクトリに移動します。はじめにやることはoutputディレクトリをバージョン管理から除外すること。pelicanはウェブサイトのファイルをoutputディレクトリに出力するので、これを除外します。

$ echo "/output" >> .gitignore

そして、Netlifyに使用しているPythonプラグインの正しいバージョンを渡せるようにファイルを作成します。

$ pip freeze > requirements.txt

これで準備万端ということなので、自身のリポジトリにpushということになります。

Gitリポジトリの作成

Githubに新しいリポジトリをサクッと作りまして設定を進めます。ローカルにあるPelicanのディレクトリに移動して、gitの設定初期化。ディレクトリを追加します。追加したらファイルをcommit。

$ git init
$ git add .
$ git commit -m 'First commit'

GithubのQuick setupに表示されるURLを設定します。念のためにURLを確認しておく。

git remote add origin https://github.com/koichiroyamada/k16com.git
git remote -v

URLに間違いがなければpushします。

git push origin master

という感じに設定するわけですが、余計なものまで管理するのもどうかなと思うので、ちょっと見直しする。そもそも管理するルートをcontentだけにするか。よーく見てみるとNetlifyの設定でGithubのリポジトリを指定して設定をできるみたい。つまりGithubで管理すべきコンテンツとアウトプットしたファイルの両方があるといいんじゃないかな。そういうことじゃない?

よくよくみるとビルドしてるんだな。そうかソースになるファイル一式をあげてサーバ側で静的HTMLの生成をやってるな。ということは設定ファイルも上げておく必要があるのか。だからこういう設定なのか。で、書き出しのoutputだけpushしないのはそういう訳ね。

となるとGithubの使い勝手が良いのかどうかがポイントかな。確かにサーバとしてのレスポンスはS3よりもいいみたいだけど、あれこれ自動化してしまった今となっては果たして意味があるのかどうかだな。

非常に悩ましい。静的ファイルジェネレータを使っていない場合の同期というかビルドというか。このあたりはどうやって回していくのかな。調査必要かも。

Netlify + Pelican で静的サイト構築

なかなかピンとこなかったので試行錯誤してみた。これはいるの?いらないの?みたいな感じで調整を続ける。なんてことはない。答えは初めから書いてあったじゃないか。そんな感じだった。

まず、ローカルリポジトリについては、Pelicanを使うにあたっての一般的な設定を行えばよし。基本的な設定項目は pelicanconf.py に記述し、公開用のファイルには publishconf.py に書かれた項目が追加設定となる。コンテンツはすべて content ディレクトリの中に投入するだけ。非常にシンプルに考えてよし。

GitHubに同期すべきは、これらに加えてPythonのバージョンをNetlifyに通知するためのrequirements.txtくらい。これがないとNetlifyではビルド時にエラーが発生する。

echo "# k16com" >> README.md
pip freeze > requirements.txt
git init
git add README.md
git add content
git add pelicanconf.py
git add publishconf.py
git add requirements.txt
git commit -m "First commit"
git remote add origin git@github.com:koichiroyamada/k16com.git

おおむねこんな感じかな。

git status

ステータスを確認して問題なければpushする

git push -u origin master

Netlify側では、GitHubと連携するボタンから、リポジトリを選択して、/outputディレクトリとビルドコマンドであるpelican contentを入力。以降は、Gitにpushすれば自動でビルドが走るようになる。

themeを上述のディレクトリ外に配置している場合は適宜追加すること。

一応、naked domainにも対応しているみたいだし、s3から離脱してしまうのもアリじゃないかな。試験サイトの構築を試してみよう。