I have an index route with a view posts link. On the posts page the posts are all showing the title links but using the netflify CMS today when I was writing another blog post I noticed now the posts page shows the individual post links to localhost:8000/blog/blog/{the-post-name}. If I remove one of the 'blog' parts from the url the associated post loads correctly. I just do not understand why this is occurring as the site was working fine earlier.
The issue seems to be related to {node.fields.slug} incorrectly linking
Any help is appreciated!
gatsby-config
module.exports = {
siteMetadata: {
// edit below
title: `Front-end Developer`,
author: `Alex Virdee`,
description: `A starter personal blog with styled components, dark mode, and Netlify CMS.`,
siteUrl: `https://hungry-bassi-27b875.netlify.app/`,
social: {
twitter: `alex_virdee`,
},
},
plugins: [
`gatsby-plugin-netlify-cms`,
`gatsby-plugin-styled-components`,
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
`gatsby-plugin-offline`,
`gatsby-plugin-react-helmet`,
`gatsby-plugin-feed-mdx`,
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/content/blog`,
name: `blog`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/content/assets`,
name: `assets`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `img`,
path: `${__dirname}/static`
}
},
{
resolve: `gatsby-plugin-mdx`,
options: {
extensions: [".mdx", ".md"],
gatsbyRemarkPlugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 590,
},
},
{
resolve: `gatsby-remark-responsive-iframe`,
options: {
wrapperStyle: `margin-bottom: 1.0725rem`,
},
},
{
resolve: `gatsby-remark-vscode`,
},
{
resolve: `gatsby-remark-copy-linked-files`,
},
{
resolve: `gatsby-remark-smartypants`,
},
],
plugins: [`gatsby-remark-images`],
},
},
{
resolve: `gatsby-plugin-google-analytics`,
options: {
// edit below
// trackingId: `ADD YOUR TRACKING ID HERE`,
},
},
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `Gatsby Starter Blog`,
short_name: `GatsbyJS`,
start_url: `/`,
background_color: `#ffffff`,
theme_color: `#663399`,
display: `minimal-ui`,
// edit below
icon: `content/assets/gatsby-icon.png`,
},
},
{
resolve: `gatsby-plugin-typography`,
options: {
pathToConfigModule: `src/utils/typography`,
},
},
],
}
gatsby-node
const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)
exports.createPages = ({ graphql, actions }) => {
const { createPage } = actions
const blogPost = path.resolve(`./src/templates/blog-post.js`)
return graphql(
`
{
allMdx(
sort: { fields: [frontmatter___date], order: DESC }
limit: 1000
) {
edges {
node {
fields {
slug
}
frontmatter {
title
}
}
}
}
}
`
).then(result => {
if (result.errors) {
throw result.errors
}
// Create blog posts pages.
const posts = result.data.allMdx.edges
posts.forEach((post, index) => {
const previous = index === posts.length - 1 ? null : posts[index + 1].node
const next = index === 0 ? null : posts[index - 1].node
createPage({
path: `blog${post.node.fields.slug}`,
component: blogPost,
context: {
slug: post.node.fields.slug,
previous,
next,
},
})
})
return null
})
}
exports.onCreateNode = ({ node, actions, getNode }) => {
const { createNodeField } = actions
if (node.internal.type === `Mdx`) {
const value = createFilePath({ node, getNode })
createNodeField({
name: `slug`,
node,
value,
})
}
}
layout.js
import React from "react"
import { Link } from "gatsby"
import styled from "styled-components"
import { rhythm, scale } from "../utils/typography"
class Layout extends React.Component {
render() {
const { location, title, children } = this.props
const rootPath = `${__PATH_PREFIX__}/`
const blogPath = `${__PATH_PREFIX__}/blog/`
let header
if (location.pathname === rootPath || location.pathname === blogPath) {
header = (
<h1
style={{
...scale(1.4),
marginBottom: rhythm(1.2),
marginTop: 0,
}}
>
<Link
style={{
boxShadow: `none`,
textDecoration: `none`,
color: `inherit`,
}}
to={location.pathname === blogPath ? `/blog/` : `/`}
>
{title}
</Link>
</h1>
)
} else {
header = (
<h3
style={{
fontFamily: `Montserrat, sans-serif`,
marginTop: 0,
}}
>
<Link
style={{
boxShadow: `none`,
textDecoration: `none`,
color: `inherit`,
}}
to={`/blog/`}
>
{title}
</Link>
</h3>
)
}
return (
<Wrapper>
<div
style={{
marginLeft: `auto`,
marginRight: `auto`,
maxWidth: rhythm(24),
padding: `${rhythm(1.5)} ${rhythm(3 / 4)}`,
}}
>
<header>{header}</header>
<main>{children}</main>
</div>
<Footer>
Built by
{` `}
Alex Virdee © {new Date().getFullYear()}
</Footer>
</Wrapper>
)
}
}
const Wrapper = styled.div`
min-height: 100vh;
`
const Footer = styled.footer`
text-align: center;
margin: 24px;
`
export default Layout
Blog page that shows the links to individual posts
import React from "react"
import { Link, graphql } from "gatsby"
import Bio from "../components/bio"
import Layout from "../components/layout"
import SEO from "../components/seo"
import { rhythm } from "../utils/typography"
import Button from "../components/button"
class Blog extends React.Component {
render() {
const { data } = this.props
const siteTitle = data.site.siteMetadata.title
const posts = data.allMdx.edges
return (
<Layout location={this.props.location} title={siteTitle}>
<SEO title="All posts" />
<Bio />
<div style={{ margin: "20px 0 40px" }}>
{posts.map(({ node }) => {
const title = node.frontmatter.title || node.fields.slug
return (
<div key={node.fields.slug}>
<h3
style={{
marginBottom: rhythm(1 / 4),
}}
>
<Link
style={{ boxShadow: `none` }}
to={`blog${node.fields.slug}`}
>
{title}
</Link>
</h3>
<small>{node.frontmatter.date}</small>
<p
dangerouslySetInnerHTML={{
__html: node.frontmatter.description || node.excerpt,
}}
/>
</div>
)
})}
</div>
<Link to="/">
<Button marginTop="15px">Go Home</Button>
</Link>
</Layout>
)
}
}
export default Blog
export const pageQuery = graphql`
query {
site {
siteMetadata {
title
}
}
allMdx(sort: { fields: [frontmatter___date], order: DESC }) {
edges {
node {
excerpt
fields {
slug
}
frontmatter {
date(formatString: "MMMM DD, YYYY")
title
description
}
}
}
}
}
`