Install gh-pages package and document deployment process

README.md

@@ -22,11 +22,12 @@ Monocle is built upon the following technologies:
 - Bootstrap Icons (via [`bootstrap-icons`](https://icons.getbootstrap.com/))
 - Codemirror 6 (via [`@uiw/react-codemirror`](https://uiwjs.github.io/react-codemirror/))
 - Mermaid (via [`mdx-mermaid`](https://sjwall.github.io/mdx-mermaid/) and [`patch-package`](https://github.com/ds300/patch-package))
-- [`copy-to-clipboard`](https://www.npmjs.com/package/copy-to-clipboard)
-- [`file-saver`](https://www.npmjs.com/package/file-saver)
-- [Vitest](https://vitest.dev/)
-- [Prettier](https://prettier.io/) 3
-- [`patch-package`](https://www.npmjs.com/package/patch-package)
+- [`copy-to-clipboard`](https://www.npmjs.com/package/copy-to-clipboard) for copying text to the clipboard
+- [`file-saver`](https://www.npmjs.com/package/file-saver) for downloading files
+- [Vitest](https://vitest.dev/) for testing
+- [Prettier](https://prettier.io/) 3 for code formatting
+- [`patch-package`](https://www.npmjs.com/package/patch-package) for patching NPM packages
+- [`gh-pages`](https://github.com/tschaub/gh-pages) for deploying the app
 
 This code base was bootstrapped by running:
 ```shell
@@ -90,6 +91,27 @@ The file, `patches/mdx-mermaid+2.0.0.patch`, was generated by performing the fol
 2. Edit `node_modules/mdx-mermaid/package.json` (as documented in the patch file)
 3. Run `$ npx patch-package --exclude '^$' mdx-mermaid` to generate the patch file
 
+## Deployment
+
+### Quick start
+
+1. Bump `version` number in `package.json`
+   > The version number will accessible via `PACKAGE_VERSION` at build time ([more info](https://stackoverflow.com/a/70524430))
+2. Generate a production build
+   ```shell
+   npm run build
+   ```
+   > The production build will be in the `dist/` folder.
+3. (Optional) Preview the production build
+   ```shell
+   npm run preview
+   ```
+   > Then visit: http://localhost:4173
+4. Deploy the production build
+   ```shell
+   npm run deploy
+   ```
+
 ## Roadmap
 
 1. Apply syntax highlighting to the `Makefile` content ([non-React example](https://github.com/V-Lor/codemirror-mode-makefile/blob/master/example/index.html))