Markdownファイルを作成するだけでBlog更新できるように自作した話

20200712

kzms2
product

まずはじめに

今日のBlogの内容は中身ほぼないです。ただBlog作り直したよ！Markdown形式で書かけるよ！Markdown、PHP大好き！って記事です。

暇で暇でしょうがない人だけ読んでください！

背景

今までWordpress使ってたのですが、イロイロ手を入れるのも大変そうだった上に、自分でコントロールできたほうがいいかなと思ってmarkdownファイルを書くだけでBlog書けるように自作しました。

gatsbyjs使えよ感が満載ですが自分で使い勝手が良いやつを作りたかったんや…

仕組みなど

ちなみにページ全体はwebpack使って割と普通目のHTML・JS・CSSを吐き出してます。CSSをJSにバンドルするのはSSRでもない限り信念に反するのであえて分けてます。

主に以下な感じでBlog投稿、表示されるように作ってあります。PHPだいすき！

markdownファイルを用意
- この記事はこのMarkdown形式ファイルが本体
  同階層にMarkdown形式ファイルを書いておくだけでOK
PHPでゴニョゴニョしてBlog自体を表示
- 使ってるmark down パーサーはParsedownこれめっちゃいいです
PHPでゴニョゴニョして一覧を作成
- Blog HomeやTop Pageに表示
一応自前でRSSも作成これもPHP
- https://kzms2.xyz/feed/

要するに以下のようなMarkdown形式ファイルを作成すればBlog書ける仕組みです

![](./img/20200711/hero.jpg) 👈OGPや見出しに使う画像
# Blogをmarkdownファイルで更新できるようにしました 👈2行目はタイトル

ここからが本文、Markdownなので<strong>HTML</strong>も書けるよ〜  👈3行目以降が本文

：
：略
：

<!-- tags:kzms2,product --> 👈最後の行に文章のタグ付け、その他情報あればここに足していく予定

Markdown大好きっ子かつコンパイルいらないっていうオレオレBlog仕様にしました。今更Blogなんていらない気もするんですけどね…何か書きたいものがあるときに気楽に書ける環境が今までなかったのでまあいいんです！

でもこのBlog絶対に不具合がある気がする…変なところあったらTwitterでこっそり教えて下さい🥺

最後に

気楽に書けるスペースほしかったので、思い立ったときに自分の好きなCSSやらSVGやらFrontend系、W3Cのことなどを書いていきたいな〜とゆるゆる考えております😊

Tweets by kzms2