将 React 应用部署到GitHub Pages,15分钟免费搞定专属域名博客部署

#1

将 React 应用部署到GitHub Pages,15分钟免费搞定专属域名博客部署(标题党了:space_invader:

源码地址:https://github.com/niexq/react-gh-pages 欢迎star

react-gh-pages

步骤

前提:本地已安装nodejs,已有github账户

1.在GitHub上创建一个空的repository

  • 输入自定义的Repository name

  • 其他为空,不用初始化README.md,.gitignore,license,保持repository干净无文件

2.使用create-react-app创建新的React应用


// npx

npx create-react-app react-gh-pages

// or npm

npm init react-app react-gh-pages

// or yarn

yarn create react-app react-gh-pages

3.重要,添加homepage到package.json

打开项目,然后为项目package.json添加一个homepage字段:


"homepage": "https://myusername.github.io/react-gh-pages",

// 或GitHub用户页面

"homepage": "https://myusername.github.io",

// 或自定义域页面:

"homepage": "https://mywebsite.com",

Create React App使用该homepage字段来确定所构建的HTML文件中的根URL。

4.重要,安装gh-pages并添加deploy到package.json的scripts中

进入项目,安装gh-pages


cd react-gh-pages

npm install gh-pages --save-dev

添加以下deploy脚本到项目的package.json中:


"scripts": {

+ "predeploy": "npm run build",

+ "deploy": "gh-pages -d build",

"start": "react-scripts start",

"build": "react-scripts build",

该predeploy脚本将自动运行在deploy运行之前。

(可忽略)如果要部署到GitHub用户页面而不是项目页面,则需要进行其他修改:

调整package.json脚本以将部署推送到master:


"scripts": {

"predeploy": "npm run build",

- "deploy": "gh-pages -d build",

+ "deploy": "gh-pages -b master -d build",

5.重要,将GitHub存储库添加为本地git存储库中的remote


git remote add origin https://github.com/myusername/react-gh-pages.git

6.重要,通过运行npm run deploy部署到GitHub Pages


npm run deploy

7.对于项目页面,请确保项目设置使用gh-pages

确保将GitHub项目设置中的GitHub Pages选项设置为使用gh-pages分支:
gh-pages-settings

gh-pages-settings

8.可选配置域

可以通过新增CNAME文件到public/目录来使用GitHub Pages配置自定义域。

CNAME文件应如下所示:


mywebsite.com

9.可选,将本地源代码提交推送到GitHub的master分支


git add .

git commit -m "feat: Create a React app and publish it to GitHub Pages"

git push origin master

10.可选,故障排除

  • 如果在部署时遇到/dev/tty: No such a device or address错误或类似错误,请尝试以下操作:

    • 创建一个新的个人访问令牌

    • git remote set-url origin https://<user>:<token>@github.com/<user>/<repo>

    • 再运行npm run deploy

  • 如果在部署时获得Cannot read property 'email' of null,请尝试以下操作:

    • git config --global user.name '<your_name>'

    • git config --global user.email '<your_email>'

    • 再运行npm run deploy

  • 如果在部署时获得fatal: A branch named ‘gh-pages’ already exists.,请尝试以下操作:

    • 命令行或手动删除node_modules/.cache/gh-pages
    • 再运行npm run deploy
rm -rf node_modules/.cache/gh-pages
npm run deploy

最后

如果操作了第7步配置了自定义域名域名,可访问:https://mywebsite.com/react-gh-pages

如未配置域名,访问:https://myusername.github.io/react-gh-pages

也可通过GitHub-settings-GitHub Pages查看:

website