S.F. Page

Programming,Music,etc...

静的ブログジェネレータはなんとか進めてる - jekyllのような静的ブログジェネレータをnode.jsで作る(4)

静的ブログジェネレータの製作は何とかかんとか飽きずに進めている。よってブログ更新も滞りがちである。
今のところの成果は以下に格納。

かなりいろいろいじっているので、どこをどうしたかもはやわからなくなっているが、一応書いておこう。

デザイン

デザインはblog.jxck.ioを参考にしている。ブログの構成としては、年毎のアーカイブメニュー、カテゴリごとのアーカイブメニュー、それと記事で構成される。トップページは年毎のアーカイブで一番新しい年のものでいいかなと今のところ思っている。
今のところの見た目は以下。

アイコンはOcticonsで、SVGファイルをインライン展開して使用している。展開する際不要な属性はすべて削除している。

一応レスポンシブデザインになっている。

メニューは簡素で、ハンバーガーメニューを使わないことにした。ナビゲーション・メニューはヘッダー・フッターに固定位置に配して、記事間の移動(次の記事・前の記事)はフッター・ナビゲーションで行うことにした。デザインはcssnextを使っているが、結構適当にやっている。多分無駄な記述が多いと思う。いずれ整理しなければと思っている。cssで思うのはflexboxがすごい便利だということだ。これからのレイアウトはflexboxで行うのが普通になるだろう。

静的ブログジェネレータ

静的ブログジェネレータの進捗は以下の通りだ。

  • はてなブログ記事を吸出す機能 … ほぼ完成
  • はてな記事を静的ブログジェネレータのファイルフォーマット(json属性付き.mdファイル)に変換する機能 … ほぼ完成
  • .mdファイルをブログコンテンツ(HTML)に変換する機能 … 6割くらい完成
    • markdown部分をHTMLに変換する機能 … markedで実装済み
    • 数式(tex)をSVGに変換する機能 … MathJaxで実装ずみ
    • コードハイライティング機能 … highlight.jsで実装ずみ
    • はてな記法を変換する機能 … 未実装
  • 年毎アーカイブメニューを作成する機能 … 8割くらい
  • カテゴリごとアーカイブメニューを作成する機能 … 1割くらい
  • AMP対応HTMLファイル出力機能 … 未実装
  • RSS対応機能 … 未実装
  • サイトマップ … 未実装
  • Blog Ping対応 … 未実装(サーバ側のスクリプトで実装予定)
  • SNSサポート機能 … 未実装
  • githubのwebhookを受けてホストファイルを更新し、更新・追加ファイルをgzip圧縮する機能 … 実装の見直しを実施したが、チェックは未実施

今回のこのジェネレータは、JSで何かを作ったら、即座に公開できるような環境を目指したいと思ったりもしているので、そういうことをするのに便利な機能も実装したいと思っている。例えば、githubレポジトリのソースコードへのURLを指定したら、そのコードをシンタックスハイライティングしながら取り込む機能とかね。

あとは関連記事情報をAI使って表示してみたいなぁ。。

これが完成したら、bl.ocks.orgやgithubでホストしているWebコンテンツはすべて集約しようかなとも思っている。単にプロキシするだけに終わるかもしれないけどね。