第一篇博客

花了一天现学现做，找了很多大佬们的博客网站来参考，总算是把一个博客网站的 html 写好了 QAQ

有用的资料

使用 Gatsby 搭建个人网站指南

前言 相信大部分程序员都有自己个人网站，或者是托管在各大平台上的技术博客。 大概在大一的时候我也萌生搭建个人博客的想法，最早还是比较流行自己买一个 VPS、域名，然后搭建 WordPress。不过由于没续费，东西也没妥善备份也不知道去哪里了。 接着网络兴起轻博客，我想着自己塔多不方便，就用了点点网写自己的博客，在上面沉淀不少文章，然而点点网在 2016 年也关闭了。 自建和博客平台都不靠谱，我便转向了 GitHub Pages，正好那一阵流行用 hexo 生成静态博客站点，于是就搭建了一个放了些文章。其实放到现在来看主题还是挺好看的，不过由于我没有备份的良好习惯，有几篇文章的 md 文件被我弄丢了。 因此，这次我把整个站点备份了一下（学乖了），并在上面盖新的个人网站。因为比较熟悉 React 的缘故，这次用的是 Gatsby 进行搭建。 准备工作 安装 Gatsby CLI 1 npm install -g gatsby-cli 创建项目 1 gatsby new 目录结构如下： 1 2 3 4 5 6 7 8 9 10 11 12 . ├── LICENSE ├── README.md ├── content ├── gatsby-browser.js ├── gatsby-config.js ├── gatsby-node.js ├── node_modules ├── package-lock.json ├── package.json ├── src └── static 本地开发 1 gatsby develop 常用的插件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 "gatsby-plugin-feed": "^2.

https://edward40.com/posts/a-guide-to-building-a-personal-website-with-gatsby/

Tutorials | Gatsby

Learning-oriented lessons that take you through a series of steps to complete a project. Most useful when you want to get started with Gatsby.

https://www.gatsbyjs.com/docs/tutorial/

关于这个网站的历史 (持续更新)

石器时代

• 2019/12/28——建站（包含介绍、背景图、Twitter、Github）
• 2020/01/13——映射至互联网
• 2020/01/15——添加 P 站链接
• 2020/02/22——添加路由器 Luci 链接，精简了端口映射（从双端口到单端口）
• 2020/02/22——添加夜间模式
• 2020/02/23——优化夜间模式（从改背景图优化为改背景色）
• 2020/02/24——关联 Google Analytics
• 2020/02/26——添加自动开启夜间模式功能
• 2020/02/28——添加 Blog 功能

青铜时代

• 2020/02/29——抛弃路由器，将网站移至腾讯云
• 2020/03/12——成功备案
• 2020/03/12——添加自适应（还很鸡肋）

铁器时代

• 2020/03/17——将网站有痛转移到 Gatsby(背景图和夜间模式都没了，等待将来加入 (🕊 在路上))
• 2020/03/19——添加友情链接页面
• 2020/03/22——添加 ssl 证书支持 https 访问
• 2020/04/07——将友链页面改为收藏页面，添加了音乐收藏
• 2020/04/13——习得 http 重定向为 https 技能
• 2020/04/26——优化了音乐收藏，现在每个卡片可以单独打开，单独关闭
• 2020/04/27——添加了阅读时长提示
• 2020/05/01——添加了夜间模式
• 2020/05/02——添加了 RSS 订阅链接入口
• 2020/05/17——编写了 new.exe 来负责生成包含日期时间的空白 Markdown 文件
• 2020/06/14——简化了 Bio，并将内容移至新增的关于页面
• 2020/07/23——增加了过渡动画
• 2020/08/11——修改了首页样式，现在能在首页看到文章的头图啦
• 2020/08/16——使用 Valine 为文章添加了评论区

文艺复新

• 2021/10/15——重构本站，增删改部分功能
• 2021/10/19——添加分页功能
• 2021/10/21——添加标签筛选功能
• 2021/12/18——添加关于页
• 2022/01/18——SEO
• 2022/02/14——添加友链页、用上了自己开发的插件
• 2022/02/21——使用 Recoil 进行状态管理
• 2022/04/11——美化 404 页样式
• 2022/05/25——移除了一些文章

工业革命

• 2022/07/24——更新至 Yarn 3，使用 Gatsby Head API 替换 React Helmet
• 2022/08/17——将源码迁移至 TypeScript 并启用 graphqlTypegen
• 2022/11/08——更新至 Gatsby 5
• 2022/11/14——抛弃 VPS 并投入 Netlify 的怀抱
• 2022/11/19——使用 GitHub Actions 进行构建并部署至 Netlify
• 2023/03/01——切换至 Waline 评论系统
• 2023/04/20——将 Markdown 迁移至 MDX
• 2023/05/01——尝试将界面风格贴近 Material YOU 设计
• 2023/05/07——添加推特卡片和对应的 Netlify Function 用于获取推文信息
• 2023/05/16——使用 ViewTransition API 添加夜间模式动画
• 2023/09/10——将所有 Serverless Function 迁移至本地打包并部署至 Netlify