Challenged Jekyll template and hate

Jekyllの画面(テンプレート)作った

結論から言うと、二度と使いたくない。

Pelicanの方がいいや。

やりたかったこと

TOPページ：直近5件程の記事タイトルを表示する
タグごとの記事一覧ページを作る
タグの一覧ページ作る
カテゴリごとの記事一覧ページを作る
カテゴリの一覧ページ作る
アーカイブ(年月)ごとの記事一覧ページを作る
アーカイブ(年月)の一覧ページ作る
Aboutの固定ページを作る
サイドバーにカテゴリ、タグ、アーカイブ、Aboutのリンクを作る

できたこと

TOPページ：直近5件程の記事タイトルを表示する
タグごとの記事一覧ページを作る
タグの一覧ページ作る
カテゴリごとの記事一覧ページを作る
カテゴリの一覧ページ作る
Aboutの固定ページを作る
サイドバーにカテゴリ、タグ、Aboutのリンクを作る

乗り越えた事

HexoやHugoは既存のテーマをそのまま使ったからなんとも言えないけど、Pelicanは一から作った際にも苦労しなかったカテゴリやタグの一覧ページを作るのにJekyllは苦労した。

標準で機能がついてなくて、pluginディレクトリにページを生成するモジュール？を書いて対応した。

公式に載っているコードをほぼそのまま使いまわしたんだけど、Rubyの世界というかJekyllではカテゴリやタグごとのページ生成は静的サイトジェネレーターの標準機能のうちには入らないらしい。

あきらめた事

アーカイブページ

上記のカテゴリやタグのページ生成のノリでいけるかと思ったけど無理だった。

正確には気持ちが切れた。

Pelicanの場合、記事リストをgroup by　した結果をそのままfor分で使えるのだけれど、Jekyllが使っているテンプレートエンジンではできないらしく、いちいち変数にアサインしないといけない。そのくせ、変数にアサインする時はgroup by も sort もできるらしい。

あと、気づかなかったんだけど、記事のデータに投稿年月日の年や月のデータがないので結局こねくり回さないと、年や月でgroup byした記事リストの抽出がうまくできない。

この、年月ごとに記事リストを抽出したオブジェクトが簡単には生成できないので、サイドバーの表示もアーカイブリストの生成もうまくできそうにないので諦めた。

あと、ググって出てきた書き方が汚いというか美しくないというか、「え？こんな手続き型なめんどくさい記述をテンプレートで書くの？」みたいなのが散見されて嫌になった。

まったくもう。

参考

Jekyll公式

まとめ

Rubyを理解したら見直せるかもしれないけど、それまではもう触りたくない。

記事の投稿だけはして使い続けてみる。

[Read More…]

2017.03.25 study-daily

Hugoの記事の命名規則を見直して直した

辛かった。

カテゴリ名、タグ名、ファイル名、記事のタイトル。これらが日本語だとジェネレート後のディレクトリ名、ファイル名、URLパス等で日本語が混ざってしまうので、片っ端から探して変更した。

今後は記事内容以外では絶対に日本語を使わないようにしないと。

これはおそらくHugoに限らず静的サイトジェネレーターならだいたいそうだと思う。

しかしカテゴリ名やタグ名で日本語使えないのは辛いな。。

[Read More…]

2017.03.24 study-daily

勇気を出してMackerelを試してみた

前々から気にはなっていたMackerelをお試しで入れてみた。

VPS契約しているUbuntu16.04
使い捨てのAWS上WIndows2012

インストール

ヘルプに書いてある通りに作業してつまずく事もなくすんなりできた。

監視項目

デフォルト監視項目

通常の監視項目で既に普段Zabbixで見て使っている項目を監視できているので、Zabbix使いこなす気がないならMackerelでいいかなって思った。

カスタムメトリック

今回はまだ試していない。

けど、簡単そうだ。

プラグインの作成

今回はまだ試していない。

golangじゃないといけないのかと思っていたけれど、他の言語でもいいらしい。

外形監視

ホストが止まっても監視を続けるので、仕様上間違ってはいないんだけどずっとエラーがで続ける。

ホストをメンテナンスにしたり停止したりした時は外形監視も停止する仕組みがあるといいいかなって思った。

外形監視の定義削除しかなかったように思える。

通知設定

通知設定も簡単だし、いろんなサービス(Slackとか)と簡単に連携できるのも魅力だなと感じた。

まとめ

まだプラグインを試していないのだけれど、とにかくヘルプドキュメントが素晴らしいと感じた。

自分ならそこまではやらないよってくらいに丁寧に書いてあった。

特に感心したのは他サービスと連携するために、他サービス上での設定の説明が画面キャプチャ入りで説明されていたこと。

小規模な場合にフリーでどこまで使えるのかフリープランを調べていきたい。

Zabbixサーバーを一台用意する場合との費用比較とか調べていきたい。

[Read More…]

2017.03.23 study-daily

UTF-8-MAC にまたしてもやられた

全角のチルダだか波ダッシュだかがmacOSの時とそれ以外で違う文字コードなのか別の文字なのか、とにかく想定外の文字コードのものがバリデーションをすり抜けてきた。

一つのOS上で禁止文字を羅列して出来たつもりになってたけどUTF−8−MACにはこれからも悩まされるんだろうなー。

[Read More…]

2017.03.22 study-daily

Bitbucketけっこういいかも

プライベートリポジトリ欲しくてBitbucket試してみた。

乾燥

Gitが使えるのでhg clone フォー！(古い)とかやらなくていいし抵抗なくて使えていいですね。

なんかWikiとか課題(issue)とかも使えるし、どうやらGithubPagesみたいのもできるみたい。なんかTrelloともなんか連携できるみたいでいいですね。

使いこなせる自信ないけどPipelineてのもあるらしい。

Githubとの使い分けがなやましいけど、とりあえずはプライベートにしたいものは基本Bitbucketにしよう。

[Read More…]

2017.03.21 study-daily

自分の目標をアジャイルにスプリントな感じで少しずつ達成していきたい

と、言うことです。

覚えたいこと、挑戦したいことを目標とするはいいけど、いつまでたっても着手しなかったり遅々として進まなかったりするので優先順位をつけて期限を設けて手中して取り組んでいけば少しは結果が変わってくると信じたい。

現在の目標

ブログや静的サイトのテーマをつくり込みたい(Pelican,Hexo,Jekyll,WordPress,Hugo,Sphinx)
AWSの機能のだいたいを触って感覚を掴んでおきたい
Microsoft Azureを触ってAWSとの違いを掴んでおきたい
GCC？を以下略
Blumixに挑戦したい
FreeBSDを構築したい
Alpineを構築して慣れたい
Ansibleを一通り触っていろいろできるよういなりたい
Dockerをある程度使えるようになりたい
IPv6の学習と擬似ネットワークの構築してみたい
VPNの設定をGUIじゃなくても設定できるようになりたい
VyOS？を試してみたい
Shell及びAWKを覚えたい
Powershellを覚えたい
dot net C#を覚えたい
Javaを覚えたい
Androidを覚えたい
Swiftを覚えたい
JavaScriptをもっと使いこなせるようになりmたい
Perl6/Perl5を使えるようになりたい
PHP7を覚えたい
PHPのフレームワーク、Laravelを覚えたい
Nginxに組み込むLuaを少し試したい
Ruby/Railsを覚えたい
Python3をもう少し使えるようになりたい
Scalaちょっと覚えたい
Lispわかるようになりたい
Clojure書けるようになりたい
Haskell読めるようになりたい
F#ちょっとしたものなら書けるようになりたい
ActiveDirectory/OpenDirectoryがわかるようになりたい。
Golang書けるようになりたい
Makerel試したい
Erlang読み書きできるようになりたい
Elasticsearch扱えるようになりたい
Neo4j試したい
MongoDB試したい
DynamoDB試したい
Redis扱えるようになりたい

とっても曖昧なものが多い。。

今もっとも取り組みたいことを多くて3つに絞るなら

ブログや静的サイトのテーマをつくり込みたい(Pelican,Hexo,Jekyll,WordPress,Hugo,Sphinx)
Makerel試したい
Dockerをある程度使えるようになりたい

以下、打ち消し戦のものは現時点で達成済みのもの

[Read More…]

2017.03.20 setting-construction

Pelicanで使う自分用テーマを作成した

静的サイトジェネレーター用の基本的なブログレイアウトを一つ作っておくと使い回しができると思い、Python製のPelicanから着手することにしてみた。

結論から言うと、なかなか時間がとれないのもあって、足掛け2ヶ月かかった。

その1：ベースとなるレイアウトを素組する

htmlとCSSのみでできるだけレスポンシブな簡易ブログ用のレイアウトを考えて作った。

https://github.com/sakadonohito/site-base-theme

flexboxを中途半端に使っているのと、Pelicanテーマ作り終わってからフィードバックしている部分もある。ホント適当。

CSSはSCSSからWebpackでビルドしているけど、限りなく必要ないレベル。 EmacsならSCSS保存する時にCSSをビルドしてくれるのでホント不要な構造、しかも作り終わる前にWebpackは2がでちゃってバージョンが古いというオマケつき。そうです、Webpack使ってるぜアッピルがしたかっただけなのです。

その2：Pelicanのテーマを作る

ググって出てきたシンプルなテーマをコピーして
作ったベースレイアウトにまるっと取り替えて
変数部分がちゃんと展開されるように調整して
パーツをバラす

みたいな感じで作成。

結局よくりようしたのは公式ドキュメント

ハマったところ

1. 見本にしたテーマのパーツ毎の役割がよくわからなかった

categories.htmlとcategory.htmlってあって、最初複数形のはカテゴリ別の一覧表示で単数系のは1記事のパーツかと思ったら、複数形はカテゴリ名の一覧で単数系が特定のカテゴリでの記事一覧だった。タグの場合はさらに1記事用パーツレイアウトにはめ込む用の記事に関連づいたタグを横一列に並べるtaglist.htmlなんてのもあって、さらに混乱した。

2. ビルド失敗した時どこでエラーが発生したのか分からない

ビルドのエラーログの出力設定があるのか調べていないだけなんだけど、テンプレート作成している時にビルドエラー発生したけど、どこの編集のせいか分からない(1行文法エラーで失敗したぜ！的なメッセージがでるだけ)のでこまめにビルドして確認しながらじゃないと迷路に迷い込む。

ショートカットキーのタイポとかで変な場所に意図せず文字を入力してしまっているのに気づかず、ビルドが失敗した時には、身に覚えがなかったので解決に時間がかかった(2分探索みたいにコードを消したり戻したりしながらビルドしてエラー箇所を探した)。

3. 記事データのリストオブジェクトは生成するページのコンテキストに依存するものがある

period_Archives.htmlっていう特定の期間の記事リストを表示するためのパーツの上でarticlesという記事リストオブジェクトは全体じゃなくて、その期間の記事リストオブジェクト。全記事のリストは代わりにall_articlesてのある。じゃぁ常にall_articlesを使えば？ってなるんだけど、TOPとか他の場所だとこのall_articlesは空欄。

4. 年月毎に記事のカウントを取ったりURL分ける方法の説明がおろそか

結論からいうと、URLについては設定ファイルに

MONTH_ARCHIVE_SAVE_AS = '{date:%Y}/{date:%m}/index.html'
他にも
AUTHOR_SAVE_AS とか
PAGE_SAVE_AS なんかもあるのよ

とか書いておくと、/2017/03/みたいなパスで2017年3月の記事の一覧ページが生成される。今にして思うと年のフォルダ&月を意味するファイルの組み合わせでよかったんじゃないか説もある。

年月の記事カウントについては全記事を年でまとめた記事リストの記事リストを作成して「記事リスト」をさらに月でまとめてカウントを取るみたいなことをやる。これはそんなようなことをするサンプルのテーマがたまたま見つかったから作れたけど見つからなかったらアーカイブのページが断念したと思う。

こんな感じ

<section>
	<p>Archives</p>
	{% if all_articles|count %}
	<ul>
		{% for year, date_year in all_articles|groupby('date.year')|sort(reverse=NEWEST_FIRST_ARCHIVES) %}
		　　{% for month, articles in date_year|groupby('date.month')|sort(reverse=NEWEST_FIRST_ARCHIVES) %}
		　　　　<li><a href="/{{ year }}/{{ '%02d' % month }}/">{{ year }}年{{ month }}月</a>({{ articles|count }})</li>
		　　{% endfor %}
		{% endfor %}
	</ul>
	{% elif articles %}
	<ul>
	{% for year, date_year in articles|groupby('date.year')|sort(reverse=NEWEST_FIRST_ARCHIVES) %}
	　　{% for month, articles in date_year|groupby('date.month')|sort(reverse=NEWEST_FIRST_ARCHIVES) %}
		　　　　<li><a href="/{{ year }}/{{ '%02d' % month }}/">{{ year }}年{{ month }}月</a>({{ articles|count }})</li>
	　　{% endfor %}
	{% endfor %}
	</ul>
	{% endif %}
</section>

正直リストオブジェクトをパイプで次の処理に渡せるのjinjaのドキュメント見なかったら想像もできなかったので、このパターンのサンプルくらいPelicanのドキュメントにも載せておいてほしい。

[Read More…]

2017.02.20 setting-construction

Pelicanを試す

Python製の静的サイトジェネレーターPelicanを試す

Hugo,Hexo,Jekyllと試してきて、せっかくなのでPython製のものも試そうとPelicanを試した。

インストール

mkdir <<blog>>
cd <<blog>>
pip install pelican Markdown
pelican-quickstart

なんかいろいろ聞かれるので適当に答える。今回はS3にFTPで物理コピーをする運用のため、デプロイに関する質問は全てNo。

記事を書く

記事はcontent以下にreStructuredTextもしくはMarkdownで書きます。 content以下にディレクトリを配置するとそのディレクトリ名がカテゴリ名扱いされるらしい。当分はいいや。もちろん、カテゴリはテキストファイルないのヘッダー？に記述できますので、カテゴリが必要だからといってディレクトリでわかなければいけないわけではありません。

pelican content -s pelicanconf.py

でoutputディレクトリに静的ファイルが生成されます。

簡単ですな。

[Read More…]

2017.02.19 setting-construction

Jekyllを試す

Ruby製の静的サイトジェネレーターを試してる。

インストール

以下下記URLを参考にいろいろ試したけど、情報が古くコマンドが変わってた。参考

gem install jekyll
mkdir _site _posts _site assets
mkdir -p assets/css

構造はこんな感じ

├── _config.yml
├── _layouts
│   ├── layout.html
│   └── post.html
├── _posts
├── _site
├── assets
│   └── css
└── index.md

jekyll serve --watch

で編集内容が即時される。

こんな感じでやっていこうと思います。

レイアウトがとてもダサイ感じなので、テーマをちゃんと作っていきたい。

Ruby製だから？ヘルプが分かりやすい。

静的ファイルを生成したい場合はjekyll buildで_siteディレクトリに生成される。

[Read More…]

2017.02.19 setting-construction

Hexoを試す

JavaScriptの静的サイトジェネレーターHexoを試す

JavaScript(Node.js)ベースの静的サイトジェネレーターを試してみようと思った。

インストールと初期設定

npm install -g hexo-cli
hexo init <<blog-name>>
cd <<blog-name>>
npm install
hexo server

これでHexoがインストールされサイトを開始できる hexe serverで開発用のサーバー起動状態になりhttp://localhost:4000にアクセスできる。

_config.ymlを編集する。

title: "サイトタイトル"
subtitle: "サブタイトル"
description: "サイトの説明"
author: <<author>>
language: ja
timezone: Asia/Tokyo

url: http://<<site-domain>>
root: /
permalink: :year/:month/:day/:title/

languageはjaにしてtimezoneはAsia/Tokyoにした。 urlは公開したいドメイン、rootはトップレベルにした。

permalinkの設定は:year/:month/:day/:title/のデフォルト設定のままにした。

記事の追加

hexo new <<post-name>>

これでHugoみたいに初期状態のができる。このあたり、Hugoと同じ感じで出来るので入りやすい。

当初、React製の「gatsby」にしようかと思ったけど、なんか違うと思ったので、止めた。

Publicファイルの生成

hexo generate

これでファイルがpublicフォルダに出力されるので、後は目的の場所にアップロードするだけ。

今回はここまで。

[Read More…]