React | 从头打造个人网站（超详细）

哈喽🤗，这篇博客从0开始教大家创建自己的网站，包含个人网站，商用网站等，并且提供模板类型，提供修改模块样本~

看完本博客你将会收获：

• 一个想要的类型网站
• 学习React
• 解答过程中遇到的问题

最终效果

那就开始吧👩‍💻👨‍💻

**************************************************************************************************************

目         录

**************************************************************************************************************

目录

1：环境搭建

1.1.下载相关软件

1.1.1.下载安装 vscode

1.1.2.下载安装 node.js

1.2.环境配置

2.项目/网站搭建

2.1.开始做第一个项目

2.2.项目更新文件

3.React安装组件(Components)

3.1.引入Ant-Design组件库

3.1.1.安装依赖

4.将设计好的网站配置到Github网站（免费）

5.将设计好的网站配置到自己的网站（收费） 

6.新建一个作品集到github

💦过程中遇到的错误和解决（PS）

【PS1】 ! Error: EPERM: operation not permitted无权限emo

【PS2】设置部署到GitHub页时，` `npm部署`缺少脚本错误

【PS3】'npm' 不是内部或外部命令，也不是可运行的程序或批处理文件。

【PS4】Reinitialized existing Git repository in C:/Users/****/my-app/.git/

【PS5】npm start 出错Could not find a required file. Name: index.js Searched 

【PS6】fatal: unable to access 'https://github.com/insanena/insanena.github.io.git/': The requested URL returned error: 403

🦄其他命令详解

参考文献

---

---

1：环境搭建

本文主要使用React框架，快速建立自己的网站，可以作为作品集及公益展示页面，后续可根据自己的想法添加别的功能。

1.1.下载相关软件

1.1.1.下载安装 vscode

使用IDE是VSCode,用来编写本地程序。下载VScode
下载地址：https://code.visualstudio.com/

1.1.2.下载安装 node.js

Node.js 是一套 JavaScript 运行环境，用来支持 JavaScript 代码的执行。
下载地址：http://nodejs.cn/download/ 

安装方法如下：

 

 

 

 

 

 

按下快捷键 
输入cmd，打开终端，验证node与npm是否安装成功

node -v
npm -v

 结果

  --成功显示版本说明安装成功

1.2.环境配置

Step 1：创建一个本地文件夹，用于存放项目

Step 2：找到nodejs安装的目录，在安装目录下新建两个文件夹【node_global】和【node_cache】

Step 3:创建完毕后，使用管理员身份打开cmd命令窗口，

(快捷键Win+R，输入cmd，然后按下快捷键Shift+Ctrl+Enter)

 ①npm config set prefix “你的路径\node_global” （复制你刚刚创建的“node_global”文件夹路径）
 ②npm config set cache “你的路径\node_cache”  （复制你刚刚创建的“node_cache”文件夹路径）

npm config set prefix "D:\software\nodejs\node_global"
npm config set cache "D:\software\nodejs\node_cache"

Step 4 :配置环境变量

   ①【此电脑】-单击右键-【属性】-【高级系统设置】-【环境变量】

新建一个node的路径

变量名：NODE_PATH

变量值：D:\software\nodejs\node_global\node_modules

 注意：变量值要换成自己的新建的node_modules路径，结果如下图👇

 ③编辑【用户变量】中的【Path】

删掉原本npm路径

 改为新建路径

 

 

*注意：环境配置很重要

 配置完成后，全局安装一个最常用的 express 模块进行测试

npm install express -g   // -g代表全局安装

 如果出错，请参考【PS1】

出现以上画面，就代表环境设置成功👍👍👍