更现代化的建站方式——Gatsby.js系列教程(一):简介&搭建环境等

作为一名程序员,或许都有着建立一个个人网站或博客的想法。

在平台太寄人篱下,老牌CSDN、博客园…后起之秀掘金、思否、简书甚至知乎…都是如此,动不动就审核不通过、违规、删帖、限流…虽然很多时候我们都不知道怎么违规:)

这很打击创作热情!影响写文兴致!

所以很多人把主力空间转而选择Github Pages、CDN甚至买vps、服务器,来搭建自己的网站,静态或动态。这是自己的地盘!我的地盘我做主!

关于建站或者搭建博客,你可能听说过很多神兵利器:Wordpress、Jekyll、Hugo、Ghost、vuePress、Hexo……而这次我们选择更现代化的Gatsby! 截至目前,它在Github拥有41.4k的Star数量!


在学习Gatsby的过程中,发现中文资料很少。因此打算写一个系列教程,希望可以帮自己总结,也可以帮到后来的学习者:)

下面先让我们来看看Gatsby是什么?它有什么优势?以及如何搭建开发环境、选择编辑器等

Gatsby简介

1. What(是什么)

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps

来自官网的介绍,简洁而有力!

Gatsby是一个免费的开源框架基于React,用来快速构建网站或应用

2. 有哪些优势

  1. 使用更现代化的技术栈:React、Webpack、现代Javascript、Css、Html、Graphql……享受最新web技术的力量。

  2. 支持各种数据源: headless CMSs, SaaS services, APIs, databases,your file system……通过Graphql更直接的获取数据。

  3. 支持生成静态资源:更利于部署到各种服务或空间,也更利于SEO!

  4. 渐进式Web应用(PWA):分拆代码和数据,只加载关键的HTML、CSS、数据和JavaScript,因此难以置信的快!

  5. 丰富的生态系统:时至今日,Gatsby已经拥有很完善的生态,各种插件,你遇到的各种问题也都可以找到解答。

除此之外,Gatsby还有各种好处,比如可以将js放到cdn以加速访问等等,说再多不实操终究没有一个深刻体会,可以在后面使用的时候,自行体会:)

3. 如何运作

gatsby-how-work

如上图所示,Gatsby支持从各种数据源获取数据,构建网站,并部署到各种服务或空间。

如何搭建环境

依赖

  1. Node.js最新版本

  2. Git

安装Gatsby CLI

$ npm install -g gatsby-cli

可使用$ gatsby --help命令获取帮助。

创建一个Gatsby网站

$ gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

$ cd hello-world

$ gatsby develop

打开浏览器查看:https://localhost:8000

gatsby-hello-world

恭喜!这是您的第一个gatsby网站!🎉

选择编辑器

推荐VSCode。微软良心开源作品,现代化编辑器,你值得拥有!

当然也可以选择您喜欢的任意一款编辑器:)

需要的知识储备

核心:

  • HTML
  • CSS
  • JavaScript
  • React.js
  • Graphql

其他:

  • NPM
  • Git

当然,如果上述技术栈您都不具备,我们建议您先学习基础的web技术:HTML、CSS、JavaScript,以及NPM和Git的使用。

React和Graphql的内容会在本教程穿插讲解

下期见👉


斜杠青年:独立开发者/业余交易员/传统文化爱好者

更多原创尽在公众号: 「优雅的程序员呀」。全栈。程序员赚钱之道。优雅的技术,优雅的赚钱。

关注公众号,可以加我好友交流,也可加群技术交流哦。

发布了9 篇原创文章 · 获赞 2 · 访问量 1777
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览