关于javascript:如何使用Gatsby创建自己的博客

首发于Enaium的集体博客

首先应用npm装置gatsby，应用gatsby –version命令能够查看是否装置

npm install -g gatsby-cli

应用new命令前面跟着目录名，即可创立一个gatsby我的项目

gatsby new website

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

gatsby develop

进入到8000端口后即可拜访默认的页面，不过本文章是创立集体博客

在创立我的项目时前面跟着一个github地址，这个是gatsby官网的一个博客模板

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

这个是我的项目的目录构造

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

content下次要是markdown文件，但如果要被辨认为blog还须要在blog里创立markdown文件

次要看blog里都有哪些文件，每个文件夹下都有一个index.md文件，这里会依据文件夹的名称来决定地址名是什么

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

这里能够间接在blog中创立markdown文件，地址名就是markdown文件名

每个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生成页面，随后用gh-pages将public的目录中所有文件推送到我的项目的gh-pages分支中，应用npm run deploy即可部署到GitHub中

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

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

如果须要没有本人的域名就把仓库设置为这个格局，留神的是GitHub的用户名而不是昵称，如果有本人域名那就让域名解析CNAME到这个地址中，并且在我的项目的static目录下创立CNAME文件，填入你的域名