注意:Gatsby V2版本安装及使用问题请移步《Gastby V2安装过程中常见问题》,此文较旧,主要针对V1版Gatsby而介绍

前言

一直以来都是用之前比较流行的静态网站生成器Hexo加Markdown来更新自己的静态站博客。偶然的机会,遇到了又一静态网站生成神器Gatsby ,直接迷上了,根本停不下来,原来静态网站还可以用react来写,组件化的思想解放了我们对静态网站的想象空间,让我们更新网站的方式直接上了一个档次。

费话不多说,先上一张用Gatsby制作的静态网站的效果图,点我查看在线效果

关于Gatsby

什么是Gatsby? 官方介绍为Blazing-fast static site generator for React(用于React的超快静态站点生成器)。

不再为web技术落后而头痛。享受最新Web前端技术的强大功能--React.js,Webpack,现代JavaScript和CSS等等,所有这一切都将启动并等待您的开始。

使用你自定义的数据。Gatsby丰富的数据插件生态系统允许您使用您想要的数据构建网站 - 来自一个或多个来源:使用GraphQL将数据从无头CMS,SaaS服务,API,数据库,文件系统等更直接地导入您的页面。

        轻松发布到互联网Gatsby.js是互联网化的。 你可以不用理会数据库和服务器的复杂部署,以及昂贵,耗时的设置成本,维护和缩放恐惧。 Gatsby.js将您的网站构建为“静态”文件,可以轻松部署在数十种服务上。

        使您的网站面向未来。不要用过去十年的技术建立一个网站。 网络的未来是移动的,JavaScript和API - JAMstack。 每个网站是一个Web应用程序,每个Web应用程序是一个网站。 Gatsby.js是你一直在等待的通用JavaScript框架。

        静态渐进式Web应用程序。Gatsby.js是一个静态PWA(Progressive Web App)生成器。 您可以将代码和数据分开。 Gatsby只加载关键的HTML,CSS,数据和JavaScript,以便您的网站加载尽可能快。 一旦加载,Gatsby预取其他网页的资源,所以点击网站感觉非常快。

        超越竞争。Gatsby.js建立最快的网站。 不需要等待请求时生成页面,而是预先生成页面,并将其提升到全球服务器云端 - 随时随地传送给用户,无论他们身在何处。

Gatsby如何工作

        无论数据来源如何,Gatsby都可以让您使用您的数据构建闪电般的网站。 从以前遗留的CMS中解放您的网站,并将飞向未来。

Gatsby上手指南

注意:下面代码因为结合了React,javascript使用的是ES6,需预装node.js并会用了npm或者yarn用作依赖包管理,不熟悉的话自行恶补基础

一、命令行安装Gatsby开发环境

 npm install --global gatsby-cli 

二、使用Gatsby开发环境

  1. 创建一个新的网站项目,命令行定位到相应的目录,helloworld是自定义的项目名称。

     gatsby new helloworld 

    执行完命令后,目录下会自动创建了helloworld项目文件夹和相应的项目文件,其目录结构如下:

    • - helloworld
    • - node_modules
    • - public
    • - src
    • - layouts
    • - index.js  // 首页布局
    • - index.css
    • - pages
    • - index.js  // 首页主页内容
    • - page1.js // 内页1内容
    • - page2.js // 内页2内容
    • - static // 所有其他静态资源如图片、样式等都可以放此目录
    • - .gitignore
    • - gatsby-browser.js
    • - gatsby-config.js
    • - gatsby-node.js
    • - gatsby-ssr.js
    • - LICENSE
    • - package.json
    • - README.md
  2. 执行 cd helloworld 定位到当前目录
  3. 执行  gatsby develop ,此时Gatsby会自动启动热更新后台服务器,地址为:  localhost:8000
  4. 自己可以尝试修改  src/pages  目录下的文件,保存后,会马上热更新到浏览器的页面上。
  5. 执行  gatsby build ,此时Gatsby会在 public 目录下构建生产环境用的优化过的静态网站所需的一切静态资源、静态页面与js代码。如果要发布到自己的网站空间上,可以直接把此目录下面所有东西(除.map为后续的文件名的文件)丢过去自己的空间。如果有用过hexo的朋友们应该会比较熟悉,目录结构类似。
  6. 执行  gatsby serve , 此时Gatsby会启动静态网页服务器供你测试刚才“gatsby build”生成的静态网页。

注意:上面步骤默认使用了 gatsby-starter-default 来创作网站应用项目,我们还可以选择官方提供的 gatsby-starter-blog 和 gatsby-starter-hello-world 或者社区提供的 gatsby-starter-blog-no-styles、gatsby-material-starter、gatsby-typescript-starter、gatsby-starter-bootstrap和gatsby-blog-starter-kit等等丰富的模版来创建新的网站应用项目。点击查看更多)

Gatsby实战项目

A4纸网的开发 [ 在线demo ] [ 源代码 ]

交流与学习

  1. 本文作者:Nelson Kuang,别名:Fast Mover  欢迎大家留言及多多指教
  2. Github地址:https://github.com/hiooyUI/hiooyui.github.io/tree/source
  3. 版权声明:欢迎转载学习 => 请标注信息来源于 http://www.cnblogs.com/fastmover/p/8317339.html

Gatsby上手指南 - 让你的静态网站用react来高逼格的写的更多相关文章

  1. UnityShader快速上手指南(三)

    简介 这一篇还是一些基本的shader操作:裁剪.透明和法向量的应用 (纠结了很久写不写这些,因为代码很简单,主要是些概念上的东西) 先来看下大概的效果图:(从左到右依次是裁剪,透明,加了法向量的透明 ...

  2. Android SDK上手指南:下一步学习方向

    Android SDK上手指南:下一步学习方向 2014-02-28 11:01 核子可乐 译 51CTO 字号:T | T 到目前为止,我们已经介绍过的知识足以帮助大家从非常理想的起点开始进行And ...

  3. Android SDK上手指南:示例项目

    Android SDK上手指南:示例项目 2013-12-26 15:40 核子可乐译 51CTO 字号:T | T Android SDK示例项目中的应用能够执行种种功能,例如各类用户界面元素.数据 ...

  4. 能动手绝不多说:开源评论系统remark42上手指南

    能动手绝不多说:开源评论系统 remark42 上手指南 前言 写博客嘛, 谁不喜欢自己倒腾一下呢. 从自建系统到 Github Page, 从 Jekyll 到 Hexo, 年轻的时候谁不喜欢多折腾 ...

  5. ECS7天实践进阶训练营Day1:使用阿里云ECS,快速搭建、管理VuePress静态网站

    一.概述 VuePress是2018年由尤雨溪发布的一个全新的基于Vue的静态网站生成器,它是一个非常轻量级的静态网站生成器.VuePress主要用于生成技术文档,其类似于Gitbook,我们可以用于 ...

  6. CODING 静态网站服务升级,快速、稳定、高拓展!

    CODING 静态网站拥有强大的页面托管服务,目前已有数万开发者.设计师.产品经理.团队与企业使用 CODING 静态网站托管了他(她)们的个人网站.博客.企业与产品官网.在线文档等.CODING 静 ...

  7. 尝鲜一试,Azure静态网站应用服务(Azure Static Web Apps) 免费预览,协同Github自动发布静态SPA

    背景 最近在浏览微软的文档的时候发现,微软喜欢用Hugo这个文档框架,有些技术产品的文档页面就用Hugo来做的,同时搭配Github + Azure Static Web Apps Service这个 ...

  8. 利用git+hugo+markdown 搭建一个静态网站

    利用git+hugo+markdown 搭建一个静态网站 一直想要有一个自己的文档管理系统: 可以很方便书写,而且相应的文档很容易被分享 很方便的存储.管理.历史记录 比较方面的浏览和查询 第一点用M ...

  9. Rancher 快速上手指南操作(1)

    Rancher 快速上手指南操作(1)该指南知道用户如何快速的部署Rancher Server 管理容器.前提是假设你的机器已经安装好docker了.1 确认 docker 的版本,下面是 ubunt ...

随机推荐

  1. 计算机网络之JSONP跨域

    JSONP跨域实现原理 百度联想词跨域实现 一.JSONP跨域实现原理 1.Web页面使用<script>引入JS文件时不受同源策略的影响.准确的说,所有拥有src属性的标签都不受同源策略 ...

  2. JetBrain server certificate is not trusted 弹出框

    To get rid of the pop up message go to below location and click on Accept non-trusted certificates a ...

  3. 运维工作笔记--------------mongodb无法启动问题

    1.根据编译的脚本检查脚本内的服务启动路径是否正确 2.更改完成后删除pid文件 3.重启mongod

  4. flask+mod_wsgi+apache在windows上的布署

    已经安装过python3.5 1.安装flask: pip install flask 2.安装apache: Apache是开源软件,针对windows环境,它不直接提供编译版本.可以在http:/ ...

  5. 关闭QQ右下角弹窗小程序

    关闭QQ右下角弹出的广告或新闻等. 程序没有界面,后台运行. #if defined(UNICODE) && !defined(_UNICODE) #define _UNICODE # ...

  6. Sql server 用T-sql读取本地数据文件dbf的数据文件

    第一步启用Ad Hoc Distributed Queries  在SQLserver执行以下的语句: exec sp_configure 'show advanced options',1 reco ...

  7. ps切图技巧

    步骤1: ps打开psd文件 步骤2: 点击移动工具,观察左上角的自动选择是否有勾选 ,如果没有最好勾选,对应的选项有图层和组,善于切换这个功能能够有效快速的找到你要的区域 步骤3: 找到要切图的元素 ...

  8. 读spring源码(一)-ClassPathXmlApplicationContext-初始化

    工作来几乎所有的项目都用到了spring,却一直没有系统的读下源码,从头开始系统的读下吧,分章也不那么明确,读到哪里记到哪里,仅仅作为个笔记吧. 先看ClassPathXmlApplicationCo ...

  9. php 进行跨域操作

    本地配置两个域名: http://www.concent.com   主域名 http://s.concent.com/       子域名 在主域名下添加跨域代码: ini_set('session ...

  10. 工具篇之GIT知识整理(一)

    目录 项目工具篇(一)GIT 说在前面 背景 与其他版本控制产品对比 Git下载地址及安装 下载地址 安装 在案例中简单使用Git命令 git clone git log git diff git c ...