pelicanとGitHub Pagesを使って自前のブログを作ってみた
GitHubに挙げたら、zenn上にも反映される機能は、記事を作る上でとても良い体験です
記事の管理もできるし、GitHubにあるGitHub Actionsを使って誤字脱字の検知もできます
そして、自分が使い慣れたエディタを使って記事を書いてそのままアップロードできます
ですが、今自分がしる限り、これができるサービスはzennしかないと思ってます
つまり、エンジニアに関連する記事以外、この体験は得られないということです
なので、pelicanとGitHub Pagesを使って、自分のブログを作ってみました
要件
ざっくりまとめると↓のような感じになると思います
- ローカルで記事が書ける
- markdownで記事が書ける
- 書いた記事をコマンド一つで公開できる
- ある程度、デザインに関して融通が利く
- あとからプラグインなどでブログの拡張ができる
下2つは必須ではありませんが、最初の3つはことの発端なので、できないと話になりません
pelican
というわけで、探してみたらあっさり見つかりました、pelicanと呼ばれるPython製の静的サイトジェネレータです
Python製のパッケージなので、pip経由から取得します
また、デフォルトではmarkdownの出力に対応してないので、これに対応できるようにmarkdownのパッケージも入れます
pip install pelican markdown
環境構築
pelicanとmarkdownのインストールに成功したら、pelicanを使ってブログの環境を作ります
とは言っても、することは以下のコマンドといくつかの質問に答えるだけです
まずは、以下のコマンドを実行します
pelican-quickstart
すると、大体以下のことを聞かれます(私が設定して聞かれたないようなので、回答によっては増減するかもしれないです)
> Where do you want to create your new web site? [.] .
> What will be the title of this web site? samplesite
> Who will be the author of this web site? lunachevalier
> What will be the default language of this web site? [ja] ja
> Do you want to specify a URL prefix? e.g., https://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 tasks.py/Makefile to automate generation and publishing? (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) y
> Is this your personal page (username.github.io)? (y/N) y
なお、この設定はあとから変えることができるので、特に決めてない項目に関しては設定せずに進めても問題ありません
雛形が生成されると、以下のディレクトリ、ファイルが作成されます
- Makefile
- content(ここにmarkdownのファイルを配置する)
- output(markdownの出力結果)
- pelicanconf.py(pelicanの設定ファイル)
- publishconf.py(公開するときに使う設定ファイル)
- tasks.py(今回は使ってないので、説明は割愛します)
記事を書く
content配下にmarkdownで記事を書きます
ファイルの最初にpelicanの記事ルールとしていくつかの情報を書く必要がありますが、それ以外はいつもどおりのmarkdownで書けます
Title: 最初の投稿
Date: 2019-02-24
Category: テスト
Tags: テスト, 投稿
Slug: FirstPost
Authors: lunachevalier
Summary: 簡単にブログ作成
# これで簡単に記事が作成できます
デフォルトだと、こんなデザインで出力されます
記事をジェネレートする
markdownが用意できたら、以下のコマンドでHTMLファイルをジェネレートします
make html
ちなみに、このコマンドはローカル用にジェネレートされます
記事を確認する
成功すると、outputにジェネレートした結果が出てきます
それを確認したら、以下のコマンドでローカルサーバを起動します
make serve
http://localhost:8000 を開くと、以下のように出力されていたら成功です
↑がpelicanのデフォルトのデザインになりますが、気に入らなかったら↓で有志の方々がまとめています
デザインの変更に関しては今回は割愛します
GitHub Pagesに公開する
ここまででローカルでブログを書く環境は整いましたが、まだ公開する環境ができてません
公開するには、ghp-importという、GitHub Pagesへの公開操作を簡単にするパッケージで、Makefileで使っているのでこれを入れます
pip install ghp-import
公開するにはGitHub Pages、つまりGitHubのリポジトリが必要になるので、リモートリポジトリをgit remote addで追加します
追加したら、以下のコマンドで公開します
make github
デフォルトでmainブランチがGitHub Pages用のブランチになるので、GitHubのリポジトリの設定画面で、mainブランチを指定します
https://username.github.io/repositoryname/ (リポジトリ名をusername.github.ioにしてたら、repositorynameは不要)にアクセスすると、デザインが崩れた状態で表示されると思います
崩れてしまった場合、publishconf.pyに以下を追加します
SITEURL = 'https://username.github.io/repositoryname/'
これでもう一度make githubを実行すると、無事にデザインが反映された状態で公開されていると思います
最後に
公開したブログとそのリポジトリは↓になります
Discussion