正文

从零开始，轻松学会用GitHub Pages和Netlify部署React简单项目

/0 浏览量
0804

在当今快速发展的互联网时代，学会如何将自己的React项目部署到线上，是每一位前端开发者必备的技能。GitHub Pages和Netlify是两个非常流行的静态站点托管服务，它们可以帮助你轻松地将React项目部署到互联网上。本文将手把手教你从零开始，使用GitHub Pages和Netlify部署一个简单的React项目。

准备工作

在开始之前，请确保你已经安装了以下工具：

  1. Node.js和npm：React项目需要Node.js和npm环境，你可以从官网下载并安装。

  2. React环境：可以使用create-react-app脚手架工具快速搭建React项目，你可以通过以下命令安装：

    npx create-react-app my-react-app

  3. GitHub账号：注册一个GitHub账号，用于托管你的React项目代码。

  4. Netlify账号：注册一个Netlify账号，用于部署你的React项目。

使用GitHub Pages部署

1. 初始化项目

首先，进入你的React项目目录，并初始化项目：

cd my-react-app
npm install

2. 添加GitHub Pages分支

在项目根目录下，创建一个名为.github的文件夹，并在该文件夹中创建一个名为docs的子文件夹。然后，在.github文件夹中创建一个名为README.md的文件，并添加以下内容：

---
home: true
heroImage: /logo.png
actionText: 快速上手 →
actionLink: /quickstart/
features:
- title: 简洁至上
  details: 以Markdown为中心的项目结构，方便快速上手。
- title: Vue驱动
  details: 享受 Vue + Element 的开发体验，配置简单。
- title: 开箱即用
  details: 丰富的组件供你使用，挥洒你的创意。
footer: 联系我
  contact:
    weibo: false
    email: false
    github: false
---

3. 提交代码到GitHub

将.github文件夹和README.md文件提交到你的GitHub仓库：

git add .
git commit -m "添加GitHub Pages配置"
git push origin main

4. 访问GitHub Pages

在浏览器中输入以下链接，即可访问你的React项目：

https://<你的GitHub用户名>.github.io/my-react-app

使用Netlify部署

1. 创建Netlify项目

在Netlify官网（https://www.netlify.com/）注册并登录账号，然后点击“新建站点”按钮，选择“从源代码仓库”选项。

2. 配置源代码仓库

选择你的GitHub仓库，并授权Netlify访问你的GitHub账号。

3. 配置构建命令

在Netlify配置页面中，找到“环境变量”部分，添加以下环境变量：

  • BUILD_COMMAND：npm run build
  • DEPLOY_COMMAND：npm install && npm run build

4. 部署项目

Netlify会自动为你构建项目，并在构建完成后将项目部署到线上。你可以通过以下链接访问你的React项目：

https://<你的项目名称>.netlify.app

总结

通过本文，你学会了如何从零开始，使用GitHub Pages和Netlify部署一个简单的React项目。这些工具可以帮助你轻松地将项目部署到线上，让你更好地展示自己的作品。希望本文对你有所帮助！

-- 展开阅读全文 --