Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update instructions on publishing to GitHub pages #841

Merged
merged 2 commits into from
Oct 4, 2016
Merged

Update instructions on publishing to GitHub pages #841

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
02d5456
Update instructions on publishing to GitHub pages
Janpot Oct 4, 2016
ea891f7
Update README formatting
Janpot Oct 4, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 13 additions & 7 deletions packages/react-scripts/scripts/build.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
26 changes: 16 additions & 10 deletions packages/react-scripts/template/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -885,19 +885,25 @@ 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:

```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 -
```
To publish it at http://myname.github.io/myapp, run:
Copy link
Contributor

@fson fson Oct 4, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The homepage field in package.json instructions a few lines above uses http://myusername.github.io/my-app as an example, let's use the same URL here.


npm install --save-dev gh-pages

You may copy and paste them, or put them into a custom shell script. You may also customize them for another hosting provider.
Add the following script in your package.json.

// ...
"scripts": {
// ...
"deploy": "gh-pages -d build"
}

Then run:

npm run deploy
```
Copy link
Contributor

@fson fson Oct 4, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we only put the script and deployment command inside a code block? Now it looks a bit weird.

I mean like this (also changed the URL to http://myusername.github.io/my-app here):

To publish it at http://myusername.github.io/my-app, run:

npm install --save-dev gh-pages

Add the following script in your package.json:

 // ...
 "scripts": {
   // ...
   "deploy": "gh-pages -d build"
 }

Then run:

npm run deploy

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 Done


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.
Expand Down