SEO and Configurable basePath

README.md

@@ -59,7 +59,6 @@ Edit siteMeta data in [`/src/gatsby-config.js`](https://github.com/ryanwiemer/ga
     description: // Description of the website
       'A starter template to build amazing static websites with Gatsby, Contentful and Netlify',
     siteUrl: 'https://gcn.netlify.com', // Website URL. Do not include trailing slash
-    twitter: '', // Author's twitter username for SEO
     image: '/images/share.jpg', // Path to default image for SEO
     menuLinks: [ // The links used in the top menu
       {
@@ -75,12 +74,20 @@ Edit siteMeta data in [`/src/gatsby-config.js`](https://github.com/ryanwiemer/ga
         slug: '/contact/',
       },
     ],
-    postsPerHomepage: 7, // Number of posts on the homepage
-    postsPerPage: 6, // Number of posts used on any other pagination
+    postsPerFirstPage: 7, // Number of posts on the first page
+    postsPerPage: 6, // Number of posts used on all other pages
+    /*
+      Root URL for posts and tags
+      For example: 'blog' will result in:
+        - www.example.com/blog/
+        - www.example.com/blog/post-name/
+        - www.example.com/blog/tag/tag-name/
+    */
+    basePath: '/', // Defaults to the homepage
   }
 ```
 
-**Note:** If you do not see your changes reflected when developing locally you may need to run `yarn run clean` and restart the development server.
+**Note:** If you do not see your changes reflected when developing locally you may need to run `yarn clean` followed by restarting the server via `yarn develop`.
 
 ### Theme UI
 

gatsby-config.js

@@ -21,7 +21,6 @@ module.exports = {
     description:
       'A starter template to build amazing static websites with Gatsby, Contentful and Netlify',
     siteUrl: 'https://gcn.netlify.com',
-    twitter: '',
     image: '/images/share.jpg',
     menuLinks: [
       {
@@ -37,8 +36,9 @@ module.exports = {
         slug: '/contact/',
       },
     ],
-    postsPerHomepage: 7,
+    postsPerFirstPage: 7,
     postsPerPage: 6,
+    basePath: '/',
   },
   plugins: [
     `gatsby-plugin-emotion`,

package.json

@@ -1,7 +1,7 @@
 {
   "name": "gatsby-starter-gcn",
   "description": "A starter template to build amazing static websites with Gatsby, Contentful and Netlify",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "repository": "https://github.com/ryanwiemer/gatsby-starter-gcn",
   "author": "Ryan Wiemer <ryan@ryanwiemer.com>",
   "dependencies": {

src/components/Card.js

@@ -69,7 +69,7 @@ const Card = ({ slug, heroImage, title, publishDate, body, ...props }) => {
     <>
       {heroImage && body && (
         <Post featured={props.featured}>
-          <Link to={`/${slug}/`}>
+          <Link to={`${props.basePath}/${slug}/`}>
             <StyledImg fluid={heroImage.fluid} backgroundColor={'#eeeeee'} />
             <Title>{title}</Title>
             <Date>{publishDate}</Date>

src/components/Pagination.js

@@ -75,8 +75,8 @@ const Pagination = props => {
   function changePage(e) {
     navigate(
       e.target.value
-        ? `${props.context.paginationPrefix}/${e.target.value}`
-        : `${props.context.paginationPrefix}/`
+        ? `${props.context.paginationPath}/${e.target.value}`
+        : `${props.context.paginationPath}/`
     )
   }
 

src/components/PostLinks.js

@@ -41,12 +41,14 @@ const PostLinks = props => {
     <Wrapper>
       <Box>
         {props.previous && (
-          <PreviousLink to={`/${props.previous.slug}/`}>
+          <PreviousLink to={`${props.basePath}/${props.previous.slug}/`}>
             &#8592; Prev
           </PreviousLink>
         )}
         {props.next && (
-          <NextLink to={`/${props.next.slug}/`}>Next &#8594;</NextLink>
+          <NextLink to={`${props.basePath}/${props.next.slug}/`}>
+            Next &#8594;
+          </NextLink>
         )}
       </Box>
     </Wrapper>

src/components/SEO.js

@@ -2,35 +2,33 @@ import React from 'react'
 import Helmet from 'react-helmet'
 import { useStaticQuery, graphql } from 'gatsby'
 
-const SEO = ({ title, description, image, slug }) => {
+const SEO = ({ title, description, image }) => {
   const { site } = useStaticQuery(
     graphql`
       query {
         site {
           siteMetadata {
             title
             description
-            siteUrl
             image
-            twitter
+            siteUrl
           }
         }
       }
     `
   )
 
   const defaultImage = site.siteMetadata.siteUrl + site.siteMetadata.image
-  const defaultUrl = site.siteMetadata.siteUrl
   const metaDescription = description || site.siteMetadata.description
   const metaImage = image || defaultImage
-  const metaUrl = slug ? `${defaultUrl}/${slug}` : defaultUrl
 
   return (
     <Helmet
       htmlAttributes={{
         lang: `en`,
       }}
       title={title}
+      defaultTitle={site.siteMetadata.title}
       titleTemplate={`%s | ${site.siteMetadata.title}`}
     >
       <meta charSet="utf-8" />
@@ -41,16 +39,11 @@ const SEO = ({ title, description, image, slug }) => {
 
       {/* OpenGraph tags */}
       <meta property="og:title" content={title} />
-      <meta property="og:url" content={metaUrl} />
       <meta property="og:image" content={metaImage} />
       <meta property="og:description" content={metaDescription} />
 
       {/* Twitter Card tags */}
       <meta name="twitter:card" content="summary_large_image" />
-      <meta
-        name="twitter:creator"
-        content={site.siteMetadata.twitter ? site.siteMetadata.twitter : ''}
-      />
       <meta name="twitter:title" content={title} />
       <meta name="twitter:image" content={metaImage} />
       <meta name="twitter:description" content={metaDescription} />

src/components/TagList.js

@@ -32,7 +32,7 @@ const TagList = props => {
     <List>
       {props.tags.map(tag => (
         <Tag key={tag.id}>
-          <Link to={`/tag/${tag.slug}/`}>{tag.title}</Link>
+          <Link to={`${props.basePath}/tag/${tag.slug}/`}>{tag.title}</Link>
         </Tag>
       ))}
     </List>

src/gatsby/node/createPages.js

@@ -6,62 +6,74 @@ const { paginate } = require(`gatsby-awesome-pagination`)
 module.exports = async ({ graphql, actions }) => {
   const { createPage } = actions
 
+  const basePath = config.siteMetadata.basePath || '/'
+
   // Create a page for each "post"
   const postsQuery = await graphql(query.data.posts)
   const posts = postsQuery.data.allContentfulPost.edges
   posts.forEach((post, i) => {
     const next = i === posts.length - 1 ? null : posts[i + 1].node
     const prev = i === 0 ? null : posts[i - 1].node
+
     createPage({
-      path: `/${post.node.slug}/`,
+      path: `${basePath === '/' ? '' : basePath}/${post.node.slug}/`,
       component: path.resolve(`./src/templates/post.js`),
       context: {
         slug: post.node.slug,
+        basePath: basePath === '/' ? '' : basePath,
         prev,
         next,
       },
     })
   })
 
-  // Create a page containing all "posts" and paginate. This is usually the index page
+  // Create a page containing all "posts" and paginate.
   paginate({
     createPage,
     component: path.resolve(`./src/templates/posts.js`),
     items: posts,
-    itemsPerFirstPage: config.siteMetadata.postsPerHomepage,
-    itemsPerPage: config.siteMetadata.postsPerPage,
-    pathPrefix: '/',
+    itemsPerFirstPage: config.siteMetadata.postsPerFirstPage || 7,
+    itemsPerPage: config.siteMetadata.postsPerPage || 6,
+    pathPrefix: basePath,
     context: {
-      paginationPrefix: '/',
+      basePath: basePath === '/' ? '' : basePath,
+      paginationPath: basePath === '/' ? '' : `/${basePath}`,
     },
   })
 
-  // Create a page for each "page"
-  const pagesQuery = await graphql(query.data.pages)
-  const pages = pagesQuery.data.allContentfulPage.edges
-  pages.forEach((page, i) => {
-    createPage({
-      path: `/${page.node.slug}/`,
-      component: path.resolve(`./src/templates/page.js`),
-      context: {
-        slug: page.node.slug,
-      },
-    })
-  })
-
   // Create "tag" page and paginate
   const tagsQuery = await graphql(query.data.tags)
   const tags = tagsQuery.data.allContentfulTag.edges
+
   tags.forEach((tag, i) => {
+    const tagPagination =
+      basePath === '/'
+        ? `/tag/${tag.node.slug}`
+        : `/${basePath}/tag/${tag.node.slug}`
+
     paginate({
       createPage,
       component: path.resolve(`./src/templates/tag.js`),
       items: tag.node.post || [],
-      itemsPerPage: config.siteMetadata.postsPerPage,
-      pathPrefix: `tag/${tag.node.slug}`,
+      itemsPerPage: config.siteMetadata.postsPerPage || 6,
+      pathPrefix: tagPagination,
       context: {
         slug: tag.node.slug,
-        paginationPrefix: `tag/${tag.node.slug}`,
+        basePath: basePath === '/' ? '' : basePath,
+        paginationPath: tagPagination,
+      },
+    })
+  })
+
+  // Create a page for each "page"
+  const pagesQuery = await graphql(query.data.pages)
+  const pages = pagesQuery.data.allContentfulPage.edges
+  pages.forEach((page, i) => {
+    createPage({
+      path: `/${page.node.slug}/`,
+      component: path.resolve(`./src/templates/page.js`),
+      context: {
+        slug: page.node.slug,
       },
     })
   })

src/hooks/use-site-metadata.js

@@ -9,7 +9,6 @@ export const useSiteMetadata = () => {
             title
             description
             siteUrl
-            twitter
             image
             menuLinks {
               name

src/pages/contact.js

@@ -8,11 +8,7 @@ import SEO from '../components/SEO'
 const Contact = ({ data }) => {
   return (
     <Layout>
-      <SEO
-        title="Contact"
-        description="Contact description goes here"
-        slug="contact"
-      />
+      <SEO title="Contact" description="Contact description goes here" />
       <Container>
         <PageTitle>Contact</PageTitle>
         <ContactForm />

src/templates/page.js

@@ -7,7 +7,7 @@ import PageBody from '../components/PageBody'
 import SEO from '../components/SEO'
 
 const PageTemplate = ({ data }) => {
-  const { title, metaDescription, slug, body } = data.contentfulPage
+  const { title, metaDescription, body } = data.contentfulPage
   return (
     <Layout>
       <SEO
@@ -17,7 +17,6 @@ const PageTemplate = ({ data }) => {
             ? metaDescription.internal.content
             : body.childMarkdownRemark.excerpt
         }
-        slug={slug}
       />
       <Container>
         <PageTitle>{title}</PageTitle>

src/templates/post.js

@@ -13,7 +13,6 @@ const PostTemplate = ({ data, pageContext }) => {
   const {
     title,
     metaDescription,
-    slug,
     heroImage,
     body,
     publishDate,
@@ -22,6 +21,7 @@ const PostTemplate = ({ data, pageContext }) => {
 
   const previous = pageContext.prev
   const next = pageContext.next
+  const { basePath } = pageContext
 
   let ogImage
   try {
@@ -39,19 +39,18 @@ const PostTemplate = ({ data, pageContext }) => {
             ? metaDescription.internal.content
             : body.childMarkdownRemark.excerpt
         }
-        slug={slug}
         image={ogImage}
       />
       <Hero title={title} image={heroImage} height={'50vh'} />
       <Container>
-        {tags && <TagList tags={tags} />}
+        {tags && <TagList tags={tags} basePath={basePath} />}
         <PostDetails
           date={publishDate}
           timeToRead={body.childMarkdownRemark.timeToRead}
         />
         <PageBody body={body} />
       </Container>
-      <PostLinks previous={previous} next={next} />
+      <PostLinks previous={previous} next={next} basePath={basePath} />
     </Layout>
   )
 }
@@ -80,8 +79,6 @@ export const query = graphql`
         }
         ogimg: resize(width: 1800) {
           src
-          width
-          height
         }
       }
       body {