GatsbyJSで作っているブログにSemantic UI Reactを導入した

2019-04-10

導入した背景

ブログのデザインをカスタマイズするためにフレームワークを導入したかったので、普段から使い慣れているSemantic UIを導入した。Reactコンポーネント版のSemantic UI Reactがあるので、そちらを導入した。

今回は、テーマをいじらずに、必要に応じてオーバーライドしていくスタイルで開発していこうと思ったので、公式に従って、 Semantic-UI-CSSを入れる方針で進めた。

bash

$ npm install -S semantic-ui-react semantic-ui-css

あとは、コンポーネントをimportして使っていく。

テーマをいじりたい場合は、Semantic-UI-LESSを使うと良さそう。

bash

$ npm install -S less gatsby-plugin-less semantic-ui-less semantic-ui-react

このスターターを参考にすると良い。

徐々にページをSemantic UI Reactのコンポーネントに置き換えていっている。とにかく快適な開発環境をどんどん整えていきたい。

キクナントカ

ソフトウェアエンジニアをしています。Flutter、Rails、GatsbyJSを主に触っています。趣味でボードゲームを制作したり、個人開発したりしています。詳しくはこちら。

GatsbyJSにブログを移行するまでにやったこと

GatsbyJSで作っているブログでSass with CSS Modulesな環境を整えた