使用Gatsby部署到github页面时的内容安全策略

Question

所以我一直在尝试让我的Gatsby页面与Github页面一起使用，但是我仍然是React和Javascript的新手。

这是仓库（ https://github.com/alexing/alexing.github.io ）。

Firefox控制台抛出此404错误。

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

这是我的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"
  }
}

我已经安装了gh-pages，并且试图将www.alexingberg.com用作CNAME。 我想我已经在所有互联网上浏览了该问题，但没有找到我所得到的404的答案。

让我知道是否需要更多数据，我将其添加。 谢谢！

Answer 1

您可以在项目的根目录创建一个名为static的文件夹。 您放入该文件夹的每个文件都将被复制到公用文件夹中，并将您的CNAME文件放入static/文件夹中，并且将被原样复制到gatsby构建的根目录或public/文件夹中，并准备由gh-pages复制到GitHub Pages gh-pages

部署脚本将如下所示

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

另外，您应该创建一个单独的分支，例如“开发”，然后将分支切换到要部署的主分支。