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を以下のように変更します。
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