TL;DR

React初心者がマークダウンビューアを作ってGitHub Pages ( github.io )で公開するまでの話。
色々忘れそうなので備忘録。

つくったもの

シンプルなマークダウンビューアを作りました。
https://y0kuda.github.io/react-markdown-viewer
(リポジトリ: https://github.com/Y0KUDA/react-markdown-viewer)

1. 雛形作成

create-react-appで雛形の作成が可能。
私はTypeScriptを使って開発したいので--typescript引数を付けています。

create-react-app my-app --typescript

とりあえず、yarn startを実行すれば雛形のアプリケーションが起動します。

2. node packageのインストール

必要に応じてnode packageをインストールします。
今回はマークダウン表示するためにremarkableをインストールします。
私はTypeScriptで開発しますが、型情報が含まれていないので@types/remarkableも併せてインストールします。

yarn add remarkable
yarn add @types/remarkable

3. コーディング

App.tsxを以下のように変更します。

App.tsx

import React, { useState } from "react";
import "./App.css";
import Remarkable from "remarkable";

const App: React.FC = () => {
  const [input, updateInput] = useState("# howdy.\nInput your markdown.");

  return (
    <div className="App">
      <h3>Input Markdown</h3>
      <textarea
        id="markdown-content"
        onChange={(e: any) => {
          updateInput(e.target.value);
        }}
        defaultValue={input}
      />

      <h3>Output</h3>
      <div
        className="md"
        dangerouslySetInnerHTML={{__html:new Remarkable().render(input)}}
      />
    </div>
  );
};

export default App;

4. URLの設定

GitHub Pagesで公開するために環境変数PUBLIC_URLを設定します。
環境を汚染しないようにcross-envを使います。
ビルド時に設定されてればいいので、package.jsonのbuildに追記します。

"build": "react-scripts build",

↓

"build": "cross-env PUBLIC_URL=/react-markdown-viewer react-scripts build",

5. ビルド

yarn buildでビルドできます。
ビルド生成物は./buildに出力されます。
これらをサーバにアップロードすることで公開できます。

6. GitHub Pagesで公開

GitHub Pagesでは任意のディレクトリをルートに設定することができないので、別のブランチに./buildがルートディレクトリになるように設定しましょう。

git subtree push --prefix build/ . gh-pages
git push origin gh-pages:gh-pages

これで、masterブランチの./buildの中身がgh-pagesブランチのルートにクローンされます。
githubリポジトリのSettingsからGitHub Pagesで公開する設定が可能です。今回の場合、gh-pagesブランチを公開するように設定します。
これでアクセスできるようになります。
https://y0kuda.github.io/react-markdown-viewer

今回は、URLを短くしたいので、./buildがルートになるように設定しましたが、この作業をしない場合でも./buildにアクセスするURLを指定すれば動かすことが可能です。その場合、URLはhttps://y0kuda.github.io/react-markdown-viewer/buildになります。

さいごに

最後まで読んでくれてありがとうございます。
既に腐るほどありそうな記事を書いてごめんなさい・・・
でも、誰かのためになれば幸いです。
指摘やアドバイス、コメント等あれば遠慮なくお願いします。

参考

https://ja.reactjs.org/docs/hooks-state.html
https://qiita.com/mikakane/items/87c8f676815da4e5ac04#%E3%81%B2%E3%81%A8%E3%81%A4%E4%B8%8B%E3%81%AE%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA%E3%82%92github-pages%E3%81%AB%E5%85%AC%E9%96%8B%E3%81%99%E3%82%8B

【初心者】Reactアプリケーションを作ってデプロイする方法【歓迎】