只需10分鐘，構建你的GitHub 個人網站
很多開發者尤其是前端開發者都希望有一個自己的網站來展示個人訊息、簡歷或者寫一些部落格。
也許你會想到自己買雲服務器，然後將開發的網站放上去，但是服務器價格不菲而且對於初學者來說自己部署也比較麻煩。
其實想搭建個人網站有GitHub 就足夠了。
今天我們就來介紹一下怎麼用Gatsby 來快速搭建個人網站。
Gatsby.js是一個基於React的免費、開源的快速開發靜態網站的框架。而且通過配合使用GraphQL 可以與各種數據源集成，比如markdown 文檔，圖片等等。所有這些資源可以被當做對象通過GraphQL 請求然後在網站上展示。
本篇中，我們將介紹如何開始使用Gatsby ,然後構建靜態網站並通過Github 免費部署，最終生成我們的GitHub 個人網站。
Gatsby
因為Gatsby 是基於React 的所以需要你具有一定的javascript 和React 基礎。
然後還需要你的電腦安裝git 和nodejs。
有了以上準備工作後，再安裝Gatsby。
全局安裝Gatsby 腳手架：
npm install -g gatsby-cli使用Gatsby腳手架生成Gatsby項目：
gatsby new blog以上命令生成了一個名為blog 的項目目錄，進入此目錄並啟動項目：
cd gh-pages-site gatsby develop這樣一個Gatsby 網站的開發版本就運行起來了，打開http://localhost:8000 來查看並調試。
如果要部署項目可以執行：
gatsby build執行完之後在根目錄下會生成一個public目錄，這個目錄裡包含了網站的所需文件，你可以將其打包上傳到服務器來進行部署。接下來我們會看到怎麼將其部署到GitHub,生成一個GitHub 個人網站。
GitHub Pages
在我們部署之前我們先來了解下GitHub Page 的基本流程。 GitHub Pages 是GitHub 提供的一項服務，可以讓你直接在GitHub 存儲庫直接託管靜態網站。一般作為一個開源倉庫的介紹頁或者個人站。創建一個網站，首先需要你push 相關的靜態文件到gh-pages 分支。你可以在GitHub倉庫的Settings頁面- GitHub Pages中激活GitHub pages.如果你倉庫的地址是[email protected]:username/blog.git，那麼你網站的地址就是http:// username.github.io/ blog .還有一點需要注意如果你的GitHub賬號是免費賬號，那麼只有公共倉庫（public）才能用於GitHub Pages。
通過Gatsby部署
在項目目錄下安裝gh-pages
npm install gh-pages配置站點目錄,將你倉庫名稱配置到gatsby-config.js文件裡，像這樣
module.exports={pathPrefix:"/blog",}然後，在package.json 文件的scripts 裡配置如下命令：
{"scripts":{"gh-deploy":"gatsby build --prefix-paths && gh-pages -d public"}}這個命令，首先為每個url 創建帶有/blog 前綴的站點的靜態文件到public 文件夾，然後使用gh-pages 插件將public 文件夾的內容推送到gh-pages 分支。
然後將你本地的項目添加到GitHub:
git remote add origin [email protected]:username/blog.git最後，執行gh-deploy 命令，將網站推送到GitHub
npm run deploy這樣文件就推送到GitHub 倉庫的gh-pages 分支了。推送後你就可以在http:// username.github.io/blog上查看到你的個人網站了！
這樣你的個人網站就建好了，至於怎麼豐富你的網站內容，可以參考Gatsby 官方文檔。