title: How to debug a 404 publishing node site to Github pages?
body: <p>I'm deploying a compiled node site based off React Slingshot boilerplate to Github Pages. Running locally is fine via npm start.</p>
  
  <p>But when I compile the files using babel and commit to my github pages repository. The site gives back a 404 for the <code>main.c5ec540e041525c6d312.js</code> file although I can see it is in the git repository. (companyname committed from link so these won't work below)</p>
  
  <p><strong>The link created from Github is:</strong></p>
  
  <p><a href="https://pages.github.mycompanyname.com/DDM/index.html" rel="nofollow noreferrer">https://pages.github.mycompanyname.com/DDM/index.html</a></p>
  
  <p><strong>And the 404 I get is:</strong></p>
  
  <p><a href="https://pages.github.mycompanyname.com/main.c5ec540e041525c6d312.js/" rel="nofollow noreferrer">https://pages.github.mycompanyname.com/main.c5ec540e041525c6d312.js/</a></p>
  
  <p>I did try deleting and re-adding the repo as suggested here to no avail:</p>
  
  <p><a href="https://stackoverflow.com/questions/11577147/how-to-fix-page-404-on-github-page">How to fix page 404 on Github Page?</a></p>
  
  <p><strong>Question:</strong>
  How can debug a 404 publishing node site to Github pages?</p>
  
  <p>This is the contents of the dist folder after babel compilation. Which I've then pushed to the Github Pages repo which builds the website automatically from the master branch. But gives a 404 on the main.js file:</p>
  
  <p><a href="https://i.stack.imgur.com/z3032.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/z3032.png" alt="enter image description here"></a></p>
  
  <p>I did try changing also the <code>browserHistory</code> to <code>hashHistory</code> in Index.js prior to compilation. As issues on github pages state that browserHistory uses absolute links whereas the latter does not:</p>
  
  <pre><code>import React from 'react';
  import ReactDom from 'react-dom';
  import Routes from './routes';
  import {Router, hashHistory} from 'react-router';
  import './styles/styles.scss';
  
  
  import appStore from './reducers';
  import { Provider } from 'react-redux';
  import { createStore } from 'redux';
  
  let store = createStore(appStore);
  
  require('./images/favicon.ico');
  let element = document.getElementById('app');
  
  ReactDom.render(
    &lt;Provider store={store}&gt;
          &lt;Router history={hashHistory} routes={Routes.routes} /&gt;
      &lt;/Provider&gt;, element);
  
  document.body.classList.remove('loading');
  </code></pre>
  
  <p>And this is a link to the compiled index.js file:</p>
  
  <p><a href="http://hastebin.com/sipimizazu.xml" rel="nofollow noreferrer">http://hastebin.com/sipimizazu.xml</a></p>
  
  <p>Also looking at the webpack pro config for compilation. I see that the public path is set to the following:</p>
  
  <pre><code>export default {
    resolve: {
      extensions: ['', '.js', '.jsx']
    },
    debug: true,
    devtool: 'source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
    noInfo: true, // set to false to see a list of every file being bundled.
    entry: path.resolve(__dirname, 'src/index'),
    target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test
    output: {
      path: path.resolve(__dirname, 'dist'),
      publicPath: '/',
      filename: '[name].[chunkhash].js'
    },
  </code></pre>