使用 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 的文件夹。您放入该文件夹中的每个文件都将被复制到 public 文件夹中，将您的 CNAME 文件放入 static/ 文件夹中，它将被原封不动地复制到根目录或 public/ gatsby 版本上的文件夹，准备好被 gh-pages

复制到 GitHub 页

部署脚本看起来像这样

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

此外，您应该创建一个单独的分支"development"然后切换分支到master部署

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

Content Security Policy while deploying to github pages using Gatsby

javascript

github

github-pages

reactjs

gatsby