没想到久违的 Gatsby 系列还能继续写,最近为博客更新了黑暗模式和手动切换功能,顺便记录下来。当然下面的实现方案不限于 Gatsby 使用,对于其他框架,思路都大同小异。 方案1 最初实现的方案是直接使用媒体查询和 css 变量。关键是把区分两个模式的变量抽离出来,分别配置...
你可以选择自己买服务器,运行 build 然后推送到自己服务器(或者直接使用 gh-pages),但是使用 netlify 你只需要正常推送项目到 GitHub,netlify 就会自动给你 deploy,这项服务是免费的。 推荐直接用 GitHub 登陆 netlify 获取权限 设置指令 都确定以后其实系统已经开始自动 build 你的项目了。你可以在 deploy 页面查看 ...
你正在访问的博客从 2019 年 9 月开始使用 GatsbyJS 搭建,直到最近我把它改为 NextJS。 为什么要迁移 我的博客内容还很少,但 GatsbyJS build 一次也要耗时 3 ～ 4 分钟,虽然如果部署到 vercel、gatsby cloud 等平台只需简单的git push就会自动在云端部署,但云端部署并不会降低 build 时间,只是避免了本地电脑...
1. 安装 npm install --globalgatsby-cli 2. 使用 // 创建项目gatsbynewdalong cd dalong// 启动gatsby develop -- 使用的是热加载端口8000// 编辑源码src/pages.// 生产构建gatsby build -- 优化的代码以及预加载的路由// 启动一个本地的html 服务器测试构建的站点gatsby serve 3. 效果 开发启动 界面 gra...
为了构建一个可以无限扩展且加载速度非常快的博客，我们需要一个能够构建和渲染静态资源的框架，这些静态资源可以很容易地部署在web服务器上。Gatsby.js (可以说)是目前最好的开源静态站点生成器，所以让我们来看看它。Gatsby.js是一个基于response .js的用于生成静态网站的开源框架。Gatsby.js是一个web应用程序生成器...
1. 安装 npm install --global gatsby-cli 1. 2. 使用 // 创建项目 gatsby new dalong cd dalong // 启动 gatsby develop -- 使用的是热加载端口 8000 // 编辑源码 src/pages. // 生产构建 gatsby build -- 优化的代码以及预加载的路由 // 启动一个本地的html 服务器测试构建的站点 ...
使用Gatsby.js 搭建静态博客 1 关键文件 静态博客之前也有搭建过,不过使用 Hexo 一键生成的,其实当时也有考虑过 Gatsby,不过这个框架搭建博客入门还是比较难的,前置知识点包括 react 和 graphQL。 这个系列的文章记录的就是这个博客搭建中需要注意的点。 此博客使用gatsby-starter-blog作为框架,后续自己添加功能。
第一步:创建博客 首先你需要使用 gatsby-cli 创建一个网站,你可以在Gatsby Starter选择你喜欢的主题创建 Blog。 第二步:Notion 中创建 Blog Table Page 关于Blog Page,你可以直接 Duplicate 该Blog 模板到你的 workspace。你也可以根据你使用创建好的 Table。不过这里有两个字段是必须的:status 和 publish_date。
后记 通过GatsbyJS,我可以享受架构前端项目的乐趣,拥抱开源社区的优势,不断改进我的博客框架。 而通过Netlify,我可以享受到服务器不中断下发布新网站,而且可以提供校对版本给校对者,然后才发布文章。就算是有问题也可以快速后退,DEBUG,然后发布 。
回顾:使用 Gatsby.js 搭建静态博客 3 样式调整 官方自带标签系统教程,英语过关可以直接阅读官方教程。 以下说一下重点: 提示:以下所有查询都可以在localhost:8000/___graphql测试 建立标签系统只需要以下步骤: 在md 文件添加 tags ---title:"A Trip To the Zoo"tags:["animals","Chicago","zoos"]--- ...