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

目录
相关文章
一键自动化博客发布工具,用过的人都说好(cnblogs篇)
使用一键自动化博客发布工具blog-auto-publishing-tools把博客发布到cnblogs上。
|
1月前
|
JavaScript 前端开发 容器
如何使用Contentlayer和Tocbot创建博客网站目录?
如何使用Contentlayer和Tocbot创建博客网站目录?
38 0
|
6月前
|
前端开发 Cloud Native 安全
简单使用 Hugo 博客
简单使用 Hugo 博客
|
9月前
|
安全 JavaScript Serverless
基于函数计算快速搭建Vuepress博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Vuepress博客。
84 0
|
存储 SQL JSON
使用 NextJS 和 TailwindCSS 重构我的博客
这是笔者第三次重构博客应用。本文主要是笔者记录重构博客所用的知识和记录,希望以后每周或者每两周能够有一篇文章,记录和总结知识。
1132 0
|
JavaScript 前端开发 开发工具
VuePress 手摸手教你搭建一个类Vue文档风格的技术文档/博客
VuePress是尤大为了支持 Vue 及其子项目的文档需求而写的一个项目,VuePress界面十分简洁,并且非常容易上手,一个小时就可以将项目架构搭好。现在已经有很多这种类型的文档,如果你有写技术文档的项目的需求,VuePress绝对可以成为你的备选项之一。 游泳、健身了解一下:博客、前端积累文档、公众号、GitHub VuePress特性: 为技术文档而优化的 内置 Markdown 拓展 在 Markdown 文件中使用 Vue 组件的能力 Vue 驱动的自定义主题系统 自动生成 Service Worker Google Analytics 集成 基于 Git 的 “最后
591 0
VuePress 手摸手教你搭建一个类Vue文档风格的技术文档/博客
|
JavaScript 程序员 开发者
转载阿里开源框架 Egg.js 文档被告知侵权,原作者:难道我才是那个恶人?
2018 年 4 月 5 日,阿里开源的企业级 Node.js 框架 Egg.js 核心开发者“天猪”在知乎上发布了一篇帖子《当 Egg 遇到 TypeScript,收获茶叶蛋一枚》。文章发布后反响不错,开发者希望可以直接集成到官方文档中。因此,在当年 4 月 16 日,天猪也将此发到了官方仓库。
200 0
转载阿里开源框架 Egg.js 文档被告知侵权,原作者:难道我才是那个恶人?
|
JavaScript 前端开发 API
做个开源博客学习Vite2 + Vue3 (四)实现博客功能
Composition API,就是组合API的意思,那么是不是应该把js代码分离出来,做成独立的管理类的形式呢?
157 0
做个开源博客学习Vite2 + Vue3 (四)实现博客功能
|
JavaScript
做个开源博客学习Vite2 + Vue3 (三)博客设计和代码设计
项目搭建好了之后是不是可以编码了呢? 等等不要着急,我们是不是应该先设计一下?比如博客的功能等?
109 0
做个开源博客学习Vite2 + Vue3 (三)博客设计和代码设计
|
运维 监控 Serverless
基于函数计算快速搭建Vuepress博客-3
基于函数计算快速搭建Vuepress博客-3
127 0