kylefang/create-react-app
1
0
Fork 0
mirror of https://github.com/zhigang1992/create-react-app.git synced 2026-04-01 12:42:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update instructions on publishing to GitHub pages (#841)

Browse Source 
* Update instructions on publishing to GitHub pages

* Update README formatting
This commit is contained in:
Jan Potoms
2016-10-04 14:34:41 +02:00
committed by Ville Immonen
parent 4feff2acf7
commit feb6036fb2
2 changed files with 32 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/react-scripts/scripts/build.js vendored
View File

@@ -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"

28
packages/react-scripts/template/README.md
View File

@@ -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
```
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`:
```js
// ...
"scripts": {
// ...
"deploy": "gh-pages -d build"
}
```
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.