前言
相信大部分程序员都有自己个人网站，或者是托管在各大平台上的技术博客。
大概在大一的时候我也萌生搭建个人博客的想法，最早还是比较流行自己买一个 VPS、域名，然后搭建 WordPress。不过由于没续费，东西也没妥善备份也不知道去哪里了。 接着网络兴起轻博客，我想着自己塔多不方便，就用了点点网写自己的博客，在上面沉淀不少文章，然而点点网在 2016 年也关闭了。
自建和博客平台都不靠谱，我便转向了 GitHub Pages，正好那一阵流行用 hexo 生成静态博客站点，于是就搭建了一个放了些文章。其实放到现在来看主题还是挺好看的，不过由于我没有备份的良好习惯，有几篇文章的 md 文件被我弄丢了。
因此，这次我把整个站点备份了一下（学乖了），并在上面盖新的个人网站。因为比较熟悉 React 的缘故，这次用的是 Gatsby 进行搭建。
准备工作
- 安装 Gatsby CLI
1npm install -g gatsby-cli
- 创建项目
1gatsby new
目录结构如下：
1.2├── LICENSE3├── README.md4├── content5├── gatsby-browser.js6├── gatsby-config.js7├── gatsby-node.js8├── node_modules9├── package-lock.json10├── package.json11├── src12└── static
- 本地开发
1gatsby develop
- 常用的插件
1"gatsby-plugin-feed": "^2.3.25",2"gatsby-plugin-google-analytics": "^2.1.31",3"gatsby-plugin-manifest": "^2.2.34",4"gatsby-plugin-offline": "^3.0.30",5"gatsby-plugin-react-helmet": "^3.1.18",6"gatsby-plugin-sharp": "^2.3.10",7"gatsby-plugin-typography": "^2.3.20",8"gatsby-remark-copy-linked-files": "^2.1.33",9"gatsby-remark-images": "^3.1.39",10"gatsby-remark-prismjs": "^3.3.28",11"gatsby-remark-responsive-iframe": "^2.2.30",12"gatsby-remark-smartypants": "^2.1.19",13"gatsby-source-filesystem": "^2.1.43",14"gatsby-transformer-remark": "^2.6.45",15"gatsby-transformer-sharp": "^2.3.9",
配置及开发
配置
首先最重要的就是 gatsby-config.js 文件了，我们需要在里面启用上述安装的插件，配置可以到 sasuke40.githu.io 查看。
还有得去 google analytics 配置一下记录站点的访问信息。
gatsby-plugin-google-analytics 下修改就行。
开发 Dark Mode
其实上面配置完成基本上站点就能用了，不过 Gatsby 最好玩的是他的灵活。自带的没有夜间模式，下面我快速介绍一下怎么开发。
- 注入全局函数
在 src 目录下新建
html.js，开发一个用于控制主题的全局函数
1<script2 dangerouslySetInnerHTML={{3 __html: `4 (function() {5 window.__onThemeChange = function() {};6 function setTheme(newTheme) {7 window.__theme = newTheme;8 preferredTheme = newTheme;9 document.body.className = newTheme;10 window.__onThemeChange(newTheme);11 }1213 var preferredTheme;14 try {15 preferredTheme = localStorage.getItem('theme');16 } catch (err) { }1718 window.__setPreferredTheme = function(newTheme) {19 setTheme(newTheme);20 try {21 localStorage.setItem('theme', newTheme);22 } catch (err) {}23 }2425 var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');26 darkQuery.addListener(function(e) {27 window.__setPreferredTheme(e.matches ? 'dark' : 'light')28 });2930 setTheme(preferredTheme || (darkQuery.matches ? 'dark' : 'light'));31 })();32 `33 }}34/>
- 开发 Toggle 组件
准备好两张 Icon 图片，然后把 react-toggle 魔改一下就行。
- 修改 layout
1{2 theme != null ? (3 <Toggle4 icons={{5 checked: (6 <img7 src={moon}8 width="16"9 height="16"10 role="presentation"11 style={{ pointerEvents: 'none' }}12 />13 ),14 unchecked: (15 <img16 src={sun}17 width="16"18 height="16"19 role="presentation"20 style={{ pointerEvents: 'none' }}21 />22 )23 }}24 checked={theme === 'dark'}25 onChange={e =>26 window.__setPreferredTheme(e.target.checked ? 'dark' : 'light')27 }28 />29 ) : (30 <div style={{ height: '24px' }} />31 )32}
- 编写全局样式
编写
global.css并在typography.js导入它，主要工作是给 body 配置 css 变量
1body {2 --pink: rgb(255, 167, 196);3 background-color: var(--bg);4}56body.light {7 --bg: #ffffff;8 --bg-secondary: rgb(249, 250, 251);9 --header: var(--pink);10 --textNormal: #222;11 --textTitle: #222;12 --textLink: #d23669;13 --hr: hsla(0, 0%, 0%, 0.2);14 --inlineCode-bg: rgba(255, 229, 100, 0.2);15 --inlineCode-text: #1a1a1a;16 --form-shadow: 0 2px 15px 0 rgba(210, 214, 220, 0.5);17}1819body.dark {20 -webkit-font-smoothing: antialiased;2122 --bg: #282c35;23 --bg-secondary: rgb(54, 60, 72);24 --header: #ffffff;25 --textNormal: rgba(255, 255, 255, 0.88);26 --textTitle: #ffffff;27 --textLink: var(--pink);28 --hr: hsla(0, 0%, 100%, 0.2);29 --inlineCode-bg: rgba(115, 124, 153, 0.2);30 --inlineCode-text: #ffee93;31 --form-shadow: 0 2px 15px 0 rgba(26, 26, 27, 0.637);32}
最终效果就是这样
部署
- 安装 gh-pages
1npm install gh-pages --save-dev
- 配置部署脚本
1{2 "scripts": {3 "deploy": "gatsby build && gh-pages -d public -b master"4 }5}
- 推送源码到 dev 分支
Github Pages 有个特殊的规则，就是 \<username>.github.io 会默认使用 master 分支中的生产代码。这也就是为什么 gh-pages -d public -b master 中是指定 master，而不是 gh-pages。
因此，源码就需要放到非 master 分支上。我把博客的源码推到 dev 分支，并将其设置为默认。
- 推送构建后的生产代码
1npm run deploy
推送后应该稍微等一下，就可以访问个人网站了。
总结
Gastby 优势
- 相当的灵活，给个人网站巨大的修改空间
- 支持 graphql，数据调用方便
- 生态强大，1500+ 数量的插件基本满足大部分需求
Gastby 劣势
- 因其灵活，对个人博客的友好度就没那么高，md 文件及文件夹需要自己建立。不像 hexo 可以
hexo new [layout] <title>这么方便
总体来说，我对 Gatsby 还挺满意的。要是大家挖掘到好玩的插件、好看的主题也欢迎留言。 最后，也欢迎大家互换友链 ➡️Edward Elric
