所在位置：
首页 >
营销资讯 >
网站运营 > 更现代化的建站方式——Gatsby.js系列教程(一)：简介&搭建环境等
更现代化的建站方式——Gatsby.js系列教程(一)：简介&搭建环境等
时间：2023-07-08 10:27:02 | 来源：网站运营
时间：2023-07-08 10:27:02 来源：网站运营
更现代化的建站方式——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. 有哪些优势
- 使用更现代化的技术栈：React、Webpack、现代Javascript、Css、Html、Graphql……享受最新web技术的力量。
- 支持各种数据源： headless CMSs, SaaS services, APIs, databases,your file system……通过Graphql更直接的获取数据。
- 支持生成静态资源：更利于部署到各种服务或空间，也更利于SEO！
- 渐进式Web应用(PWA)：分拆代码和数据，只加载关键的HTML、CSS、数据和JavaScript，因此难以置信的快！
- 丰富的生态系统：时至今日，Gatsby已经拥有很完善的生态，各种插件，你遇到的各种问题也都可以找到解答。
除此之外，Gatsby还有各种好处，比如可以将js放到cdn以加速访问等等，说再多不实操终究没有一个深刻体会，可以在后面使用的时候，
自行体会：）
3. 如何运作
如上图所示，Gatsby支持从各种数据源获取数据，构建网站，并部署到各种服务或空间。
如何搭建环境
依赖
- Node.js最新版本
- 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
其他：当然，如果上述技术栈您都不具备，我们
建议您先学习基础的web技术：HTML、CSS、JavaScript，以及NPM和Git的使用。
React和Graphql的内容会在本教程
穿插讲解！
下期见
斜杠青年：独立开发者/业余交易员/传统文化爱好者
更多原创尽在公众号: 「优雅的程序员呀」。全栈。程序员赚钱之道。优雅的技术，优雅的赚钱。
关注公众号，可以加我好友交流，也可加群技术交流哦。
在线咨询
