Cycle N' Craft

PelicanウェブサイトをGitLabとNetlifyで作る

Posted on Sun 25 December 2016 ( 2018-08-03 update ) in computing

ホームページを作ろう!なんてキャッチフレーズで、必要もないのによくわからないものを作っていた頃が非常に懐かしい。ホームページを作るのが目的の時代ってありましたっけね……。テーマを決めて、それにそった記事を増やしていくのって大事。

ここに至るまでの紆余曲折

ウェブサイトを作るために、Symantec Visual Page、GoLive Cyber Studio、Macromedia Dreamweaverなんてソフトウエアを使ってきて、気づけばテキストエディタで直にHTMLを書くようになっていました。ブログが登場するとMovableType、Mambo、Nucleusなんかを使ってみました。でも、結局テキストエディタのシンプルさに戻ってきてしまう。

Windows、macOS、LinuxとOSの別なく、使い慣れたテキストエディタというのは代え難いものでして、僕はここしばらくはvimに落ち着いています。超絶vim使いではなくても、ほどほどに使えれば十分でして、慣れてくると非常に頼りになります。そんなテキストエディタでMarkdown形式で記述しています。しばらくはHTMLそのままで記述していましたが、マークダウンってものを知ってからは汎用性の高い形で文章を記録できるので非常に重宝しています。古いテキストも可能な限りMarkdown形式に書き直しておくようにしています。たとえ駄文でも記録だしね。

Pythonで動くPelicanは、そうした僕のニーズにぴったりと合致しました。Pelicanを用いてローカル環境で生成したHTMLファイルをAmazon S3にてホストし、ウェブサイトを運用してきました。Amazon S3は、いくらもアクセスのない僕のウェブサイトにはぴったりのサービスでランニングコストは非常に安価。レスポンスもよく安定稼働させることができました。

そんな中、自宅と職場とでソース管理をしたいというニーズが生まれてきて、採用したのが今回の環境です。

GitLabでドキュメント管理、Netlifyでホスティング

OSSホスティングサービスと呼ばれるサービスが一般化してきたこともあって、非常に便利になりました。GitHubやGitLab、BitBucketなんてあたりがメジャーどころでしょうか。当初は、GitHubでいいかなと考えましたが、僕は管理するドキュメントを完全に公開してしまうのはいかがなものか?と判断しかねたので、プライベートリポジトリを無料で利用できるサービス、GitLab.comを使ってみることにしました。GitHubとGitLab、使い勝手に大きな違いはありません。僕のように誰かと協調して作業することもなく、ソースのバージョン管理だけを主眼にしている場合は、どこでもいいでしょう。

$ sudo pip install virtualenv
$ virtualenv /PATH/TO/Pelican
$ cd /PATH/TO/Pelican
$ source bin/activate
$ pip install pelican markdown
$ pelican-quickstart

Pythonの仮想環境を構築して、Pelicanをインストール。

シンプルにまとめるとこんな感じ。仮想環境が必要なかったらいきなりpipでpelicanをインストールすればよし。すでに稼働中ならば端折ってもよし。

$ echo "# Example" >> 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 .gitignore
$ git add requirements.txt
$ git commit -m "First commit"
$ git remote add origin git@gitlab.com:koichiroyamada/blog.git

さらにGitLabの設定をする。あわせてNetlify用に仮想環境の必要ソフトウエアを抽出。

pelicanのディレクトリをまるごとソース管理するという手もあるけど、必要のないファイルをリモートにあげてもしょうがないので、必要最低限を登録する。themeはcontentの中にでも入れ込んでしまえば手間も省けそうな気もするけど、そこまでフォルダをまとめることもないかな。

git push -u origin master

GitLabにpushしたあと、Netlifyのページに登録。GitLabを選んでリポジトリを選択するだけ。書き出しディレクトリとビルド用のコマンドを登録すれば完了。たぶんこれで最短ルートなはず。

これも過去の試行錯誤あってのことか。

Netlify上にPelicanで作成したドキュメントを静的ホスティング

そして、運用を開始してみて気がついた。Google Analyticsのコードが出力されなくなった。Atomのフィードもなくなっている?これってつまりどういうことかといえば、publishconf.pyが参照されていないということ。そういえば、Netlifyの管理画面で書き出しのURLを指定してるものね。参照していないんだろうな。pelicanconf.pyにpublishconf.pyの内容を転記することで解決しました。どこかに挙動についてのまとめがあればわかるんだけどなかなか見つけられないなあ。

それとリダイレクトの設定をしておく。Apex domainからwww付きドメインに301リダイレクトしたい時などのために設定ファイルを用意する。Redirects and Rewrite Rulesというページが用意されているので、指示通りにファイルで指定する。リダイレクトの指示だけではなく、HTTPステータスコードも付与できる。必要ならカスタム404なども設定可能。ドキュメントをもう少し読んでみたい。結構面白いことができそうなきがする。

ドキュメント制作の運用管理

GitLabにてドキュメントを管理することにしたので、自宅のラップトップでも、職場のデスクトップでも、共有サーバにあるファイルでも、git cloneで手元にファイルを取り寄せし、git pullで最新ファイルを維持していけばよい。編集は使い慣れたテキストエディタがあればいい。

GitHub Desktopなどを導入すれば、テキストエディタで編集したファイルも差分表示を確認しつつ、commitのサマリーを記載できるし、Syncボタンひとつでpushもpullも可能。コマンドラインでの作業の方がシンプルだけど差分表示の確認は便利なのでデスクトップ環境があるのならば見ない手はないように思う。

ここまで環境が出来上がってみると、静的HTMLジェネレータを使わないペライチサイトも含めて、非常に簡単に管理ができると言うことがよくわかりました。テキストエディタで編集して、シンクロするだけで、ビルドされます。いまどきhttpdやdbを設定してwordpressを導入して、プラグインてんこ盛りにして早くなった!なんて悦にいるよりもわかりやすいなと思います。wordpressに挫折してしまう僕には特にぴったりでした。