小白篇--使用Gatsby.js + github pages搭建个人博客

使用此步骤系统必须存在 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上上创建一个名字叫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、域名解析

我自己的配置如下：

Gastby 优势

Gastby 劣势