I am trying to create a static site using gatsby which support two languages, my wish is all the content would be handle by markdown files.
I started with the plugin-gatsby-intl using this https://www.gatsbyjs.org/packages/gatsby-plugin-intl/ -work great.
but i can not figure out how to use markdown, I guess because the gatsby-plugin-intl change the paths. when i try to go to localhost:8000/blog it changes to localhost:8000/en/blog, and raise an error that in the template that the graphql query returned null.
I understand the problem but I cant manage to understand how to solve it. I guess I need to make 2 markdowns file one for each lang and change the gatsby-node.js to manage correctly the paths but not sure how to do it. The only information i found online was https://hiddentao.com/archives/2019/05/07/building-a-multilingual-static-site-with-gatsby but after following his steps, I does not work
will appreciate any help
my gatsby-node.js:
const path = require(`path`)
exports.createPages = async ({ actions, graphql, reporter }) => {
const { createPage } = actions
const blogPostTemplate = path.resolve(`src/templates/post.js`)
const result = await graphql(`
{
allMarkdownRemark {
edges {
node {
frontmatter {
path
}
}
}
}
}
`)
// Handle errors
if (result.errors) {
reporter.panicOnBuild(`Error while running GraphQL query.`)
return
}
result.data.allMarkdownRemark.edges.forEach(({ node }) => {
console.log("path:")
console.log(node.frontmatter.path)
createPage({
path: node.frontmatter.path,
component: blogPostTemplate,
context: {}, // additional data can be passed via context
})
})
}
my template:
// src/templates/post.js
import React from "react"
import { graphql } from "gatsby"
export default function Template({
// this prop will be injected by the GraphQL query below.
data, })
{
console.log(data)
const { markdownRemark } = data // data.markdownRemark holds your post data
const { frontmatter, html } = markdownRemark
return (
<div>
<h1>{frontmatter.title}</h1>
</div>
)
}
//$path which is a strings
export const pageQuery = graphql`
query ($path: String!) {
markdownRemark(frontmatter: { path: { eq: $path } }) {
html
frontmatter {
path
title
}
}
}
`
// )
// .then(res => {
// console.log("result")
// // console.log(pageQuery.data)
// })
and my blog.md:
---
path: "/blog"
date: "2019-05-04"
title: "My first blog post"
---
this is the my markdown
You can change redirect to false.