Github gh-pages Example (#3383)

* gh-page-exemple

* add babelrc for gh-page exemple

* Fix example (exemple in fr)

* example fix typo

* lint fix

examples/gh-pages/.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": [
+    "next/babel"
+  ],
+  "plugins": [
+    ["transform-define", "./env-config.js"]
+  ]
+}

examples/gh-pages/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.next

examples/gh-pages/README.md

@@ -0,0 +1,57 @@
+# gh-pages Hello World example
+
+## How to use
+
+### Download manually
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/gh-pages
+cd gh-pages
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+Deploy it to github
+
+Edit ```env-config.js``` and replace ```'Next-gh-page-example'``` by your project name.
+
+Edit ```next.config.js``` and replace ```'Next-gh-page-example'``` by your project name.
+
+1. Create repository.
+2. Link it to your github account.
+3. Publish your master branch.
+
+```bash
+npm run deploy
+```
+
+Test it:
+
+Reaplce 'github-user-name' and 'github-projet-name'
+
+```bash
+
+https://github-user-name.github.io/github-projet-name/
+
+```
+
+Example:
+
+```bash
+
+https://github.com/thierryc/Next-gh-page-example/
+
+https://thierryc.github.io/Next-gh-page-example/
+
+```
+
+## The idea behind the example
+
+This example shows the most basic idea behind Next. We have 2 pages: `pages/index.js` and `pages/about.js`. The former responds to `/` requests and the latter to `/about`. Using `next/link` you can add hyperlinks between them with universal routing capabilities.

examples/gh-pages/env-config.js

@@ -0,0 +1,5 @@
+const prod = process.env.NODE_ENV === 'production'
+
+module.exports = {
+  'process.env.BACKEND_URL': prod ? '/Next-gh-page-example' : ''
+}

examples/gh-pages/next.config.js

@@ -0,0 +1,15 @@
+// This file is not going through babel transformation.
+// So, we write it in vanilla JS
+// (But you could use ES2015 features supported by your Node.js version)
+
+const debug = process.env.NODE_ENV !== 'production'
+
+module.exports = {
+  exportPathMap: function () {
+    return {
+      '/': { page: '/' },
+      '/about': { page: '/about' }
+    }
+  },
+  assetPrefix: !debug ? '/Next-gh-page-example/' : ''
+}

examples/gh-pages/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "gh-pages",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start",
+    "export": "next export",
+    "deploy": "rm -rf node_modules/.cache && next build && next export && touch out/.nojekyll && git add out/ && git commit -m \"Deploy Next.js to gh-pages\" && git subtree push --prefix out origin gh-pages"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
+  },
+  "license": "ISC",
+  "devDependencies": {
+    "babel-plugin-transform-define": "^1.3.0"
+  }
+}

examples/gh-pages/pages/about.js

@@ -0,0 +1,7 @@
+import Link from 'next/link'
+export default () => (
+  <div>
+    <div>About us</div>
+    <div>Back to <Link href='/' as={process.env.BACKEND_URL + '/'}><a>Home</a></Link></div>
+  </div>
+)

examples/gh-pages/pages/index.js

@@ -0,0 +1,4 @@
+import Link from 'next/link'
+export default () => (
+  <div>Hello World. <Link href='/about' as={process.env.BACKEND_URL + '/about'}><a>About</a></Link></div>
+)