前端说React.js每天写1000字

React入门神器—Gatsby+Github搭建属于自己的Re

2017-06-07  本文已影响902人  nightZing

导言:Gatsby是一个React.js架构的静态站点生成器,可以让你体验React的所有优点。Gatsby有一个预先配置好的Webpack,使用它入门React会省下很多麻烦,此外Gatsby会根据你的目录结构自动生成路由。所有的HTML都会在服务器端渲染,弥补了客户端渲染的不足。

写此博文的原因是用中文引擎搜索Gatsby教程非常之少,而gatsby官方文档是全英文的并且写的比较分散,最终也是费了九牛二虎之力通过翻墙查阅英文博客等各种方式才成功搭建好Gatsby网站,所以想写一篇中文博客教程分享出来,希望能帮助到大家更便捷的搭建Gatsby网站。

一、下载安装Git

1.git下载地址

2.安装步骤

主要是注意这步,选第二个,其他默认选择就好

二、下载安装node.js

1.node.js下载地址

2.node.js各系统完全安装与配置教程

三、安装Gatsby

1、注意要在Git Bash里执行安装命令,在电脑桌面点击鼠标右键,选择Git Bash

2、执行命令 npm install -g gatsby ,全局安装gatsby,如果npm被墙,可参考NPM 国内被墙的解决方法

四、构建Gatsby网站

1、在Git Bash中进入到你要存放Gatsby网站的目录,执行命令  gatsby new gatsby-site,gatsby-site是项目的名称,这里你可自定义,如我的就是安装在D盘的react目录下,项目名称为gatsby-react

2、一般来说使用Gatsby构建网站一开始会选择一个主题模板(类似于hexo的主题模板),可在gatsby官方文档的Gatsby Starters里寻找你喜欢的模板,如果选择模板的话那么第一步的命令就会变成gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-blog,后面新加的部分就是模板地址(这里使用的是默认模板)

3、构建完毕后执行 cd gatsby-site(你的项目名),最后执行 gatsby develop部署项目,在浏览器中打开localhost:8000,如果页面能打开那么恭喜你,.Gatsby网站构建成功!

上一篇 下一篇

猜你喜欢

热点阅读