Content Security Policy while deploying to github pages using Gatsby

Question

So I've been trying to make my Gatsby page work with Github pages, but i'm still a newby in React and Javascript.

This is the repo ( https://github.com/alexing/alexing.github.io ).

Firefox console is throwing this 404 error.

Refused to load the image 'http://www.alexingberg.com/favicon.ico' because it violates the following Content Security Policy directive: "img-src data:".

This is my package.json

{
  "name": "alexing.github.io",
  "description": "alexingberg.com",
  "repository": {
    "type": "git",
    "url": "https://github.com/alexing/alexing.github.io"
  },
  "homepage": "https://alexing.github.io",
  "license": "MIT",
  "scripts": {
    "develop": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve",
    "deploy": "gatsby build && gh-pages -b master -d public",
    "deploy:github": "npm run build && node ./scripts/deploy-github"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.12",
    "flexboxgrid": "^6.3.1",
    "font-awesome": "^4.7.0",
    "gatsby": "^1.9.279",
    "gatsby-link": "^1.6.39",
    "gatsby-plugin-google-analytics": "^1.0.24",
    "gatsby-plugin-google-fonts": "0.0.4",
    "gatsby-plugin-sass": "^1.0.23",
    "gh-pages": "^2.0.1",
    "include-media": "^1.4.9",
    "milligram-scss": "^1.3.0",
    "node-sass": "^4.11.0",
    "react-helmet": "^5.2.0"
  },
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^5.6.3"
  }
}

I've already installed gh-pages and I'm trying to use www.alexingberg.com as a CNAME. I think I've already browsed all the internet for the problem but didn't found an answer for that 404 I'm getting.

Let me know if you need more data, I'll add it. Thanks!

Answer 1

You can create a folder named static at the root of your project. Every file you put into that folder will be copied into the public folder put your CNAME file in the static/ folder and it will be copied untouched at the root or the public/ folder on gatsby build, ready to be copied to GitHub Pages by gh-pages

The deploy script will look something like this

 "deploy": "gatsby build && cp ./static/CNAME public/ &&gh-pages -d public --branch master"

Also, you should make a separate branch Eg "development" then switch branches to the master to deploy.