Gatsby-Tutorials-All-In-One

cnblogs 迁移项目

https://cnblogs.xgqfrms.xyz/

CLI

# create `static-website`
$ npm init gatsby
# 1. 交互式, 问答确认, ts & project-name

# 使用 `&&` 串行执行多个 Linux Shell 命令
$ cd static-website && gatsby develop

$ gatsby build

$ gatsby serve

CLI flags

# ts version
$ npm init gatsby -y -ts my-site-name
# 2. 命令式, -y 无需交互问答确认, 直接指定 ts & project-name

https://github.com/gatsbyjs/gatsby-starter-minimal

https://github.com/gatsbyjs/gatsby-starter-minimal-ts

demos

1. /static/CNAME ✅
2. custom domain

https://gatsby-react-app.xgqfrms.xyz/

https://abc.xgqfrms.xyz/gatsby-react-app/

CI/CD 自动化构建部署流程

1. 手动复制 readme 到 static 文件夹

2. gatsby build 会自动把 static 文件夹下的文件复制到 构建出来的 public 文件下

3. 所以 Action 只要指定 CI/CD 发布部署的根目录 folder 为 public 即可

  "scripts": {
    "copy": "cp ./README.md ./static/",
    "deploy": "npm run copy && gatsby build",
  },

# ...
      - name: Deploy to gh-pages 🚀
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          folder: public
          # The folder the action should deploy.
          token: ${{ secrets.ACCESS_TOKEN }}

deploy-gh-pages.yml

refs

https://www.gatsbyjs.com/docs/

https://www.gatsbyjs.com/docs/tutorial/