关于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 文件，填入你的域名