使用Gatsby 搭建個人網站指南
前言
相信大部分程序員都有自己個人網站，或者是託管在各大平台上的技術部落格。
大概在大一的時候我也萌生搭建個人部落格的想法，最早還是比較流行自己買一個VPS、域名，然後搭建WordPress 。不過由於沒續費，東西也沒妥善備份也不知道去哪裡了。
接著網絡興起輕部落格，我想著自己塔多不方便，就用了點點網寫自己的部落格，在上面沉澱不少文章，然而點點網在2016年也關閉了。
自建和部落格平台都不靠譜，我便轉向了GitHub Pages ，正好那一陣流行用hexo生成靜態部落格站點，於是就搭建了一個放了些文章。其實放到現在來看主題還是挺好看的，不過由於我沒有備份的良好習慣，有幾篇文章的md 文件被我弄丟了。
因此，這次我把整個站點備份了一下（學乖了），並在上面蓋新的個人網站。因為比較熟悉React的緣故，這次用的是Gatsby進行搭建。
準備工作
- 安裝Gatsby CLI
npm install -g gatsby-cli- 創建項目
gatsby new目錄結構如下：
. ├── LICENSE ├── README.md ├── content ├── gatsby-browser.js ├── gatsby-config.js ├── gatsby-node.js ├── node_modules ├── package-lock.json ├── package.json ├── src └── static- 本地開發
gatsby develop- 常用的插件
"gatsby-plugin-feed":"^2.3.25","gatsby-plugin-google-analytics":"^2.1.31","gatsby-plugin-manifest":"^2.2.34","gatsby-plugin-offline":"^3.0.30","gatsby-plugin-react-helmet":"^3.1.18","gatsby-plugin-sharp":"^2.3.10","gatsby-plugin-typography":"^2.3.20","gatsby-remark-copy-linked-files":"^2.1.33","gatsby-remark-images":"^3.1.39","gatsby-remark-prismjs":"^3.3.28","gatsby-remark-responsive-iframe":"^2.2.30","gatsby-remark-smartypants":"^2.1.19","gatsby-source-filesystem":"^2.1.43","gatsby-transformer-remark":"^2.6.45","gatsby-transformer-sharp":"^2.3.9",配置及開發
配置
首先最重要的就是gatsby-config.js文件了，我們需要在裡面啟用上述安裝的插件，配置可以到sasuke40.githu.io查看。
還有得去google analytics配置一下記錄站點的訪問訊息。
配置結束會給你個跟踪ID，在配置文件gatsby-plugin-google-analytics下修改就行。
開發Dark Mode
其實上面配置完成基本上站點就能用了，不過Gatsby 最好玩的是他的靈活。自帶的沒有夜間模式，下面我快速介紹一下怎麼開發。
- 注入全局函數在src目錄下新建
html.js，開發一個用於控制主題的全局函數
<scriptdangerouslySetInnerHTML={{__html:`(function(){window.__onThemeChange=function(){};functionsetTheme(newTheme){window.__theme=newTheme;preferredTheme=newTheme;document.body.className=newTheme;window.__onThemeChange(newTheme);}varpreferredTheme;try{preferredTheme=localStorage.getItem('theme');}catch(err){}window.__setPreferredTheme=function(newTheme){setTheme(newTheme);try{localStorage.setItem('theme',newTheme);}catch(err){}}vardarkQuery=window.matchMedia('(prefers-color-scheme:dark)');darkQuery.addListener(function(e){window.__setPreferredTheme(e.matches?'dark':'light')});setTheme(preferredTheme||(darkQuery.matches?'dark':'light'));})();`,}}/>- 開發Toggle 組件
準備好兩張Icon圖片，然後把react-toggle魔改一下就行。
- 修改layout
{ theme != null ? (<Toggleicons={{checked:(<imgsrc={moon}width="16"height="16"role="presentation"style={{pointerEvents:'none'}}/>), unchecked: (<imgsrc={sun}width="16"height="16"role="presentation"style={{pointerEvents:'none'}}/>), }} checked={theme === 'dark'} onChange={e => window.__setPreferredTheme(e.target.checked ? 'dark' : 'light') } /> ) : (<divstyle={{height:'24px'}}/>) }- 編寫全局樣式編寫
global.css並在typography.js導入它，主要工作是給body配置css變量
body{--pink:rgb(255,167,196);background-color:var(--bg);}body.light{--bg:#ffffff;--bg-secondary:rgb(249,250,251);--header:var(--pink);--textNormal:#222;--textTitle:#222;--textLink:#d23669;--hr:hsla(0,0%,0%,0.2);--inlineCode-bg:rgba(255,229,100,0.2);--inlineCode-text:#1a1a1a;--form-shadow:02px15px0rgba(210,214,220,0.5);}body.dark{-webkit-font-smoothing:antialiased;--bg:#282c35;--bg-secondary:rgb(54,60,72);--header:#ffffff;--textNormal:rgba(255,255,255,0.88);--textTitle:#ffffff;--textLink:var(--pink);--hr:hsla(0,0%,100%,0.2);--inlineCode-bg:rgba(115,124,153,0.2);--inlineCode-text:#ffee93;--form-shadow:02px15px0rgba(26,26,27,0.637);}最終效果就是這樣
部署
- 安裝gh-pages
npm install gh-pages --save-dev- 配置部署腳本
{"scripts":{"deploy":"gatsby build && gh-pages -d public -b master"}}- 推送源碼到dev 分支
Github Pages有個特殊的規則，就是<username>.github.io會默認使用master分支中的生產代碼。這也就是為什麼gh-pages -d public -b master中是指定master ，而不是gh-pages 。
因此，源碼就需要放到非master分支上。我把部落格的源碼推到dev分支，並將其設置為默認。
- 推送構建後的生產代碼
npm run deploy推送後應該稍微等一下，就可以訪問個人網站了。
總結
Gastby 優勢
- 相當的靈活，給個人網站巨大的修改空間
- 支持graphql，數據調用方便
- 生態強大，1500+ 數量的插件基本滿足大部分需求
Gastby 劣勢
- 因其靈活，對個人部落格的友好度就沒那麼高，md 文件及文件夾需要自己建立。不像hexo可以
hexo new [layout] <title>這麼方便
總體來說，我對Gatsby 還挺滿意的。要是大家挖掘到好玩的插件、好看的主題也歡迎留言。
最後，也歡迎大家互換友鏈➡️ Edward Elric