Markdownで快適にブログを書く

Markdown を使って快適にブログを書きたくない?書きたいですよね?そう、書きたい!
ではどうすればいいか?というのをこれから書いていきます。
JAMStack を使って GitHub Pages と Next.js SSG で Markdown ブログを作ろう!みたいな人はブラウザバックをオススメします。

技術選定

  • JAMStack
  • はてなブログ
  • WordPress

JAMStack

まず JAMStack は真っ先に除外します。ブログを書きたいのであってブログを作りたいわけではないからです。

また SSG だとクライアントサイドのレンダリングコストが重く、リッチなブログにしようとすると負荷がしんどい気がしています。恐らく SEO 対策的にも CSR を妥協して極限まで SSG していないと厳しいのではないでしょうか?

はてなブログ

カスタマイズがすんごくだるい上に、真面目にやろうとするとクライアントサイドで HTML をゴリゴリ書き換えたり、order などのハックに近い CSS を多用して擬似的に要素を移動させたりする必要があり、レイアウトを組むのが非常に面倒です。

エディタもしょぼいしカテゴリはないし(はてブロのカテゴリは実質的にタグなので)年会費が高い割に出来ることの制限が強い…。あんま SEO も強くなかったし、試しに使ってみたものの流入が激減…正直個人的にこれはですね。

WordPress

多分こいつが一番現実的な選択肢です。WP Githuber MDを使うことで不自由なく Markdown を扱うことが出来ると思います。但し内蔵の Prism.js はなんかいい感じに動いてくれないケースがあり、その場合はカスタマイズが必要です。

カスタマイズについてもプラグインやテーマが豊富にあり、改造も容易なのでローコストでリッチなものが実現しやすいと思います。またセルフホストなのでデータの取り回しの自由が効きやすいのも大きなポイントですね。

CMS は色々使ってきましたが、なんだかんだブログは WordPress が一番だなって思います。SEO 対策も Google 謹製のやつがあるし、特に何もしなくてもある程度なんとかなるのは強みだと思います。

カスタマイズ法

CSS

使っているテーマと整合性が取れるようにいい感じにします。私は Dracula for Prism.js を改造して使いました。

JS

私の場合は次のコードをヘッダタグの中に足して対処しました。特に内容の説明はしませんが、行番号とコピーボタンが出るようにしています。

<script src="https://unpkg.com/prismjs@1.28.0/components/prism-core.min.js"></script>
<script src="https://unpkg.com/prismjs@1.28.0/plugins/autoloader/prism-autoloader.min.js"></script>
<script src="https://unpkg.com/prismjs@1.28.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
<script src="https://unpkg.com/prismjs@1.28.0/plugins/toolbar/prism-toolbar.min.js"></script>
<script src="https://unpkg.com/prismjs@1.28.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('pre > code').forEach((codeEl) => {
      codeEl.className = codeEl.className === '' ? 'language-none' : codeEl.className;
      codeEl.className = codeEl.className.replace(/^sh$/, 'shell');
      codeEl.parentNode.className = 'line-numbers';
    });

    window.Prism.highlightAll();
  });
</script>