智能家居>> blog>> 返回
项目作者： dormroomfund

项目描述 ：
Final Draft is Dorm Room Fund's go-to blog for all things student entrepreneurship.
高级语言： JavaScript
项目地址: git://github.com/dormroomfund/blog.git
创建时间： 2020-11-06T16:21:22Z
项目社区：https://github.com/dormroomfund/blog
开源协议：GNU Affero General Public License v3.0
下载


Final Draft (live)

Final Draft is Dorm Room Fund’s go-to blog for all things student entrepreneruship.

General Architecture

  1. NodeJS application powered by the Next.JS framework.
  2. WordPress.com headless CMS backend.
  3. WPGraphQL plugin to power WordPress GraphQL endpoint.
  4. Apollo to retrieve and cache posts.
  5. Mailchimp for Newsletter subscription.
  6. Puppeteer for dynamic meta image generation.

Project structure

  1. ├── apollo
  2. │   ├── index.js # Exports apollo client
  3. │   ├── parse.js # Functions to clean query responses
  4. │   └── queries.js # GraphQL queries
  5. ├── components
  6. │   ├── Layout.js # Layout wrapper. Handles header, content, footer, meta.
  7. │   └── Newsletter.js # Mailchimp Newsletter CTA component
  8. ├── pages
  9. │   ├── 404.js # 404 page
  10. │   ├── _app.js
  11. │   ├── _document.js
  12. │   ├── api
  13. │   │   └── meta.js  # Renders dynamic meta image based on post slug
  14. │   ├── index.js # Home page
  15. │   ├── post
  16. │   │   └── [slug].js # Individual post page
  17. │   └── search.js # Search page
  18. ├── public
  19. │   ├── brand # Brand assets
  20. │   ├── favicon # Favicons
  21. │   ├── fonts # Font files
  22. │   └── vectors # Vector (SVG) assets
  23. ├── styles # Stylesheets
  24. ├── utils
  25. │   └── index.js # Convenient hooks (useLocalStorage)
  26. ├── .env.local.sample # Environment variables
  27. ├── .gitignore
  28. ├── .prettierrc
  29. ├── README.md
  30. ├── custom.php # Custom PHP functions for WordPress.com headless CMS
  31. ├── jsconfig.json # Better absolute path configuration
  32. ├── package.json
  33. └── yarn.lock

Prerequisites

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.

  1. Install the WPGraphQL and wp-graphql-reading-time plugins on WordPress.
  2. Change the Permalink settings under Settings > Permalinks to a Post 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:

  1. Download the Twenty Seventeen (or any other) theme locally.
  2. Modify the functions.php file in the root of the Twenty Seventeen theme to include the required php custom functions from custom.php. These can go anywhere in the file.
  3. Compress the Twenty Seventeen folder into a single .zip file.
  4. 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:

  1. Get the SFTP credentials for WordPress.com from the dashboard.
  2. Delete the twentyseventeen directory under wp-content/themes/.
  3. 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.

Run locally

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:

  1. # Install dependencies
  2. yarn
  4. # Run locally
  5. yarn dev

Deploy

The following instructions are to deploy to Heroku.

  1. # Add puppetter buildpack (first-time)
  2. heroku buildpacks:add --index 1 https://github.com/jontewks/puppeteer-heroku-buildpack
  4. # Add NodeJS buildpack (first-time)
  5. heroku buildpacks:add --index 1 heroku/nodejs
  7. # Push to Heroku
  8. git push heroku master

License

GNU Affero General Public License v3.0