EdwardElricNavigate back to the homepage

使用 Gatsby 搭建个人网站指南

Edward Elric
January 7th, 2020 · 1 min read

前言

相信大部分程序员都有自己个人网站,或者是托管在各大平台上的技术博客。

大概在大一的时候我也萌生搭建个人博客的想法,最早还是比较流行自己买一个 VPS、域名,然后搭建 WordPress。不过由于没续费,东西也没妥善备份也不知道去哪里了。 接着网络兴起轻博客,我想着自己塔多不方便,就用了点点网写自己的博客,在上面沉淀不少文章,然而点点网在 2016 年也关闭了。

自建和博客平台都不靠谱,我便转向了 GitHub Pages,正好那一阵流行用 hexo 生成静态博客站点,于是就搭建了一个放了些文章。其实放到现在来看主题还是挺好看的,不过由于我没有备份的良好习惯,有几篇文章的 md 文件被我弄丢了。

因此,这次我把整个站点备份了一下(学乖了),并在上面盖新的个人网站。因为比较熟悉 React 的缘故,这次用的是 Gatsby 进行搭建。

准备工作

  1. 安装 Gatsby CLI
1npm install -g gatsby-cli
  1. 创建项目
1gatsby new

目录结构如下:

1.
2├── LICENSE
3├── README.md
4├── content
5├── gatsby-browser.js
6├── gatsby-config.js
7├── gatsby-node.js
8├── node_modules
9├── package-lock.json
10├── package.json
11├── src
12└── static
  1. 本地开发
1gatsby develop
  1. 常用的插件
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 配置一下记录站点的访问信息。

image
配置结束会给你个跟踪 ID,在配置文件 gatsby-plugin-google-analytics 下修改就行。

开发 Dark Mode

其实上面配置完成基本上站点就能用了,不过 Gatsby 最好玩的是他的灵活。自带的没有夜间模式,下面我快速介绍一下怎么开发。

image

  1. 注入全局函数 在 src 目录下新建 html.js,开发一个用于控制主题的全局函数
1<script
2 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 }
12
13 var preferredTheme;
14 try {
15 preferredTheme = localStorage.getItem('theme');
16 } catch (err) { }
17
18 window.__setPreferredTheme = function(newTheme) {
19 setTheme(newTheme);
20 try {
21 localStorage.setItem('theme', newTheme);
22 } catch (err) {}
23 }
24
25 var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
26 darkQuery.addListener(function(e) {
27 window.__setPreferredTheme(e.matches ? 'dark' : 'light')
28 });
29
30 setTheme(preferredTheme || (darkQuery.matches ? 'dark' : 'light'));
31 })();
32 `
33 }}
34/>
  1. 开发 Toggle 组件

准备好两张 Icon 图片,然后把 react-toggle 魔改一下就行。

  1. 修改 layout
1{
2 theme != null ? (
3 <Toggle
4 icons={{
5 checked: (
6 <img
7 src={moon}
8 width="16"
9 height="16"
10 role="presentation"
11 style={{ pointerEvents: 'none' }}
12 />
13 ),
14 unchecked: (
15 <img
16 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}
  1. 编写全局样式 编写 global.css 并在 typography.js 导入它,主要工作是给 body 配置 css 变量
1body {
2 --pink: rgb(255, 167, 196);
3 background-color: var(--bg);
4}
5
6body.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}
18
19body.dark {
20 -webkit-font-smoothing: antialiased;
21
22 --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}

最终效果就是这样

image

部署

  1. 安装 gh-pages
1npm install gh-pages --save-dev
  1. 配置部署脚本
1{
2 "scripts": {
3 "deploy": "gatsby build && gh-pages -d public -b master"
4 }
5}
  1. 推送源码到 dev 分支

Github Pages 有个特殊的规则,就是 \<username>.github.io 会默认使用 master 分支中的生产代码。这也就是为什么 gh-pages -d public -b master 中是指定 master,而不是 gh-pages

因此,源码就需要放到非 master 分支上。我把博客的源码推到 dev 分支,并将其设置为默认。

image

  1. 推送构建后的生产代码
1npm run deploy

推送后应该稍微等一下,就可以访问个人网站了。

总结

Gastby 优势

  • 相当的灵活,给个人网站巨大的修改空间
  • 支持 graphql,数据调用方便
  • 生态强大,1500+ 数量的插件基本满足大部分需求

Gastby 劣势

  • 因其灵活,对个人博客的友好度就没那么高,md 文件及文件夹需要自己建立。不像 hexo 可以 hexo new [layout] <title> 这么方便

总体来说,我对 Gatsby 还挺满意的。要是大家挖掘到好玩的插件、好看的主题也欢迎留言。 最后,也欢迎大家互换友链 ➡️Edward Elric

Join our email list and get notified about new content

Be the first to receive our latest content with the ability to opt-out at anytime. We promise to not spam your inbox or share your email with any third parties.

More articles from Edward Elric

尝试用 Rust + Yew 写高性能前端页面

前言 看到这篇文章,可能很多人会有个疑问:“已经有 React + TypeScript 这么好的组合,为什么还想着使用 Rust 来写前端页面,不折腾吗?” 首先值得讨论的一点,接下来几年的前端方向有哪些? 个人的愚见,在全栈领域必然是 serverless…

January 5th, 2020 · 1 min read

尝试一下 VSCode Remote 开发 Node 应用

VSCode 的 Remote SSH 插件完美击中运维痛点,以后可以抛弃 Vim 直接在 VSCode 里面改东西,非常方便。

May 17th, 2019 · 1 min read
© 2015–2020 Edward Elric
Link to $https://twitter.com/sasuke688848Link to $https://github.com/sasuke40Link to $https://www.linkedin.com/in/sasuke/