dackdive's blog

新米webエンジニアによる技術ブログ。JavaScript(React), Salesforce, Python など

[Python]PelicanでGitHub Pages上にブログを構築する(Django Girls for Everyone #2 参加メモ)

勉強会 Python

こちらのイベントの参加メモです。

少人数でわいわいやる感じで面白かった。
作業に没頭してしまったんだけどもっといろんな人とお話すればよかったー。

今回は、Pelican という静的サイトジェネレータを使い GitHub Pages 上に自分のブログサイトを構築するというもの。
というわけで Django 関係ないです。

構築したブログ

こんな感じで、さくっとブログを公開できた。

http://zaki-yama.github.io/salesforce-developers.info/

f:id:dackdive:20151220123036p:plain

あとは Markdown でブログを書いて pelican コマンドで html に変換、GitHub に push するだけなのでかなり良いです。

GitHub Pages について

ref. https://pages.github.com/
User/Organization Pages と Project Pages という2種類がある。

User/Organization Pages は GitHubのユーザー名.github.io というリポジトリを作っておくと
http:[ユーザー名].github.io という URL で静的サイトを公開することができる。
その際は master ブランチでなくてはならない。

Project Pages は任意のリポジトリに gh-pages というブランチを作ると
http:[ユーザー名].github.io/[リポジトリ名] という URL で静的サイトを公開することができる。

私は両方試してみて Project Pages を選びました。
こっちだと master ブランチにはソースとかまるごと push しておいて複数人で作業するとかができそうだったので。
（User/Organization Pages の場合も source ブランチとか作ってそっちにソースを push するようにすれば OK ですが）


学習メモ

セットアップ

Markdown で書くなら Markdown というパッケージが必要。
また、GitHub Pages に公開するなら ghp-import というパッケージも入れると便利。

$ pip install pelican
$ pip install Markdown
$ pip install ghp-import

# ひな形の構築には以下のコマンドを使うといい。
# 色々聞かれるので適宜 yes/no で答える
$ pelican-quickstart
> Where do you want to create your new web site? [.]
> What will be the title of this web site? pelican demo
> Who will be the author of this web site? osoken
> What will be the default language of this web site? [en] ja
> Do you want to specify a URL prefix? e.g., http://example.com   (Y/n) n
> Do you want to enable article pagination? (Y/n) y
> How many articles per page do you want? [10] 10
> What is your time zone? [Europe/Paris] Asia/Tokyo
> Do you want to generate a Fabfile/Makefile to automate generation and publishing? (Y/n) Y
> Do you want an auto-reload & simpleHTTP script to assist with theme and site development? (Y/n) y
> Do you want to upload your website using FTP? (y/N) n
> Do you want to upload your website using SSH? (y/N) n
> Do you want to upload your website using Dropbox? (y/N) n
> Do you want to upload your website using S3? (y/N) n
> Do you want to upload your website using Rackspace Cloud Files? (y/N) n
> Do you want to upload your website using GitHub Pages? (y/N) n

GitHub Pages へのデプロイ

ghp-import output とすると output を自動的に gh-pages ブランチにコミットしてくれます。（たぶん）
あとはそのブランチを GitHub Pages の種類に合わせて適切なブランチに push するだけです。

---(2015/12/22追記)---
GitHub Pages のうち、Project Pages で公開する場合はちょっと注意が必要みたい。

dackdive.hateblo.jp

---追記ここまで---

"""2015/12/22 修正"""
# 1. User/Organization Pages の場合
# 単に `pelican` でもいいはず
$ pelican content -o output -s pelicanconf.py
$ ghp-import output
$ git commit -m '******'
$ git push origin gh-pages:master

# 2. Project Pages の場合
# (ローカルで開発中は `pelican` コマンドを使う)
$ pelican content -o output -s pelicanconf.py

# GitHub に反映するとき
$ make publish
pelican /Users/yama/workspace/pelican/salesforce-developers-info/content -o /Users/yama/workspace/pelican/salesforce-developers-info/output -s /Users/yama/workspace/pelican/salesforce-developers-info/publishconf.py
$ ghp-import output
$ git push origin gh-pages

テーマの設定

気になるテーマをここから探す。
http://pelicanthemes.com/

例として、pelican-clean-blog というテーマを入れます。

リポジトリを clone してくる（pelicanサイト外の好きなところに）。

$ cd ~/Downloads
$ git clone https://github.com/gilsondev/pelican-clean-blog

pelican-themes コマンドでインストールする。

$ pelican-themes -i ~/Downloads/pelican-clean-blog

インストールされているか確認。

$ pelican-themes -l
pelican-clean-blog

pelicanconf.py の THEME に指定する。

THEME = 'pelican-clean-blog'

---（2015/12/21追記）---
テーマを pelican サイト内に置く必要はありませんが、pelican コマンド実行時に参照してるようなので
下記の Downloads のように間違って削除してしまいやすい場所に置くのは得策ではなさそう。
また、別の PC でブログのリポジトリを clone した時にテーマがなくてエラーになるのでリポジトリに含めるのがいいのでは、と考えています。
良い方法を模索中です。
---追記ここまで---


TODO

今後やってみたいこと。

  • インストールしたテーマをベースにして細かい部分だけカスタマイズしたい
  • ✔ 記事の下に Tweet ボタンを設置したい
  • git push master したら自動的にビルドして gh-pages ブランチに push するようにしたい
  • README 書く

リファレンス