如何使用Gatsby创建自己的博客

首发于

首先使用npm安装gatsby，使用gatsby –version命令可以查看是否安装

npm install -g gatsby-cli

gatsby new website

使用develop参数即可启用gatsby服务

gatsby develop

进入到8000端口后即可访问默认的页面，不过本文章是创建个人博客

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

C:.
├─content
│  └─blog
│      ├─hello-world
│      ├─my-second-post
│      └─new-beginnings
├─src
│  ├─components
│  ├─images
│  ├─pages
│  └─templates
└─static

content下主要是markdown文件，但如果要被识别为blog还需要在blog里创建markdown文件

C:.
├─hello-world
│      index.md
│      salty_egg.jpg
│
├─my-second-post
│      index.md
│
└─new-beginnings
        index.md

每个markdown文件的前几行都会有用3个横杠抱起来的内容，这个就是Front-matter格式，博客的信息都会从这里获取，title是博客的标题，date是发布时间，description是描述，其中时间必须遵守正确的格式

---
title: "如何使用Gatsby创建自己的博客"
date: 2022-09-28T11:16:00+0800
categories: javascript
---

现在来介绍如何使用GitHub的pages服务，首先需要在项目下安装gh-pages

npm install gh-pages --save-dev

在项目的gatsby的config文件中添加pathPrefix，这里选择没前缀

module.exports = {
  pathPrefix: "/"
}

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

进入到项目的setting页面，选择左侧的pages，将分支选为gh-pages这个分支