Update instructions on publishing to GitHub pages (facebook#841)

* Update instructions on publishing to GitHub pages

* Update README formatting

Author: Janpot

packages/react-scripts/scripts/build.js

@@ -147,13 +147,19 @@ function build(previousSizeMap) {
       console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
       console.log('To publish it at ' + chalk.green(homepagePath) + ', run:');
       console.log();
-      console.log('  ' + chalk.cyan('git') + ' commit -am ' + chalk.yellow('"Save local changes"'));
-      console.log('  ' + chalk.cyan('git') + ' checkout -B gh-pages');
-      console.log('  ' + chalk.cyan('git') + ' add -f build');
-      console.log('  ' + chalk.cyan('git') + ' commit -am ' + chalk.yellow('"Rebuild website"'));
-      console.log('  ' + chalk.cyan('git') + ' filter-branch -f --prune-empty --subdirectory-filter build');
-      console.log('  ' + chalk.cyan('git') + ' push -f origin gh-pages');
-      console.log('  ' + chalk.cyan('git') + ' checkout -');
+      console.log('  ' + chalk.cyan('npm') +  ' install --save-dev gh-pages');
+      console.log();
+      console.log('Add the following script in your ' + chalk.cyan('package.json') + '.');
+      console.log();
+      console.log('    ' + chalk.dim('// ...'));
+      console.log('    ' + chalk.yellow('"scripts"') + ': {');
+      console.log('      ' + chalk.dim('// ...'));
+      console.log('      ' + chalk.yellow('"deploy"') + ': ' + chalk.yellow('"gh-pages -d build"'));
+      console.log('    }');
+      console.log();
+      console.log('Then run:');
+      console.log();
+      console.log('  ' + chalk.cyan('npm') +  ' run deploy');
       console.log();
     } else if (publicPath !== '/') {
       // "homepage": "http://mywebsite.com/project"

packages/react-scripts/template/README.md

@@ -885,19 +885,29 @@ Open your `package.json` and add a `homepage` field:
 **The above step is important!**<br>
 Create React App uses the `homepage` field to determine the root URL in the built HTML file.
 
-Now, whenever you run `npm run build`, you will see a cheat sheet with a sequence of commands to deploy to GitHub pages:
+Now, whenever you run `npm run build`, you will see a cheat sheet with instructions on how to deploy to GitHub pages:
+
+To publish it at [http://myusername.github.io/my-app](http://myusername.github.io/my-app), run:
 
 ```sh
-git commit -am "Save local changes"
-git checkout -B gh-pages
-git add -f build
-git commit -am "Rebuild website"
-git filter-branch -f --prune-empty --subdirectory-filter build
-git push -f origin gh-pages
-git checkout -
+npm install --save-dev gh-pages
+```
+
+Add the following script in your `package.json`:
+
+```js
+  // ...
+  "scripts": {
+    // ...
+    "deploy": "gh-pages -d build"
+  }
 ```
 
-You may copy and paste them, or put them into a custom shell script. You may also customize them for another hosting provider.
+Then run:
+
+```sh
+npm run deploy
+```
 
 Note that GitHub Pages doesn't support routers that use the HTML5 `pushState` history API under the hood (for example, React Router using `browserHistory`). This is because when there is a fresh page load for a url like `http://user.github.io/todomvc/todos/42`, where `/todos/42` is a frontend route, the GitHub Pages server returns 404 because it knows nothing of `/todos/42`. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:
 * You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to `hashHistory` for this effect, but the URL will be longer and more verbose (for example, `http://user.github.io/todomvc/#/todos/42?_k=yknaj`). [Read more](https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md#histories) about different history implementations in React Router.