关于gatsby:使用-Github-Action-将-Gatsby-站点部署到-Github-Pages

集体博客是基于 Gatsby 搭建的,之前曾经利用 Github Action 部署在 Netlify 和 Vercel 上。本着不节约 xxx.github.io 这个域。这次把 build 好的构建产物间接推到 gh-pages 分支 背景因为 blog 源码和 构建产物可能不在同一个仓库,因而可能呈现两种情景。 1.源码和构建产物共用一个仓库,别离对应不同的分支(master和gh-pages)2.源码和构建产物别离在不同的仓库,别离对应不同仓库的不同分支的分支- person-blog 的 master 对应blog源码- xx.github.io 的 master 或者 gh-pages 对应源码的构建产物状况一必须开源,状况二多了更多的可能,当然我是第二种状况 筹备生成 access tokensTokens you have generated that can be used to access the GitHub API.生成集体账号调配的 github api 权限列表的 token 待用。这里只生成了对开源仓库的操作权限 在 xx.github.io 的 secret 中填入 acess token name对应secret name待用,value对应access token 在源码仓库新建 github action 的 workflow workflow这里间接在GitHub Action Marketplace 市场中找到了 Gatsby Publish),批改后的模板如下: ...

September 6, 2021 · 1 min · jiezi

Gatsby极速入门添加上一页下一页功能完结篇

1.调整gatsby-node 这个就简单了,打开gatsby-node.js,增加代码如下: const path = require("path");exports.createPages = ({ actions, graphql }) => { const { createPage } = actions const blogPostTemplate = path.resolve(`src/templates/blogPost.js`) return graphql(` { allMarkdownRemark { edges { node { frontmatter { path, title, tags } } } } } `).then(result => { if (result.errors) { return Promise.reject(result.errors) } const posts = result.data.allMarkdownRemark.edges; createTagPages(createPage, posts); posts.forEach(({ node }, index) => { const path = node.frontmatter.path; const title = node.frontmatter.title; createPage({ title, path, component: blogPostTemplate, context: { pathSlug: path, //这里是新增加的 prev: index === 0 ? null : posts[index - 1].node, next: index === (posts.length - 1) ? null : posts[index + 1].node }, // additional data can be passed via context }) }) })}2.调整blogPost.js ...

June 6, 2019 · 1 min · jiezi