更現(xiàn)代化的建站方式——Gatsby.js系列教程(一)：簡介&搭建環(huán)境等
時(shí)間：2023-07-08 10:27:02 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-07-08 10:27:02 來源：網(wǎng)站運(yùn)營
更現(xiàn)代化的建站方式——Gatsby.js系列教程(一)：簡介&搭建環(huán)境等：作為一名程序員，或許都有著建立一個(gè)
個(gè)人網(wǎng)站或博客的想法。
在平臺太
寄人籬下，老牌CSDN、博客園…后起之秀掘金、思否、簡書甚至本站…都是如此，動不動就審核不通過、違規(guī)、刪帖、限流…雖然很多時(shí)候我們都不知道怎么違規(guī)：）
這很打擊創(chuàng)作熱情！影響寫文興致！
所以很多人把主力空間轉(zhuǎn)而選擇Github Pages、CDN甚至買vps、服務(wù)器，來搭建自己的網(wǎng)站，靜態(tài)或動態(tài)。這是
自己的地盤！我的地盤我做主！
關(guān)于建站或者搭建博客，你可能聽說過很多神兵利器：Wordpress、Jekyll、Hugo、Ghost、vuePress、Hexo……而這次我們選擇
更現(xiàn)代化的Gatsby! 截至目前，它在Github擁有41.4k的Star數(shù)量！
在學(xué)習(xí)Gatsby的過程中，發(fā)現(xiàn)中文資料很少。因此打算寫一個(gè)
系列教程，希望可以幫自己總結(jié)，也可以幫到后來的學(xué)習(xí)者：）
下面先讓我們來看看Gatsby是什么？它有什么優(yōu)勢？以及如何搭建開發(fā)環(huán)境、選擇編輯器等Gatsby簡介
1. What(是什么)
Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps
來自官網(wǎng)的介紹，簡潔而有力！
Gatsby是一個(gè)免費(fèi)的開源
框架，
基于React，用來快速
構(gòu)建網(wǎng)站或應(yīng)用！
2. 有哪些優(yōu)勢
- 使用更現(xiàn)代化的技術(shù)棧：React、Webpack、現(xiàn)代Javascript、Css、Html、Graphql……享受最新web技術(shù)的力量。
- 支持各種數(shù)據(jù)源： headless CMSs, SaaS services, APIs, databases,your file system……通過Graphql更直接的獲取數(shù)據(jù)。
- 支持生成靜態(tài)資源：更利于部署到各種服務(wù)或空間，也更利于SEO！
- 漸進(jìn)式Web應(yīng)用(PWA)：分拆代碼和數(shù)據(jù)，只加載關(guān)鍵的HTML、CSS、數(shù)據(jù)和JavaScript，因此難以置信的快！
- 豐富的生態(tài)系統(tǒng)：時(shí)至今日，Gatsby已經(jīng)擁有很完善的生態(tài)，各種插件，你遇到的各種問題也都可以找到解答。
除此之外，Gatsby還有各種好處，比如可以將js放到cdn以加速訪問等等，說再多不實(shí)操終究沒有一個(gè)深刻體會，可以在后面使用的時(shí)候，
自行體會：）
3. 如何運(yùn)作
如上圖所示，Gatsby支持從各種數(shù)據(jù)源獲取數(shù)據(jù)，構(gòu)建網(wǎng)站，并部署到各種服務(wù)或空間。
如何搭建環(huán)境
依賴
- Node.js最新版本
- Git
安裝Gatsby CLI
$ npm install -g gatsby-cli可使用
$ gatsby --help命令獲取幫助。
創(chuàng)建一個(gè)Gatsby網(wǎng)站
$ gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world$ cd hello-world$ gatsby develop打開瀏覽器查看：https://localhost:8000
恭喜！這是您的第一個(gè)gatsby網(wǎng)站！
選擇編輯器
推薦
VSCode。微軟良心開源作品，現(xiàn)代化編輯器，你值得擁有！
當(dāng)然也可以選擇您喜歡的任意一款編輯器：）
需要的知識儲備
核心：- HTML
- CSS
- JavaScript
- React.js
- Graphql
其他：當(dāng)然，如果上述技術(shù)棧您都不具備，我們
建議您先學(xué)習(xí)基礎(chǔ)的web技術(shù)：HTML、CSS、JavaScript，以及NPM和Git的使用。
React和Graphql的內(nèi)容會在本教程
穿插講解！
下期見
斜杠青年：獨(dú)立開發(fā)者/業(yè)余交易員/傳統(tǒng)文化愛好者
更多原創(chuàng)盡在公眾號: 「優(yōu)雅的程序員呀」。全棧。程序員賺錢之道。優(yōu)雅的技術(shù)，優(yōu)雅的賺錢。
關(guān)注公眾號，可以加我好友交流，也可加群技術(shù)交流哦。
關(guān)鍵詞：環(huán)境,系列,現(xiàn)代化,方式,教程
在線咨詢
