怎么给网站加js_更现代化的建站方式——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支持从各种数据源获取数据，构建网站，并部署到各种服务或空间。

如何搭建环境

依赖

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网站！

选择编辑器

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

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

需要的知识储备

核心：

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

其他：

• NPM
• Git

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

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

下期见

---

斜杠青年：独立开发者/业余交易员/传统文化爱好者 更多原创尽在公众号: 「 优雅的程序员呀」。全栈。程序员赚钱之道。优雅的技术，优雅的赚钱。
关注公众号，可以加我好友交流，也可加群技术交流哦。