Content Security Policy While Deploying To Github Pages Using Gatsby
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
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 E.g. "development" then switch branches to the master to deploy.
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM