Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Commit feb6036

Browse filesBrowse files
Janpotfson
authored andcommitted
Update instructions on publishing to GitHub pages (facebook#841)
* Update instructions on publishing to GitHub pages * Update README formatting
1 parent 4feff2a commit feb6036
Copy full SHA for feb6036

File tree

2 files changed

+32
-16
lines changed
Filter options

2 files changed

+32
-16
lines changed

‎packages/react-scripts/scripts/build.js

Copy file name to clipboardExpand all lines: packages/react-scripts/scripts/build.js
+13-7Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -147,13 +147,19 @@ function build(previousSizeMap) {
147147
console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
148148
console.log('To publish it at ' + chalk.green(homepagePath) + ', run:');
149149
console.log();
150-
console.log(' ' + chalk.cyan('git') + ' commit -am ' + chalk.yellow('"Save local changes"'));
151-
console.log(' ' + chalk.cyan('git') + ' checkout -B gh-pages');
152-
console.log(' ' + chalk.cyan('git') + ' add -f build');
153-
console.log(' ' + chalk.cyan('git') + ' commit -am ' + chalk.yellow('"Rebuild website"'));
154-
console.log(' ' + chalk.cyan('git') + ' filter-branch -f --prune-empty --subdirectory-filter build');
155-
console.log(' ' + chalk.cyan('git') + ' push -f origin gh-pages');
156-
console.log(' ' + chalk.cyan('git') + ' checkout -');
150+
console.log(' ' + chalk.cyan('npm') + ' install --save-dev gh-pages');
151+
console.log();
152+
console.log('Add the following script in your ' + chalk.cyan('package.json') + '.');
153+
console.log();
154+
console.log(' ' + chalk.dim('// ...'));
155+
console.log(' ' + chalk.yellow('"scripts"') + ': {');
156+
console.log(' ' + chalk.dim('// ...'));
157+
console.log(' ' + chalk.yellow('"deploy"') + ': ' + chalk.yellow('"gh-pages -d build"'));
158+
console.log(' }');
159+
console.log();
160+
console.log('Then run:');
161+
console.log();
162+
console.log(' ' + chalk.cyan('npm') + ' run deploy');
157163
console.log();
158164
} else if (publicPath !== '/') {
159165
// "homepage": "http://mywebsite.com/project"

‎packages/react-scripts/template/README.md

Copy file name to clipboardExpand all lines: packages/react-scripts/template/README.md
+19-9Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -885,19 +885,29 @@ Open your `package.json` and add a `homepage` field:
885885
**The above step is important!**<br>
886886
Create React App uses the `homepage` field to determine the root URL in the built HTML file.
887887
888-
Now, whenever you run `npm run build`, you will see a cheat sheet with a sequence of commands to deploy to GitHub pages:
888+
Now, whenever you run `npm run build`, you will see a cheat sheet with instructions on how to deploy to GitHub pages:
889+
890+
To publish it at [http://myusername.github.io/my-app](http://myusername.github.io/my-app), run:
889891
890892
```sh
891-
git commit -am "Save local changes"
892-
git checkout -B gh-pages
893-
git add -f build
894-
git commit -am "Rebuild website"
895-
git filter-branch -f --prune-empty --subdirectory-filter build
896-
git push -f origin gh-pages
897-
git checkout -
893+
npm install --save-dev gh-pages
894+
```
895+
896+
Add the following script in your `package.json`:
897+
898+
```js
899+
// ...
900+
"scripts": {
901+
// ...
902+
"deploy": "gh-pages -d build"
903+
}
898904
```
899905
900-
You may copy and paste them, or put them into a custom shell script. You may also customize them for another hosting provider.
906+
Then run:
907+
908+
```sh
909+
npm run deploy
910+
```
901911
902912
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:
903913
* 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.

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.