Python製のWebサイト生成ツールLektorで、github pagesに自分のサイトを公開する

# はじめに
[Lektor](https://www.getlektor.com/)というpython製の静的Webサイトジェネレータが気になりすぎたので使ってみました。
Lektor + github pagesでWebサイトを公開する手順のメモです。
<img width="678" alt="Screen Shot 2018-01-07 at 19.19.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/141797/6152d1d2-801a-5adf-3a90-a960e430f4f3.png">


### メリット (Lektorが気になった理由)
- **github pagesが使える**
- **新しい** (2015年末に公開された)
- **製作者が有名** (Lektorの製作者は、python製webフレームワーク[Flask](http://flask.pocoo.org/)の製作者)
- **python製** (github pagesで最も使われているjekyllはruby製)
- **wordpressみたいに管理画面が使える** (github pagesでよく使われているpelicanはpython製だが管理画面がない)

### デメリット
- 記事が全然ない
- テーマが全然ない

### 開発環境
- macOS Sierra 10.12.6
- Python 3.6.3
- Lector 3.0.1

# 手順
## githubにリポジトリを作成しておく
github pagesにuser siteを公開するために、「username.github.io」という名前のリポジトリを作成しておく。

<img width="640" alt="Screen Shot 2018-01-07 at 18.49.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/141797/cbdd4330-a62a-ac56-c0f5-10f718c17dfd.png">

## Lektorのインストール
とりあえずCommand Lineのインタフェースをインストールすれば良い。

```
curl -sf https://www.getlektor.com/install.sh | sh
```

## Lektorプロジェクトの作成
quickstartでプロジェクトを作る。
以下のコマンドを実行して、いくつか質問に答えていけば良い。

```
lektor quickstart
```
<img width="475" alt="Screen Shot 2018-01-07 at 16.05.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/141797/5e7d7e88-d38c-51d0-da33-9d48438fbb32.png">

これでryokomyLektorというディレクトリが作成されている。(ディレクトリ名は自分で指定したもの)

```
cd ryokomyLektor
```


## github pagesに公開 (build と deploy)
lektorには、`lektor build`と`lektor deploy`というコマンドがあり、
`lektor build`で静的ファイルを出力し、
`lektor deploy`で登録済みのgithubサイトにpushしデプロイできるようになっている。

そこで、`lektor deploy`を利用するために、以下のようにプロジェクトファイルにサーバーの情報を追加する。

```ini:ryokomyLektor.lektorproject
[project]
name = ryokomyLektor

[servers.ghpages]
name = ghpages
enabled = yes
default = yes
target = ghpages+https://ryokomy/ryokomy.github.io
```
これで全ての準備は整ったので、以下のコマンドを実行する。
`lektor build`
<img width="331" alt="Screen Shot 2018-01-07 at 18.46.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/141797/65dd0ec0-98dc-c0af-a008-6fd24e6b7399.png">
`lektor deploy`
<img width="819" alt="Screen Shot 2018-01-07 at 18.50.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/141797/64766a43-042e-ca6f-35ee-daed42ffd321.png">

githubのプロジェクトページを見ると、lektorのbotがcommit, pushしてくれているのが確認できる。(かわいい)
<img width="999" alt="Screen Shot 2018-01-07 at 18.50.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/141797/f2a68481-e387-a9f2-b4a3-40812bdddad2.png">

## websiteにアクセス
ブラウザに、「ryokomy.github.io」と自分のgithub pagesのアドレスを入力すると、
<img width="907" alt="Screen Shot 2018-01-07 at 19.04.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/141797/ca3b9e29-f949-ccd3-8864-e1bbc1e5f06b.png">
みれた！！

# 終わりに
この記事では、Lektor + github pagesでウェブサイトを公開することをやってみました。
Lektorを使うと、wordpressのように管理画面を使って記事の追加・編集などができます。
その辺りは[この記事](http://www.takunoko.com/blog/lektor%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B/)なんかが参考になると思いますので、ぜひ試してみてください。
<img width="1027" alt="Screen Shot 2018-01-07 at 19.24.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/141797/9494cfe7-cb27-8ff7-1048-461df8640968.png">


# 参考
- [公式サイト](https://www.getlektor.com/)
- [公式ドキュメント](https://www.getlektor.com/docs/)
- [Lektorを使ってみる](http://www.takunoko.com/blog/lektor%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B/)