使用此步骤系统必须存在 node 。
起步
1、安装cli
npm install -g gatsby-cli
2、站在别人的肩膀上,选择官方博客的starter,gatsby-starter-blog, 创建一个新的Gatsby 站点
gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog
或者默认
gatsby new
gatsby new
后,再根据提示信息选择对应的项目类型:
博客建议选择 gatsby-starter-blog
3、本地开发环境
切换至本地文件夹目录, 运行 gatsby develop
启动项目。
在浏览器里打开http://localhost:8000
,即可看到一个简洁的博客。
部署到github pages
需要在github上上创建一个名字叫username.github.io
的工程,比如本人的 github 用户名是lEnGKX
,那么创建的工程名字就是 lEnGKX.github.io 。
1、安装依赖
npm install gh-pages --save-dev
2、配置
找到gatsby-config.js
,添加pathPrefix 配置
module.exports = {
pathPrefix: `/project-name`,
}
如果不需要路径,直接配置成pathPrefix: /
就可以。
如果配置成
/project-name
,则访问https://username.github.io/project-name/
;如果配置成
/
,则访问https://username.github.io
。
在package.json,添加一个scripts 配置,将先将静态文件build 到public 目录,然后再push 到github工程的gh-pages 分支。
"scripts": {
"deploy": "gatsby build --prefix-paths && gh-pages -d public"
}
如果你想push 到master分支,配置如下:
"scripts": {
"deploy": "gatsby build --prefix-paths && gh-pages -d public -b master"
}
如果选择 push 到 master 分支,就新创建 一个 dev 分支进行开发和保存源码,因为 push 到 master 分支 会改变目录结构且很混乱。
3、发布
npm run deploy
执行完毕后,稍微等一下,打开 username.github.io/project-nam… 即可看到效果。
4、绑定域名
在项目的根目录新建static
文件夹,然后添加CNAME
文件,写上自己的域名。
5、域名解析
ant design 支持
详情查看node模块:www.npmjs.com/package/gat…
Gatsby 调用restapi
stackoverflow.com/questions/4…
总结
Gastby 优势
- 相当的灵活,给个人网站巨大的修改空间
- 支持 graphql,数据调用方便
- 生态强大,1500+ 数量的插件基本满足大部分需求
Gastby 劣势
- 因其灵活,对个人博客的友好度就没那么高,md 文件及文件夹需要自己建立。不像 hexo 可以
hexo new [layout]
这么方便。