Obeta

打造你自己的Gatsby博客

忙了一个多星期后我开源了自己从jekyll迁移到Gatsby的博客脚手架,此脚手架做到了开箱即用,适合不愿意碰代码的同学,当然也提供了高扩展性,可以自定义开发自己的页面

Gatsby 是一个基于 React、GraphQL 的页面生成器,通过源数据(CMS、MarkDown、API、DataBase、YAML、JSON、CSV...)生成一个个静态页面,非常适合博客页面开发.可查看 Gatsby 官网1了解更多.

开始

首先安装 Gatsby 命令行工具:

npm install -g gatsby-cli

再使用博客模板2搭建一个快速博客框架:

gatsby new my-blog-starter https://github.com/zhouyuexie/gatsby-starter-quiet

切换到你的项目目录并启动

cd my-blog-starter/
gatsby dev

开发

你的站点运行在 http://localhost:8000!

_注意: 这是第二个链接 _http://localhost:8000/___graphql. 这是一个可以查询你所有数据的工具,如果你需要更多关于此工具的消息,请查看官方文档Gatsby tutorial.

打开并编辑src/templates/posts-list.tsx文件. 保存后浏览器中会即时刷新.

部署

运行 yarn build 编译你的网站,所有静态内容都在./public文件夹中.

如果需要上传到自己服务器,请先编辑./deploy.sh文件增加你的服务器信息,再执行yarn deploy

项目目录

项目目录如下:

.
├── node_modules
├── src
├── .gitignore
├── .prettierrc
├── .babelrc
├── tsconfig.json
├── tslint.json
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── yarn-lock
├── tasks
├── static
├── posts
├── package.json
└── README.md

主要的文件含义:

  1. /node_modules: 项目依赖.
  2. /src: 包含所有的项目源代码,会被编译成静态页面.
  3. .gitignore: git 忽略的文件
  4. .prettierrc: 这是Prettier的配置文件. Prettier 将保持你的代码被正确格式化.
  5. gatsby-browser.js: Gatsby browser APIs文件.
  6. gatsby-config.js: 这是 Gatsby 主要的配置文件,所有插件都在此配置,也包含了 metadata 数据,查看config docs获取更多的信息.
  7. gatsby-node.js: Gatsby Node APIs文件.
  8. gatsby-ssr.js: Gatsby server-side rendering APIs文件
  9. tsconfig.json: typescript 配置文件
  10. tslint.json: typescript 代码检测
  11. tasks: gatsby-node.js相关的任务.
  12. static: 静态文件,会简单 copy 到public文件中提供访问.
  13. posts: MarkDown 格式博客,相关图片引用也在内部文件夹中的images.

个人随笔记录,内容不保证完全正确,若需要转载,请注明作者和出处.