免费资源部落

现今常见的博客搭建多依靠GitHub载体，但是归根结底不管用的什么配置，需要的就是把已经编译好的系统部署到GitHub上面，以Hexo上为例，这样可以帮助节省不少复杂的操作，自己要做仅仅是上传博客内容就OK了。

在push代码到GitHub上，还需要注意，新建一个io后缀的项目（注意每账号只可以有一个io项目），当每次把已经编译好的代码push到github上之后，github就会自动部署，再一次访问改地址，就得到一个博客项目了。

这样它会实现自动部署。

本次文章重点不是博客搭建的流程，而是通过这个项目来学习前端的一些技术：

利用create-react-app跑通项目

webpack的配置详解

nodejs的文件操作以及命令行操作

一些React本身的知识，比如生命周期，组件书写，路由等

数据管理中心，mobx/redux的使用

一些babel的配置与使用

初始化create-react-app

首先需要安装一下node环境，node本身带有npm工具，所以安装好node之后就可以是用npm命令了。个人习惯原因，我更喜欢是用yarn,这是个和npm一样的包管理工具，可以直接npm通过命令来安装yarn。

安装命令如下npm install -g yarn,-g标识全局安装，这样就可以在任何一个路径下面使用了。

好了，node和yarn就是前期要准备的安装环境了。

第一步，全局安装create-react-app

任何一个路径键入yarn global add create-react-app

第二步，创建本地的create-react-app

接下来，在一个你希望存储代码的文件夹下输入如下命令，他会自动帮你创建好程序。

create-react-app blog,然后在当前路径进入到，创建的文件夹，cd blog

第三步，初始化开发环境

首先安装依赖包，yanr install,然后create-react-app默认是把配置项给隐藏掉的，所以还要键入如下命令。yarn run eject然后他会问你yes or no,你输入y就好了。声明一下，这是个单项操作，eject之后就回不去了。

现在看一下开发的目录：

最后简单说明一下项目中的几个基本文件都是什么。

在crc目录下的是我们前端的代码；

package.json中则是我们依赖包的引入文件，在这里边添加的文件就是我们依赖包中的文件；

install命令就是下载依赖包；

node_modules是下载依赖报的存放地址；

public顾名思义就是存放的一些公共文件；

scripts中测试运行脚本，当我们执行yarn start命令的时候，就是执行start.js文件中的内容；

在了解了以上这些知识后是不是感觉代码也不至于叫人却步，当然在强调一次的是这仅仅是对前端的一个基础操作、代码的了解，如果真正涉及项目中去解决问题，还是需要很大的代码量，才可以应对。这部分内容除了帮助我们学习和了解前端代码、思想，以及帮我们搭建博客，对于前端开发的就不要多想了。