5 |
6 |
3 |
4 |
5 |
6 |
](https://www.gatsbyjs.com/dashboard/deploynow?url=https://github.com/gatsbyjs/gatsby-starter-wordpress-blog)
74 |
75 |
76 |
--------------------------------------------------------------------------------
/content/assets/gatsby-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gatsbyjs/gatsby-starter-wordpress-blog/5b69e6d389f4a2f5c2349e3b4a33638693d017b6/content/assets/gatsby-icon.png
--------------------------------------------------------------------------------
/gatsby-browser.js:
--------------------------------------------------------------------------------
1 | // custom typefaces
2 | import "typeface-montserrat"
3 | import "typeface-merriweather"
4 |
5 | // normalize CSS across browsers
6 | import "./src/css/normalize.css"
7 |
8 | // custom CSS styles
9 | import "./src/css/style.css"
10 |
--------------------------------------------------------------------------------
/gatsby-config.js:
--------------------------------------------------------------------------------
1 | /**
2 | * 👋 Hey there!
3 | * This file is the starting point for your new WordPress/Gatsby site! 🚀
4 | * For more information about what this file is and does, see
5 | * https://www.gatsbyjs.com/docs/gatsby-config/
6 | *
7 | */
8 |
9 | module.exports = {
10 | /**
11 | * Adding plugins to this array adds them to your Gatsby site.
12 | *
13 | * Gatsby has a rich ecosystem of plugins.
14 | * If you need any more you can search here: https://www.gatsbyjs.com/plugins/
15 | */
16 | plugins: [
17 | {
18 | /**
19 | * First up is the WordPress source plugin that connects Gatsby
20 | * to your WordPress site.
21 | *
22 | * visit the plugin docs to learn more
23 | * https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-wordpress/README.md
24 | *
25 | */
26 | resolve: `gatsby-source-wordpress`,
27 | options: {
28 | // the only required plugin option for WordPress is the GraphQL url.
29 | url:
30 | process.env.WPGRAPHQL_URL ||
31 | `https://wpgatsbydemo.wpengine.com/graphql`,
32 | },
33 | },
34 |
35 | /**
36 | * We need this plugin so that it adds the "File.publicURL" to our site
37 | * It will allow us to access static url's for assets like PDF's
38 | *
39 | * See https://www.gatsbyjs.org/packages/gatsby-source-filesystem/ for more info
40 | */
41 | {
42 | resolve: `gatsby-source-filesystem`,
43 | options: {
44 | name: `assets`,
45 | path: `${__dirname}/content/assets`,
46 | },
47 | },
48 |
49 | /**
50 | * The following two plugins are required if you want to use Gatsby image
51 | * See https://www.gatsbyjs.com/docs/gatsby-image/#setting-up-gatsby-image
52 | * if you're curious about it.
53 | */
54 | `gatsby-transformer-sharp`,
55 | `gatsby-plugin-sharp`,
56 | `gatsby-plugin-image`,
57 | {
58 | // See https://www.gatsbyjs.com/plugins/gatsby-plugin-manifest/?=gatsby-plugin-manifest
59 | resolve: `gatsby-plugin-manifest`,
60 | options: {
61 | name: `Gatsby Starter WordPress Blog`,
62 | short_name: `GatsbyJS & WP`,
63 | start_url: `/`,
64 | background_color: `#ffffff`,
65 | theme_color: `#663399`,
66 | display: `minimal-ui`,
67 | icon: `content/assets/gatsby-icon.png`,
68 | },
69 | },
70 |
71 | // See https://www.gatsbyjs.com/plugins/gatsby-plugin-react-helmet/?=gatsby-plugin-react-helmet
72 | `gatsby-plugin-react-helmet`,
73 |
74 | /**
75 | * this (optional) plugin enables Progressive Web App + Offline functionality
76 | * To learn more, visit: https://gatsby.dev/offline
77 | */
78 | // `gatsby-plugin-offline`,
79 | ],
80 | }
81 |
--------------------------------------------------------------------------------
/gatsby-node.js:
--------------------------------------------------------------------------------
1 | const path = require(`path`)
2 | const chunk = require(`lodash/chunk`)
3 |
4 | // This is a simple debugging tool
5 | // dd() will prettily dump to the terminal and kill the process
6 | // const { dd } = require(`dumper.js`)
7 |
8 | /**
9 | * exports.createPages is a built-in Gatsby Node API.
10 | * It's purpose is to allow you to create pages for your site! 💡
11 | *
12 | * See https://www.gatsbyjs.com/docs/node-apis/#createPages for more info.
13 | */
14 | exports.createPages = async gatsbyUtilities => {
15 | // Query our posts from the GraphQL server
16 | const posts = await getPosts(gatsbyUtilities)
17 |
18 | // If there are no posts in WordPress, don't do anything
19 | if (!posts.length) {
20 | return
21 | }
22 |
23 | // If there are posts, create pages for them
24 | await createIndividualBlogPostPages({ posts, gatsbyUtilities })
25 |
26 | // And a paginated archive
27 | await createBlogPostArchive({ posts, gatsbyUtilities })
28 | }
29 |
30 | /**
31 | * This function creates all the individual blog pages in this site
32 | */
33 | const createIndividualBlogPostPages = async ({ posts, gatsbyUtilities }) =>
34 | Promise.all(
35 | posts.map(({ previous, post, next }) =>
36 | // createPage is an action passed to createPages
37 | // See https://www.gatsbyjs.com/docs/actions#createPage for more info
38 | gatsbyUtilities.actions.createPage({
39 | // Use the WordPress uri as the Gatsby page path
40 | // This is a good idea so that internal links and menus work 👍
41 | path: post.uri,
42 |
43 | // use the blog post template as the page component
44 | component: path.resolve(`./src/templates/blog-post.js`),
45 |
46 | // `context` is available in the template as a prop and
47 | // as a variable in GraphQL.
48 | context: {
49 | // we need to add the post id here
50 | // so our blog post template knows which blog post
51 | // the current page is (when you open it in a browser)
52 | id: post.id,
53 |
54 | // We also use the next and previous id's to query them and add links!
55 | previousPostId: previous ? previous.id : null,
56 | nextPostId: next ? next.id : null,
57 | },
58 | })
59 | )
60 | )
61 |
62 | /**
63 | * This function creates all the individual blog pages in this site
64 | */
65 | async function createBlogPostArchive({ posts, gatsbyUtilities }) {
66 | const graphqlResult = await gatsbyUtilities.graphql(/* GraphQL */ `
67 | {
68 | wp {
69 | readingSettings {
70 | postsPerPage
71 | }
72 | }
73 | }
74 | `)
75 |
76 | const { postsPerPage } = graphqlResult.data.wp.readingSettings
77 |
78 | const postsChunkedIntoArchivePages = chunk(posts, postsPerPage)
79 | const totalPages = postsChunkedIntoArchivePages.length
80 |
81 | return Promise.all(
82 | postsChunkedIntoArchivePages.map(async (_posts, index) => {
83 | const pageNumber = index + 1
84 |
85 | const getPagePath = page => {
86 | if (page > 0 && page <= totalPages) {
87 | // Since our homepage is our blog page
88 | // we want the first page to be "/" and any additional pages
89 | // to be numbered.
90 | // "/blog/2" for example
91 | return page === 1 ? `/` : `/blog/${page}`
92 | }
93 |
94 | return null
95 | }
96 |
97 | // createPage is an action passed to createPages
98 | // See https://www.gatsbyjs.com/docs/actions#createPage for more info
99 | await gatsbyUtilities.actions.createPage({
100 | path: getPagePath(pageNumber),
101 |
102 | // use the blog post archive template as the page component
103 | component: path.resolve(`./src/templates/blog-post-archive.js`),
104 |
105 | // `context` is available in the template as a prop and
106 | // as a variable in GraphQL.
107 | context: {
108 | // the index of our loop is the offset of which posts we want to display
109 | // so for page 1, 0 * 10 = 0 offset, for page 2, 1 * 10 = 10 posts offset,
110 | // etc
111 | offset: index * postsPerPage,
112 |
113 | // We need to tell the template how many posts to display too
114 | postsPerPage,
115 |
116 | nextPagePath: getPagePath(pageNumber + 1),
117 | previousPagePath: getPagePath(pageNumber - 1),
118 | },
119 | })
120 | })
121 | )
122 | }
123 |
124 | /**
125 | * This function queries Gatsby's GraphQL server and asks for
126 | * All WordPress blog posts. If there are any GraphQL error it throws an error
127 | * Otherwise it will return the posts 🙌
128 | *
129 | * We're passing in the utilities we got from createPages.
130 | * So see https://www.gatsbyjs.com/docs/node-apis/#createPages for more info!
131 | */
132 | async function getPosts({ graphql, reporter }) {
133 | const graphqlResult = await graphql(/* GraphQL */ `
134 | query WpPosts {
135 | # Query all WordPress blog posts sorted by date
136 | allWpPost(sort: { fields: [date], order: DESC }) {
137 | edges {
138 | previous {
139 | id
140 | }
141 |
142 | # note: this is a GraphQL alias. It renames "node" to "post" for this query
143 | # We're doing this because this "node" is a post! It makes our code more readable further down the line.
144 | post: node {
145 | id
146 | uri
147 | }
148 |
149 | next {
150 | id
151 | }
152 | }
153 | }
154 | }
155 | `)
156 |
157 | if (graphqlResult.errors) {
158 | reporter.panicOnBuild(
159 | `There was an error loading your blog posts`,
160 | graphqlResult.errors
161 | )
162 | return
163 | }
164 |
165 | return graphqlResult.data.allWpPost.edges
166 | }
167 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "gatsby-starter-wordpress-blog",
3 | "private": true,
4 | "description": "A starter for a blog powered by Gatsby and Markdown",
5 | "version": "1.0.0",
6 | "author": "Kyle Mathews 39 | Written by {author.firstName} 40 | {` `} 41 | {author?.description || null} 42 | {` `} 43 | {author?.twitter && ( 44 | 45 | You should follow them on Twitter 46 | 47 | )} 48 |
49 | )} 50 |You just hit a route that doesn't exist... the sadness.
15 |21 | No blog posts found. Add posts to your WordPress site and they'll 22 | appear here! 23 |
24 |{post.date}
37 | 38 | {/* if we have a featured image for this post let's display it */} 39 | {featuredImage?.data && ( 40 |