マウスしたりWebしたり

follow us in feedly

GatsbyJSに移行しました

約10ヶ月ぶりの更新になりますね.ブログの更新をサボっていた結果です. また色々と書いていこうと思います.

今回は,Gatsbyへの移行について書こうと思います.即落ち2コマとか言わない!

GatsbyJSとは

Reactベースの静的サイトジェネレーターで,GraphQLによるデータ管理に強いのが特徴です.
ちょうどGraphQLに興味が出てきたので使ってみました.
チュートリアルをこなしていくだけでブログの雛形ができるのでとても簡単でした.

移行してよかったこと

SEO関連やWPA関連がデフォルトで用意されているので,プラグインを使うだけで良くなって楽ですね.
例えばこれ.ちゃんとカードが出ています.
また,pluginを使うとTwitterのembedもイイカンジに埋め込めます.

コードブロック

いい感じにシンタックスハイライトがつきます.これはgatsby-remark-prismjsというpluginのおかげです.

add.ts
const num = 1;
const add = (a: number , b: number) => a + b;console.log(add(1, 2));

絵文字

Markdownファイル中で :1: と入力するとemoji-+1になります.

KaTeX

KaTeXによる数式表記もできます.

D=ρ×HDt=J×E+Bt=0B=0\begin{aligned} &\nabla \cdot \bm{D} & = \rho\\ &\nabla \times \bm{H} - \frac{\partial \bm{D}}{\partial t} & = \bm{J}\\ &\nabla \times \bm{E} + \frac{\partial \bm{B}}{\partial t} & = 0\\ &\nabla \cdot \bm{B} & = 0 \end{aligned}

まとめ

プラグインをぶっ刺すだけで簡単にいろんなことができるので楽しいです.まだまだ面白そうな機能がたくさんあるので追加していきたいですね.