ブログ作ってみた
技術構成
unifiedについて
- markdownをHTMLにする色々をやるための基盤だと思っている
- おれも詳しいことはよくわからない
- 詳しくは こちら がわかりやすかった
remark-prismについて
- prismのremarkのプラグインバージョンという認識
- prismはmarkdownに埋め込んだコードブロックにクラスを振ってスタイルが当てられるようにしてくれるやつ
- もちろんCSSテーマもある
- このサイトではAtom One Darkを使っている(あぁ懐かしのatom...)
const array = 'あれい'
const number = [1]
こんな感じ
ハマったところ
unified周り
色々調べてみたところmarkdownをHTMLにするのに、remarkが良さげだったのでそれを入れてみた。 remarkはunifiedで動くライブラリと考えて良いはず。 使い方はこんな感じ。
import remark from 'remark'
import html from 'remark-html'
export default async function markdownToHtml(markdown) {
const result = await remark().use(html).process(markdown)
return result.toString()
}
remarkはプラグインを用いて色々できるようになっている。 例えば、このサイトでも使っているremark-prismがそう。 だがremarkのプラグインは、ものによっては開発が終了していて使えないものがある。。 そういう場合は大抵rehypeのプラグインを代わりに使う必要があるのだが、どういうわけか上記のremark始まりだと動かないことがあった。 あとCSSModuleで当てたスタイルが全部消えたりした。
なので、unified始まりに変えた。
import { unified } from 'unified'
const result = await unified()
.use(remarkParse) // markdown -> mdast の変換
.use(prism)
.use(remark2rehype) // mdast -> hast の変換
.use(rehypeExternalLinks, { target: '_blank', rel: ['nofollow'] })
.use(rehypeStringify) // hast -> html の変換
.process(markdown)
return result.toString()
他にもremarkのプラグインはremarkの最新バージョンに対応できないことがあったりした。 rehypeでも同じことが出来るならrehypeで基本やるようにした方が良さげかも。
Chakra UIについて
とても良い。 CSSに型が効く時代が来たんだぜ。 TailwindCSSよりも便利なコンポーネントが揃っていて、型で安全に書けるのにJSの自由度まで持っている。 素晴らしい。
TODO
- 今日の名言が日で変わるように
- OGP画像
- GA導入
- 記事の検索やページング
- サイトの色調を整える（スクロールすると明るくなる、夜明けの空をイメージしてます。）
- シェアボタンを置く
などなど
このサイトについて
テックブログにはしない。 僕はコードの他にも詩や音楽を書くのでそういったものを載せたい。 あと、映画や小説の感想なんかも書きたい。 どうぞよろしくお願いします。