gtts的博客

使用Gatsby.js+github pages搭建个人博客

December 31, 2018

前几天突然想搭建个人博客,对JekyllHexo都很熟悉,我们公司也有类似的文档生成工具Ydoc, 所以更加偏向于使用js的方案,就选择了Hexo。这还没过几天就发现了Gatsby.js,当看到“Gatsby.js 是一个基于 React 的静态网站生成器”,果断开始研究,这一研究,就把自己的博客马上换成了Gatsby.js

起步

1、安装cli

npm install -g gatsby-cli

2、站在别人的肩膀上,选择官方博客的starter,gatsby-starter-blog, 创建一个新的Gatsby 站点

npx gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog

3、本地开发环境

cd my-blog-starter/
gatsby develop

在浏览器里打开http://localhost:8000,即可看到一个简洁的博客。 blogimg

部署到github pages

需要在github上上创建一个名字叫username.github.io的工程,比如本人的github 用户名是mcgtts,那么创建的工程名字就是mcgtts.github.io

1、安装依赖

npm install gh-pages --save-dev

2、配置

找到gatsby-config.js,添加pathPrefix 配置

module.exports = {
  pathPrefix: `/project-name`,
}

如果不需要路径,直接配置成pathPrefix: /就可以。

在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"
  }

3、发布

npm run  deploy

执行完毕后,打开 https://username.github.io/project-name/ 即可看到效果。

4、绑定域名

在项目的根目录新建static 文件夹,然后添加CNAME文件,写上自己的域名。

5、域名解析

我自己的配置如下: domain

ant design 支持

详情查看node模块:https://www.npmjs.com/package/gatsby-plugin-antd

Gatsby 调用restapi

https://stackoverflow.com/questions/49299309/gatsbyjs-getting-data-from-restful-api


gtts

人生没有白走的路,每一步都算数
我的github