打造你本身的Gatsby博客

爲了得到更好的閱讀體驗,請點擊這裏閱讀原文

忙了一個多星期後我開源了本身從jekyll遷移到Gatsby的博客腳手架,此腳手架作到了開箱即用,適合不肯意碰代碼的同窗,固然也提供了高擴展性,能夠自定義開發本身的頁面

Gatsby 是一個基於 React、GraphQL 的頁面生成器,經過源數據(CMS、MarkDown、API、DataBase、YAML、JSON、CSV...)生成一個個靜態頁面,很是適合博客頁面開發.可查看 Gatsby 官網^[1]瞭解更多.

開始

首先安裝 Gatsby 命令行工具:

npm install -g gatsby-cli
複製代碼

再使用博客模板^[2]搭建一個快速博客框架:

gatsby new my-blog-starter https://github.com/zhouyuexie/gatsby-starter-quiet
複製代碼

切換到你的項目目錄並啓動

cd my-blog-starter/
gatsby dev
複製代碼

開發

你的站點運行在 http://localhost:8000!

注意: 這是第二個連接 http://localhost:8000/___graphql. 這是一個能夠查詢你全部數據的工具,若是你須要更多關於此工具的消息,請查看官方文檔Gatsby tutorial.

打開並編輯src/templates/posts-list.tsx文件. 保存後瀏覽器中會即時刷新.

部署

運行 yarn build 編譯你的網站,全部靜態內容都在./public文件夾中.

若是須要上傳到本身服務器,請先編輯./deploy.sh文件增長你的服務器信息,再執行yarn deploy

項目目錄

項目目錄以下:

.
├── node_modules
├── src
├── .gitignore
├── .prettierrc
├── .babelrc
├── tsconfig.json
├── tslint.json
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── yarn-lock
├── tasks
├── static
├── posts
├── package.json
└── README.md
複製代碼

主要的文件含義:

1. /node_modules: 項目依賴.
2. /src: 包含全部的項目源代碼,會被編譯成靜態頁面.
3. .gitignore: git 忽略的文件
4. .prettierrc: 這是Prettier的配置文件. Prettier 將保持你的代碼被正確格式化.
5. gatsby-browser.js: Gatsby browser APIs文件.
6. gatsby-config.js: 這是 Gatsby 主要的配置文件,全部插件都在此配置,也包含了 metadata 數據,查看config docs獲取更多的信息.
7. gatsby-node.js: Gatsby Node APIs文件.
8. gatsby-ssr.js: Gatsby server-side rendering APIs文件
9. tsconfig.json: typescript 配置文件
10. tslint.json: typescript 代碼檢測
11. tasks: gatsby-node.js相關的任務.
12. static: 靜態文件,會簡單 copy 到public文件中提供訪問.
13. posts: MarkDown 格式博客,相關圖片引用也在內部文件夾中的images.

其它

能夠查看另外一篇Gatsby的MarkDown使用示例文章,瞭解Gatsby中MarkDown其中的特性.

若是你遇到了問題或者有疑問,能夠開一個issue給我.

---

1. Gatsby ↩︎

2. gatsby-starter-quiet ↩︎