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

简介: 首先使用npm安装gatsby,使用gatsby –version命令可以查看是否安装

首发于Enaium的个人博客


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

npm install -g gatsby-cli

使用new命令后面跟着目录名,即可创建一个gatsby项目

gatsby new website

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

gatsby develop

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

Snipaste_2022-09-28_09-38-35.png

在创建项目时后面跟着一个github地址,这个是gatsby官方的一个博客模板

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

Snipaste_2022-09-28_09-46-26.png

这个是项目的目录结构

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

目录
相关文章
|
前端开发 JavaScript API
【第43期】一文了解开源框架Gatsby
【第43期】一文了解开源框架Gatsby
256 0
|
Linux iOS开发 MacOS
brew - mac 下的 brew 切换为国内源
brew - mac 下的 brew 切换为国内源
4647 0
|
缓存 数据库 NoSQL
【后端面经】【缓存】33|缓存模式:缓存模式能不能解决缓存一致性问题?-02 Write Through + Write Back
【5月更文挑战第10天】`Write Through`是一种缓存策略,写操作仅需写入缓存,缓存负责更新数据库。异步版本可能丢失数据,而同步变种先写数据库再异步刷新缓存,减少丢数据风险。`Write Back`模式数据先写入缓存,过期时才写入数据库,可能导致数据丢失,但若使用Redis并确保高可用,可部分解决一致性问题。在特定条件下,如使用SETNX命令,能缓解一致性挑战。
262 0
【后端面经】【缓存】33|缓存模式:缓存模式能不能解决缓存一致性问题?-02 Write Through + Write Back
|
存储 对象存储
【阿里云OSS】You have no right to access this object because of bucket acl.
【阿里云OSS】You have no right to access this object because of bucket acl.
17861 1
【阿里云OSS】You have no right to access this object because of bucket acl.
|
数据安全/隐私保护
重装系统攻略
重装系统攻略
|
安全 Python
Elasticsearch 删除重复文档实现方式,你知道几个?
Elasticsearch 删除重复文档实现方式,你知道几个?
|
Linux
(Linux)forever安装和使用
forever安装和使用
644 1
|
前端开发 JavaScript API
blog-engine-07-gatsby 建极速网站和应用程序 基于React的最佳框架,具备性能、可扩展性和安全性。
探索多种博客引擎:Jekyll, Hugo, Hexo, Pelican, Gatsby, VuePress, Nuxt.js 和 Middleman。了解Gatsby,基于React的静态站点生成器,以其特性如React基础、静态生成、广泛插件支持、简便部署和现代开发流程脱颖而出。安装Gatsby需先安装Node.js,然后通过`gatsby-cli`创建新站点。开发涉及编写页面、本地开发、生成静态文件及部署。尽管Gatsby具有现代化和高性能优势,但也存在学习曲线和配置复杂性的挑战。
|
XML JavaScript 前端开发
【静态Web架构】静态站点生成器概述 Gatsby ,Hugo 和Jekyll对比
【静态Web架构】静态站点生成器概述 Gatsby ,Hugo 和Jekyll对比
|
数据安全/隐私保护 Unix 芯片
wpa_cli和wpa_supplicant使用,配置无线AP名和密码,静态ip地址
配置静态ip方法分享:通过串口命令行输入如下命令:     1. 添加无线网络接入点(AP) 及其 密码:# wpa_cli -p /data/misc/wpa_supplicantwpa_cli v0.
2475 0

热门文章

最新文章