├── public
    └── robots.txt
├── .babelrc
├── .eslintrc.js
├── src
    ├── logo.png
    ├── containers
    │   ├── 404.js
    │   ├── About.js
    │   ├── Post.js
    │   ├── Home.js
    │   └── Blog.js
    ├── index.js
    ├── App.js
    └── app.css
├── .history
    ├── src
    │   ├── pages
    │   │   ├── 404_20180627193755.js
    │   │   └── 404_20180817143646.js
    │   ├── App_20180711113921.js
    │   ├── App_20180817143015.js
    │   └── App_20180817143024.js
    ├── static.config_20180716142926.js
    └── static.config_20180817143601.js
├── .gitignore
├── README.md
├── package.json
└── static.config.js


/public/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "react-static/.babelrc"
3 | }
4 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   extends: 'react-tools',
3 | }
4 | 


--------------------------------------------------------------------------------
/src/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ninaolo/react-static-github-pages-example/HEAD/src/logo.png


--------------------------------------------------------------------------------
/src/containers/404.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | //
3 | 
4 | export default () => (
5 |   <div>
6 |     <h1>404 - Oh no's! We couldn't find that page :(</h1>
7 |   </div>
8 | )
9 | 


--------------------------------------------------------------------------------
/.history/src/pages/404_20180627193755.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | //
3 | 
4 | export default () => (
5 |   <div>
6 |     <h1>404 - Oh no's! We couldn't find that page :(</h1>
7 |   </div>
8 | )
9 | 


--------------------------------------------------------------------------------
/src/containers/About.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from 'react'
 3 | //
 4 | 
 5 | export default () => (
 6 |   <div>
 7 |     <h1>This is what we're all about.</h1>
 8 |     <p>React, static sites, performance, speed. It's the stuff that makes us tick.</p>
 9 |   </div>
10 | )
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # dependencies
 2 | /node_modules
 3 | 
 4 | # testing
 5 | /coverage
 6 | 
 7 | # production
 8 | /dist
 9 | /tmp
10 | 
11 | # misc
12 | .DS_Store
13 | .env.local
14 | .env.development.local
15 | .env.test.local
16 | .env.production.local
17 | 
18 | npm-debug.log*
19 | yarn-debug.log*
20 | yarn-error.log*


--------------------------------------------------------------------------------
/src/containers/Post.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { withRouteData, Link } from 'react-static'
 3 | //
 4 | 
 5 | export default withRouteData(({ post }) => (
 6 |   <div>
 7 |     <Link to="/blog/">{'<'} Back</Link>
 8 |     <br />
 9 |     <h3>{post.title}</h3>
10 |     <p>{post.body}</p>
11 |   </div>
12 | ))
13 | 


--------------------------------------------------------------------------------
/.history/src/pages/404_20180817143646.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { withRouteData } from 'react-static'
 3 | //
 4 | 
 5 | export default withRouteData(
 6 |   props =>
 7 |     console.log(props) || (
 8 |       <div>
 9 |         <h1>404 - Oh no's! We couldn't find that page :(</h1>
10 |       </div>
11 |     )
12 | )
13 | 


--------------------------------------------------------------------------------
/src/containers/Home.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { withSiteData } from 'react-static'
 3 | //
 4 | import logoImg from '../logo.png'
 5 | 
 6 | export default withSiteData(() => (
 7 |   <div>
 8 |     <h1 style={{ textAlign: 'center' }}>Welcome to</h1>
 9 |     <img src={logoImg} alt="" style={{ display: 'block', margin: '0 auto' }} />
10 |   </div>
11 | ))
12 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React-Static Github Pages Example
2 | 
3 | This repository shows an example of a basic [react-static](https://github.com/nozzle/react-static) boilerplate application deployed to [Github pages](https://pages.github.com/).
4 | 
5 | The site is available at: [https://ninaolo.github.io/react-static-github-pages-example](https://ninaolo.github.io/react-static-github-pages-example).
6 | 


--------------------------------------------------------------------------------
/src/containers/Blog.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from 'react'
 3 | import { withRouteData, Link } from 'react-static'
 4 | //
 5 | 
 6 | export default withRouteData(({ posts }) => (
 7 |   <div>
 8 |     <h1>It's blog time.</h1>
 9 |     <br />
10 |     All Posts:
11 |     <ul>
12 |       {posts.map(post => (
13 |         <li key={post.id}>
14 |           <Link to={`/blog/post/${post.id}/`}>{post.title}</Link>
15 |         </li>
16 |       ))}
17 |     </ul>
18 |   </div>
19 | ))
20 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | 
 4 | // Your top level component
 5 | import App from './App'
 6 | 
 7 | // Export your top level component as JSX (for static rendering)
 8 | export default App
 9 | 
10 | // Render your app
11 | if (typeof document !== 'undefined') {
12 |   const renderMethod = module.hot ? ReactDOM.render : ReactDOM.hydrate || ReactDOM.render
13 |   const render = Comp => {
14 |     renderMethod(<Comp />, document.getElementById('root'))
15 |   }
16 | 
17 |   // Render!
18 |   render(App)
19 | }
20 | 


--------------------------------------------------------------------------------
/.history/src/App_20180711113921.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Router, Link } from 'react-static'
 3 | //
 4 | import Routes from 'react-static-routes'
 5 | 
 6 | import './app.css'
 7 | 
 8 | const App = () => (
 9 |   <Router>
10 |     <div>
11 |       <nav>
12 |         <Link exact to="/">
13 |           Home
14 |         </Link>
15 |         <Link to="/about">About</Link>
16 |         <Link to="/blog">Blog</Link>
17 |       </nav>
18 |       <div className="content">
19 |         <Routes />
20 |       </div>
21 |     </div>
22 |   </Router>
23 | )
24 | 
25 | export default App
26 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Router, Link } from 'react-static'
 3 | import { hot } from 'react-hot-loader'
 4 | //
 5 | import Routes from 'react-static-routes'
 6 | 
 7 | import './app.css'
 8 | 
 9 | const App = () => (
10 |   <Router>
11 |     <div>
12 |       <nav>
13 |         <Link exact to="/">Home</Link>
14 |         <Link to="/about">About</Link>
15 |         <Link to="/blog">Blog</Link>
16 |       </nav>
17 |       <div className="content">
18 |         <Routes />
19 |       </div>
20 |     </div>
21 |   </Router>
22 | )
23 | 
24 | export default hot(module)(App)
25 | 


--------------------------------------------------------------------------------
/src/app.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial,
 3 |     'Lucida Grande', sans-serif;
 4 |   font-weight: 300;
 5 |   font-size: 16px;
 6 |   margin: 0;
 7 |   padding: 0;
 8 | }
 9 | 
10 | a {
11 |   text-decoration: none;
12 |   color: #108db8;
13 |   font-weight: bold;
14 | }
15 | 
16 | img {
17 |   max-width: 100%;
18 | }
19 | 
20 | nav {
21 |   width: 100%;
22 |   background: #108db8;
23 | }
24 | 
25 | nav a {
26 |   color: white;
27 |   padding: 1rem;
28 |   display: inline-block;
29 | }
30 | 
31 | .content {
32 |   padding: 1rem;
33 | }
34 | 


--------------------------------------------------------------------------------
/.history/src/App_20180817143015.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Router, Link } from 'react-static'
 3 | //
 4 | import Routes from 'react-static-routes'
 5 | 
 6 | import './app.css'
 7 | 
 8 | const App = () => (
 9 |   <Router>
10 |     <div>
11 |       <nav>
12 |         <Link exact to="/">
13 |           Home
14 |         </Link>
15 |         <Link to="/about">About</Link>
16 |         <Link to="/blog">Blog</Link>
17 |         <Link to="/blog">Blog</Link>
18 |       </nav>
19 |       <div className="content">
20 |         <Routes />
21 |       </div>
22 |     </div>
23 |   </Router>
24 | )
25 | 
26 | export default App
27 | 


--------------------------------------------------------------------------------
/.history/src/App_20180817143024.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Router, Link } from 'react-static'
 3 | //
 4 | import Routes from 'react-static-routes'
 5 | 
 6 | import './app.css'
 7 | 
 8 | const App = () => (
 9 |   <Router>
10 |     <div>
11 |       <nav>
12 |         <Link exact to="/">
13 |           Home
14 |         </Link>
15 |         <Link to="/about">About</Link>
16 |         <Link to="/blog">Blog</Link>
17 |         <Link to="/fake">Fake</Link>
18 |       </nav>
19 |       <div className="content">
20 |         <Routes />
21 |       </div>
22 |     </div>
23 |   </Router>
24 | )
25 | 
26 | export default App
27 | 


--------------------------------------------------------------------------------
/.history/static.config_20180716142926.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | 
 3 | export default {
 4 |   getSiteData: () => ({
 5 |     title: 'React Static',
 6 |   }),
 7 |   getRoutes: async () => {
 8 |     const { data: posts } = await axios.get('https://jsonplaceholder.typicode.com/posts')
 9 |     return [
10 |       {
11 |         path: '/blog',
12 |         getData: () => ({
13 |           posts,
14 |         }),
15 |         children: posts.map(post => ({
16 |           path: `/post/${post.id}`,
17 |           component: 'src/containers/Post',
18 |           getData: () => ({
19 |             post,
20 |           }),
21 |         })),
22 |       },
23 |     ]
24 |   },
25 | }
26 | 


--------------------------------------------------------------------------------
/.history/static.config_20180817143601.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | 
 3 | export default {
 4 |   getSiteData: () => ({
 5 |     title: 'React Static',
 6 |   }),
 7 |   getRoutes: async () => {
 8 |     const { data: posts } = await axios.get(
 9 |       'https://jsonplaceholder.typicode.com/posts'
10 |     )
11 |     return [
12 |       {
13 |         path: '/blog',
14 |         getData: () => ({
15 |           posts,
16 |         }),
17 |         children: posts.map(post => ({
18 |           path: `/post/${post.id}`,
19 |           component: 'src/containers/Post',
20 |           getData: () => ({
21 |             post,
22 |           }),
23 |         })),
24 |       },
25 |       {
26 |         path: '404',
27 |         getData: () => ({
28 |           posts,
29 |         }),
30 |       },
31 |     ]
32 |   },
33 | }
34 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-static-example-basic",
 3 |   "version": "1.0.1",
 4 |   "main": "index.js",
 5 |   "license": "MIT",
 6 |   "scripts": {
 7 |     "start": "react-static start",
 8 |     "stage": "react-static build --staging",
 9 |     "build": "react-static build",
10 |     "bundle": "react-static bundle",
11 |     "export": "react-static export",
12 |     "serve": "serve dist -p 3000",
13 |     "predeploy": "npm run build",
14 |     "deploy": "gh-pages -d dist"
15 |   },
16 |   "dependencies": {
17 |     "axios": "^0.16.2",
18 |     "react": "^16.0.0",
19 |     "react-dom": "^16.0.0",
20 |     "react-hot-loader": "^4.0.0-beta.21",
21 |     "react-router": "^4.2.0",
22 |     "react-static": "^5"
23 |   },
24 |   "devDependencies": {
25 |     "eslint-config-react-tools": "1.x.x",
26 |     "gh-pages": "^2.0.0",
27 |     "serve": "^6.1.0"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/static.config.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | 
 3 | export default {
 4 |   siteRoot: "https://ninaolo.github.io",
 5 |   basePath: "react-static-github-pages-example",
 6 |   getSiteData: () => ({
 7 |     title: 'React Static + Github Pages Example',
 8 |   }),
 9 |   getRoutes: async () => {
10 |     const { data: posts } = await axios.get('https://jsonplaceholder.typicode.com/posts')
11 |     return [
12 |       {
13 |         path: '/',
14 |         component: 'src/containers/Home',
15 |       },
16 |       {
17 |         path: '/about',
18 |         component: 'src/containers/About',
19 |       },
20 |       {
21 |         path: '/blog',
22 |         component: 'src/containers/Blog',
23 |         getData: () => ({
24 |           posts,
25 |         }),
26 |         children: posts.map(post => ({
27 |           path: `/post/${post.id}`,
28 |           component: 'src/containers/Post',
29 |           getData: () => ({
30 |             post,
31 |           }),
32 |         })),
33 |       },
34 |       {
35 |         is404: true,
36 |         component: 'src/containers/404',
37 |       },
38 |     ]
39 |   },
40 | }
41 | 


--------------------------------------------------------------------------------