Gatsby enables developers to build fast, secure, and powerful websites using a React-based framework and innovative data layer that makes integrating different content, APIs, and services into one web experience incredibly simple.
正如 Gatsby 官方網站描述的一樣,我僅使用了兩週的時間,就完成了這個部落格的開發。
我主要参考了 Gatsby 的中文网站 Gatsby 中文网
按照網站的教程實際操作一遍,能實現一個帶導航欄的部落格框架,教程詳細講解了:
- Gatsby 的開發環境搭建
- Gatsby 嵌套佈局(Layout)的使用
- Gatsby 的數據源插件以及使用 GraphiQL 查詢數據
- Gatsby 中以編程的方式創建頁面
- 網站的上線準備
Gatsby 的官網會提供一些網頁模版,模板的下載地址是 Gatsby Starter Library。
我在學習完 Gatsby 中文教程網站以後,借鑒了 Gatsby-starter-blog 這個模板完成了我現在的這個部落格。
Gatsby-starter-blog 這個模板已經完成了一個部落格的所有基本功能,在此基礎上,我引入了 ant.design 作為我的控件庫使用。
後期的擴展
因為博客的編寫是用的 Markdown 語法,寫完的 Markdown 文件,以 md 的文件形式,保存在整個工程當中,所以如果我需要發布新的文章,我需要寫完文章以後,放到工程裡面,然後重新編譯和發布項目,才能更新文章列表。為了提高效率,我想了兩種方案。
- 使用 wordpress 作為我的 CMS,通過 gatsby-source-wordpress 插件,拉取數據展示,這樣可以將前後台解耦合,也很符合 Gatsby 的設計初心。
- 使用 AWS S3 和 CloudFront 來部署我的靜態網頁,通過在 gatsby-node.js 文件中編寫腳本,將 build 以後的 public/ 文件夾的內容,推到 S3 存儲桶中,實現 CI/CD 的功能。我將參考 deploying-gatsbyjs-to-amazon-aws。
我是一個有激情的程序員,如果你有程序方面的問題,可以給我發送郵件。