Provide instructions on publishing GH Pages (#162)

* Provide instructions on GH Pages deploy

* Add docs for GH Pages deployment

* Prevent incorrect paths in file-loader

* Minor message tweaks

* Update README.md

* Fix relative paths

Author: gaearon

config/webpack.config.prod.js

@@ -29,6 +29,10 @@ var faviconPath = path.resolve(__dirname, relativePath, 'favicon.ico');
 var buildPath = path.join(__dirname, isInNodeModules ? '../../..' : '..', 'build');
 var homepagePath = require(path.resolve(__dirname, relativePath, 'package.json')).homepage;
 var publicPath = homepagePath ? url.parse(homepagePath).pathname : '/';
+if (!publicPath.endsWith('/')) {
+  // Prevents incorrect paths in file-loader
+  publicPath += '/';
+}
 
 module.exports = {
   bail: true,

scripts/build.js

@@ -16,11 +16,13 @@ var config = require('../config/webpack.config.prod');
 
 var isInNodeModules = 'node_modules' ===
   path.basename(path.resolve(path.join(__dirname, '..', '..')));
-var relative = isInNodeModules ? '../..' : '.';
+var relative = isInNodeModules ? '../../..' : '..';
 if (process.argv[2] === '--debug-template') {
-  relative = './template';
+  relative = '../template';
 }
-rimrafSync(relative + '/build');
+var packageJsonPath = path.join(__dirname, relative, 'package.json');
+var buildPath = path.join(__dirname, relative, 'build');
+rimrafSync(buildPath);
 
 webpack(config).run(function(err, stats) {
   if (err) {
@@ -30,18 +32,28 @@ webpack(config).run(function(err, stats) {
   }
 
   var openCommand = process.platform === 'win32' ? 'start' : 'open';
-  var homepagePath = require(path.resolve(relative, 'package.json')).homepage;
+  var homepagePath = require(packageJsonPath).homepage;
   console.log('Successfully generated a bundle in the build folder!');
-  console.log();
   if (homepagePath) {
-    console.log('You can now deploy and serve it from ' + homepagePath + '.');
+    console.log('You can now deploy it to ' + homepagePath + '.');
+    console.log('For example, if you use GitHub Pages:');
+    console.log();
+    console.log('  git checkout -B gh-pages');
+    console.log('  git add -f build');
+    console.log('  git commit -am "Rebuild website"');
+    console.log('  git push origin :gh-pages');
+    console.log('  git subtree push --prefix build origin gh-pages');
+    console.log('  git checkout -');
+    console.log();
   } else {
-    console.log('You can now serve it with any static server, for example:');
+    console.log('You can now serve it with any static server.');
+    console.log('For example:');
+    console.log();
     console.log('  cd build');
     console.log('  npm install -g http-server');
     console.log('  hs');
     console.log('  ' + openCommand + ' http://localhost:8080');
+    console.log();
   }
-  console.log();
   console.log('The bundle is optimized and ready to be deployed to production.');
 });

scripts/init.js

@@ -69,13 +69,14 @@ module.exports = function(hostPath, appName, verbose) {
     }
 
     console.log('Success! Created ' + appName + ' at ' + hostPath + '.');
-    console.log();
     console.log('Inside that directory, you can run several commands:');
+    console.log();
     console.log('  * npm start: Starts the development server.');
     console.log('  * npm run build: Bundles the app into static files for production.');
     console.log('  * npm run eject: Removes this tool. If you do this, you can’t go back!');
     console.log();
     console.log('We suggest that you begin by typing:');
+    console.log();
     console.log('  cd', cdpath);
     console.log('  npm start');
     console.log();

template/README.md

@@ -219,7 +219,7 @@ Please be advised that this is also a custom feature of Webpack.
 
 **It is not required for React** but many people enjoy it (and React Native uses a similar mechanism for images). However it may not be portable to some other environments, such as Node.js and Browserify. If you prefer to reference static assets in a more traditional way outside the module system, please let us know [in this issue](https://github.com/facebookincubator/create-react-app/issues/28), and we will consider support for this.
 
-### Adding Flow
+### Add Flow
 
 Flow typing is currently [not supported out of the box](https://github.com/facebookincubator/create-react-app/issues/72) with the default `.flowconfig` generated by Flow. If you run it, you might get errors like this:
 
@@ -275,6 +275,32 @@ module.name_mapper='^\(.*\)\.\(jpg\|png\|gif\|eot\|svg\|ttf\|woff\|woff2\|mp4\|w
 
 We will consider integrating more tightly with Flow in the future so that you don’t have to do this.
 
+### Deploy to GitHub Pages
+
+First, open your `package.json` and add a `homepage` field.
+It could look like this:
+
+```js
+{
+  "name": "my-app",
+  "homepage": "http://myusername.github.io/my-app",
+  // ...
+}
+```
+
+Now, whenever you run `npm run build`, you will see a cheat sheet with a sequence of commands to deploy to GitHub pages:
+
+```sh
+git checkout -B gh-pages
+git add -f build
+git commit -am "Rebuild website"
+git push origin :gh-pages
+git subtree push --prefix build origin gh-pages
+git checkout -
+```
+
+You may copy and paste them, or put them into a custom shell script. You may also customize them for another hosting provider.
+
 ### Something Missing?
 
 If you have ideas for more “How To” recipes that should be on this page, [let us know](https://github.com/facebookincubator/create-react-app/issues) or [contribute some!](https://github.com/facebookincubator/create-react-app/edit/master/template/README.md)