Corredor

ウェブ、プログラミングの勉強メモ。

Gatsby を使って React.js 製ブログを5分で作ってみた

前々から気になっていた React.js 製のサイトを立ち上げるジェネレータ、Gatsby (GatsbyJS) を試してみた。

公式サイトの Get Started に沿って試してみる。

# Gatsby CLI をグローバルインストールする
$ npm install -g gatsby-cli

# 雛形となる GitHub リポジトリを指定し、ブログアプリを構築する
$ gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog
# yarn インストールも行われる

# 「gatsby new blog」と指定したので blog ディレクトリが生成されているので移動する
$ cd blog/

# yarn インストールが完了しているので、このままアプリを起動できる
$ npm run dev

ブラウザで http://localhost:8000/ を開くと、これでもうブログが出来上がっている。

src/ 配下に Markdown ファイルを置いていけば記事が追加できるし、デザインも変更可能だ。公開は生成された public/ ディレクトリを置けばよく、楽チン。

ただ、標準で色々な CSS が突っ込まれていて、コレが大変分かりにくい。TypeFace とかいうフォント提供するパッケージとかがあって、中々 React.js 初心者には難解。自分で既存のスタイルを全部取り除いてみたものの、初期設定がしんどい…。

そこでもう少し調べてみると、gatsby-starter-blog をベースに、スタイル定義を取り除いた gatsby-starter-blog-no-styles というモノがあったので、こっちで雛形を作り直すことにする。

$ gatsby new blog https://github.com/noahg/gatsby-starter-blog-no-styles

こっちの生成物の方がシンプル。ココから自分でアプリを作り込んでいく方がやりやすいだろう。

React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで (NEXT ONE)

React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで (NEXT ONE)

  • 作者: 穴井宏幸,石井直矢,柴田和祈,三宮肇
  • 出版社/メーカー: 翔泳社
  • 発売日: 2018/02/19
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る

React,Angular,Vue.js,React Nativeを使って学ぶ はじめてのフロントエンド開発

React,Angular,Vue.js,React Nativeを使って学ぶ はじめてのフロントエンド開発

  • 作者: 原一浩,taisa,小松大輔,永井孝,池内孝啓,新井正貴,橋本安司,日野洋一郎
  • 出版社/メーカー: 技術評論社
  • 発売日: 2018/05/09
  • メディア: Kindle版
  • この商品を含むブログを見る

React開発 現場の教科書

React開発 現場の教科書