Final Draft (live)
Final Draft is Dorm Room Fund's go-to blog for all things student entrepreneruship.
- NodeJS application powered by the Next.JS framework.
- WordPress.com headless CMS backend.
- WPGraphQL plugin to power WordPress GraphQL endpoint.
- Apollo to retrieve and cache posts.
- Mailchimp for Newsletter subscription.
- Puppeteer for dynamic meta image generation.
├── apollo
│ ├── index.js # Exports apollo client
│ ├── parse.js # Functions to clean query responses
│ └── queries.js # GraphQL queries
├── components
│ ├── Layout.js # Layout wrapper. Handles header, content, footer, meta.
│ └── Newsletter.js # Mailchimp Newsletter CTA component
├── pages
│ ├── 404.js # 404 page
│ ├── _app.js
│ ├── _document.js
│ ├── api
│ │ └── meta.js # Renders dynamic meta image based on post slug
│ ├── index.js # Home page
│ ├── post
│ │ └── [slug].js # Individual post page
│ └── search.js # Search page
├── public
│ ├── brand # Brand assets
│ ├── favicon # Favicons
│ ├── fonts # Font files
│ └── vectors # Vector (SVG) assets
├── styles # Stylesheets
├── utils
│ └── index.js # Convenient hooks (useLocalStorage)
├── .env.local.sample # Environment variables
├── .gitignore
├── .prettierrc
├── README.md
├── custom.php # Custom PHP functions for WordPress.com headless CMS
├── jsconfig.json # Better absolute path configuration
├── package.json
└── yarn.lock
There are a few configuration details (in terms of setting up the headless WordPress.com CMS) that must be run through before testing locally or deploying.
- Install the WPGraphQL and wp-graphql-reading-time plugins on WordPress.
- Change the Permalink settings under
Settings > Permalinks
to aPost name
url structure. This is necessary to reference posts by their slug.
Because WordPress.com, unlike WordPress.org, does not allow editing source php files, a workaround is used for the following steps:
- Download the Twenty Seventeen (or any other) theme locally.
- Modify the
functions.php
file in the root of the Twenty Seventeen theme to include the required php custom functions fromcustom.php
. These can go anywhere in the file. - Compress the Twenty Seventeen folder into a single
.zip
file. - Upload the theme to WordPress and activate it.
For future maintainability, do note, WordPress.com does not allow you to overwrite the same theme. Thus, if you need to make multiple changes, you cannot keep reuploading the Twenty Seventeen theme. To bypass this, you must:
- Get the SFTP credentials for WordPress.com from the dashboard.
- Delete the
twentyseventeen
directory underwp-content/themes/
. - Now you can reupload your locally edited theme. Note: WordPress will still show Twenty Seventeen as active, but it isn't—it has already fallen back to another theme by this point.
Duplicate .env.local.sample
to .env.local
and replace NEXT_PUBLIC_WP_URL
and NEXT_PUBLIC_MAILCHIMP_POST_URL
with your headless WordPress CMS and Mailchimp list subscription form URLs. Then:
# Install dependencies
yarn
# Run locally
yarn dev
The following instructions are to deploy to Heroku.
# Add puppetter buildpack (first-time)
heroku buildpacks:add --index 1 https://github.com/jontewks/puppeteer-heroku-buildpack
# Add NodeJS buildpack (first-time)
heroku buildpacks:add --index 1 heroku/nodejs
# Push to Heroku
git push heroku master