使用Gatsby搭建个人博客

Gatsby是基于React的框架，可以帮助我们构建超快的网站与应用。使用plugins可以很方便的实现很多功能，当然官方和社区也提供了很多预设置好的用例模板starters，快速的构建应用。

用Gatsby blog starter模板开始你的博客

安装Gatsby CLI

首先，全局安装Gatsby脚手架

  yarn global add gatsby-cli
  // or
  npm install -g gatsby-cli

创建项目

安装完之后，通过gatsby new [rootPath] [starter]命令新建gatsby项目

  // create a new Gatsby site using the blog starter
  gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog

运行开发服务

然后进入my-blog-starter目录，运行开发服务器

  cd my-blog-starter
  gatsby develop

此时在浏览器打开http://localhost:8000，你会看到博客首页，编辑content目录下的博客并保存试试吧

构建应用

  gatsby build

Gatsby会打包所有资源，包括静态HTML、JavaScript等

部署

如何部署到GitHub Pages？可以通过gh-pages依赖包把项目发布到Github Pages，运行下面命令安装：

npm install gh-pages --save-dev

GitHub Pages有两种类型，一种Project Pages，另一种是User and Organization Pages，它们几乎相同，但又有一些区别。

GitHub Repository page

在package.json文件中添加部署脚本

  {
    "scripts": {
      ...
      "deploy": "gatsby build --prefix-paths && gh-pages -d public"
    }
  }

在gatsby-config.js配置文件中添加一个路径前缀

  {
    pathPrefix: "/your-repo-name",
  }

然后运行npm run deploy，确保仓库设置中的GitHub Pages项选择的是gh-pages分支，在浏览器打开http://username.github.io/repo-name查看。

GitHub Organization or User page

仓库以username.github.io方式命名，因为Organization or User page需要push到master分支，master分支将是构建之后的资源文件，我们需要在本地创建一个develop分支工作，这个分支名字可以随便起。

在package.json文件中添加以下脚本

  {
    "scripts": {
        ...
        "deploy": "gatsby build && gh-pages -d public -b master",
    }
  }

然后运行npm run deploy，在浏览器打开http://username.github.io查看。

胡说八道~

Personal blog by lanxxg. 千万不要听他胡说八道