1 of 36

python-pelicanで�ブログを作る話(仮)

2016-07-09 shizuoka.py #5

twitter@hrs_sano645

2 of 36

2

えぇー!�今更ブログ??

3 of 36

今時はSNSでは?

3

4 of 36

もっと自由に表現したい

4

Photo by Hande Aksoy

https://flic.kr/p/eaMxiq

5 of 36

サービス使っても自前で運用しても良いと思います

5

自前でブログを持ちたい!

6 of 36

6

Fhoto by sammynetbook

https://flic.kr/p/ed8hh5

サービスの

_人人人人人人_�> 突然の死 <� ̄Y^Y^Y^Y^Y^Y^ ̄

7 of 36

セキュリティ怖い/メンテ面倒

7

http://www.irasutoya.com/2013/09/blog-post_3149.html

8 of 36

8

そこで

9 of 36

Static Site Generator

  • 特定の記法で書いたコンテンツをhtmlファイル(Static Site)を�生成(Generate)する
  • 自動生成も可能な場合があるのでVCSと相性良し(WebHookとかCI)
  • HTMLファイルなのでWEBサーバーがあれば
  • サーバースクリプト環境やデータベースの脆弱性の心配は無い�(と言っても完全に安全ではない)

9

10 of 36

Static Site Generator

10

11 of 36

Static Site Generator

今日はこれを使います

11

12 of 36

今日の目次

  • SSGでブログを作るための意欲を高める
  • Pelicanクイックスタート:デモあり
  • カスタマイズ方法:デモあり
  • まとめ

12

13 of 36

AboutMe

  • twitter@hrs_sano645
  • オーバーウォッチ楽しすぎるので自粛中
  • PyCon 2016見に行ってきます!

13

14 of 36

Python-Pelicanとは?

  • Static Site Generator
  • Python製 2.7, 3.3~対応
  • ReST, Markdownに対応
  • ブログ(連続更新するもの)や�ページ(例えばAbout, Contactページ)が作れる
  • テーマ切り替え対応(中身はjinja2テンプレート) -> pelican-theme�プラグイン対応 -> pelican-plugins
  • コメントはDISQUSが利用可能

14

15 of 36

インストール方法

  • Virtualenv/pyvenv仮想環境を作るのがおすすめ

$ pip install pelican Markdown

  • Markdownで書きたい場合はMarkdownパッケージも一緒に

15

16 of 36

クイックスタート

  • 適当なディレクトリを作成して移動する

$ pelican-quickstart

  • 質問に答えていきます

16

17 of 36

ブログのエントリー(article)を作る

  • contentフォルダにエディタで作ります。

#今回はmarkdownで

$ cd ./content

$ vim first-content.md

17

18 of 36

ブログエントリーのフォーマット

  • Markdownの例

Title: 最初のブログ投稿

Date: 2016-07-09

Author: hiroshi sano

Category: Diary

Python-Pelicanで最初のブログを投稿しました!

18

19 of 36

Makeコマンドが楽です

  • htmlファイルを生成
    • make html
    • make publish: 公開用でpublishconf.pyの設定も利用する
  • ファイルをアップロードする
    • make **_upload: rsync(ssh), s3, github 等あります!

19

20 of 36

テストサーバーで内容チェック

  • make serve

SimpleHTTPServerが起動します

localhost:8000がデフォルトのサーバーのアドレス

Ctrl+Cで停止します

20

21 of 36

固定ページを作る

$ mkdir ./content/pages/

  • このpagesフォルダの中にmd/rstファイルを作ることで�固定ページが作られる

21

22 of 36

固定ページのフォーマット

#Markdownの例です

Title: FirstPage

Date: 2016-07-09

Author: hiroshi sano

Python-Pelicanでページをつくてみました!

22

23 of 36

今日の目次

  • ブログをほしい意欲を高める
  • Pelicanクイックスタート:デモあり
  • カスタマイズ方法:デモあり
  • まとめ

23

24 of 36

公式や3rdの集まり:pelican-themes

  • https://github.com/getpelican/pelican-themes
  • サードパーティを含めた巨大なリポジトリ
  • テーマと言っても外観だけではなくて、javascriptベースで拡張機能も提供されている形もある
    • pelicanconf.pyで設定できる

24

25 of 36

テーマの変更方法

  • git clone等でpelican-themesを取得
  • pelicanconf.pyを変更する

$vim ./pelicanconf.py

THEME = “[テーマのディレクトリ]”

  • 保存して make html等して動作確認

25

26 of 36

テーマはjinja2テンプレート

  • 特定のディレクトリ構成, ファイル名を用意�するだけ
  • htmlファイルはjinja2�テンプレートとして�扱う

26

├── static�│ ├── css�│ └── images�└── templates� ├── archives.html // to display archives� ├── period_archives.html // to display time-period archives� ├── article.html // processed for each article� ├── author.html // processed for each author� ├── authors.html // must list all the authors� ├── categories.html // must list all the categories� ├── category.html // processed for each category� ├── index.html // the index (list all the articles)� ├── page.html // processed for each page� ├── tag.html // processed for each tag� └── tags.html // must list all the tags. Can be a tag cloud.

ref:http://docs.getpelican.com/en/3.6.3/themes.html

27 of 36

プラグインも使える:pelican-plugins

  • https://github.com/getpelican/pelican-plugins
  • こちらもgit clone等で取得して配置
  • pelicanconf.pyで設定できます
  • 一例
    • サイトマップの自動生成
    • Youtubeリンクを自動的に埋め込み
    • Tocなどなど

27

28 of 36

便利なdevserver

$ make devserver

  • デバッグ、開発用のサーバーを動かす
  • 設定、コンテンツ(ブログポスト,ページ)やテーマを変更したら自動的に�生成する
  • make stopserverで終了

28

29 of 36

今日の目次

  • ブログをほしい意欲を高める
  • Pelicanクイックスタート:デモあり
  • カスタマイズ方法:デモあり
  • まとめ

29

30 of 36

30

ブログ作る=CMSサービスではなくて

Static Site Generatorも良いです

31 of 36

31

今更ブログ作るのも�悪く無いですよ!

楽しいし楽ですね

32 of 36

32

今更ブログ作るのも�悪く無いですよ!

楽しいし楽ですね

33 of 36

33

34 of 36

34

35 of 36

楽=更新頻度が高いわけではない

35

http://aa.ja.utf8art.com/node/714

36 of 36

Future Work

  • Amazon S3で運用
  • CIで回せるといいなー
  • Google+の写真URLを乗せたらいい感じのimgタグになる�プラグインを作る

36