为了获得更好的阅读体验,请点击这里阅读原文
忙了一个多星期后我开源了自己从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
主要的文件含义:
/node_modules: 项目依赖./src: 包含所有的项目源代码,会被编译成静态页面..gitignore: git 忽略的文件.prettierrc: 这是Prettier的配置文件. Prettier 将保持你的代码被正确格式化.gatsby-browser.js: Gatsby browser APIs文件.gatsby-config.js: 这是 Gatsby 主要的配置文件,所有插件都在此配置,也包含了 metadata 数据,查看config docs获取更多的信息.gatsby-node.js: Gatsby Node APIs文件.gatsby-ssr.js: Gatsby server-side rendering APIs文件- tsconfig.json: typescript 配置文件
- tslint.json: typescript 代码检测
- tasks:
gatsby-node.js相关的任务. - static: 静态文件,会简单 copy 到
public文件中提供访问. - posts: MarkDown 格式博客,相关图片引用也在内部文件夹中的
images.
其它
可以查看另一篇Gatsby的MarkDown使用示例文章,了解Gatsby中MarkDown其中的特性.
如果你遇到了问题或者有疑问,可以开一个issue给我.
