{"id":20349251,"url":"https://github.com/strapi/strapi-heroku-cms-demo","last_synced_at":"2025-09-21T16:16:41.440Z","repository":{"id":34776351,"uuid":"183438274","full_name":"strapi/strapi-heroku-cms-demo","owner":"strapi","description":"Repository for \"CMS\" from the Gatsby / Strapi Video Tuturial Series","archived":false,"fork":false,"pushed_at":"2023-01-11T01:38:26.000Z","size":41546,"stargazers_count":36,"open_issues_count":27,"forks_count":16,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-20T17:04:07.828Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/strapi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-25T13:18:12.000Z","updated_at":"2024-07-16T23:42:21.000Z","dependencies_parsed_at":"2023-01-15T09:15:16.545Z","dependency_job_id":null,"html_url":"https://github.com/strapi/strapi-heroku-cms-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/strapi%2Fstrapi-heroku-cms-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/strapi%2Fstrapi-heroku-cms-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/strapi%2Fstrapi-heroku-cms-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/strapi%2Fstrapi-heroku-cms-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/strapi","download_url":"https://codeload.github.com/strapi/strapi-heroku-cms-demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248502261,"owners_count":21114775,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-14T22:24:50.466Z","updated_at":"2025-09-21T16:16:36.416Z","avatar_url":"https://github.com/strapi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Strapi with Gatsby Video Tutorial Series\n\nThis REPO contains the latest example code from the [Gatsby / Strapi Video Tutorial Series](https://youtu.be/It4PRFJJaF0). You can review the code directly, within the following directories.\n\n**NOTE:** This is the **BETA** version of Strapi, **ALPHA** is not being maintained.\n\n-   Code examples for the folder \"cms\". `Path: ./tutorial/cms` \u003c- **Strapi Project**\n\n-   Code examples for the folder \"blog\". `Path: ./tutorial/blog`. \u003c- **Gatsby Project**\n\n## Instructions for cloning and using this repo locally\n\nCreate a folder, e.g. `./my-project` and `git clone` this repo.\n\n```bash\ncd my-project\ngit clone https://github.com/strapi/strapi-heroku-cms-demo.git\n```\n\n### Install this Strapi \u0026 Gatsby Project locally\n\nFrom your command line, issue the following commands in order to install **_this Strapi and Gatsby project_**:\n\nPath: `./my-project/`\n\n### Install the Strapi part of the Project\n\n```\ngit clone git@github.com:strapi/strapi-heroku-cms-demo.git\ncd strapi-heroku-cms-demo\ncd cms\nnpm install\nstrapi build\n```\n\nOnce installed, you will need to do a few steps to replicate the final production environment (this steps are done also when you first upload and install to Heroku or other production environment):\n\n-   Create a User: Under CONTENT TYPES -\u003e **Users** - add a user.\n-   Set WYIWYG to Visible: Under PLUGINS -\u003e **Content Manager** -\u003e Article -\u003e [Tab] Edit View(Settings) -\u003e Click on `content` -\u003e Scroll down and toggle **Display as WYSIWYG** to `ON`.\n-   Allow API Access: Under PLUGINS -\u003e **Roles \u0026 Permissions** -\u003e Public -\u003e Article (check **find** and **findone**), User (check **find** and **findone**)\n-   Enter your Cloudinary Credentials: Under PLUGINS -\u003e **FILES UPLOAD - COGWHEEL**\n-   Add Content: Under CONTENT TYPES -\u003e **Articles** -\u003e add content.\n\nTest you [local API routes](http://localhost:1337/articles)\n\n#### Upload to Heroku\n\nYou will need to have a Heroku account, and the Heroku CLI installed. [Heroku install instructions](https://strapi.io/documentation/3.0.0-beta.x/guides/deployment.html#heroku)\n\nDo these steps to upload your Strapi project to Heroku:\n\n-   Login to Heroku: `heroku login`\n-   Initilize Git:\n\n```\ngit init\ngit add .\ngit commit -am \"Initial Commit\"\n```\n\n-   Create a Heroku project (**with a unique name for the URL**)\n\n```\nheroku create my-uniquely-named-strapi-project\n```\n\n-   setup database configuration (**DO NOT CUT AND PASTE - USE OWN SETTINGS**)\n\n```\nheroku addons:create heroku-postgresql:hobby-dev\nheroku config\nheroku config:set DATABASE_USERNAME=example\nheroku config:set DATABASE_PASSWORD=example\nheroku config:set DATABASE_HOST=example.compute-2.amazonaws.com\nheroku config:set DATABASE_PORT=5432\nheroku config:set DATABASE_NAME=example\n```\n\n-   Push project to Heroku.\n\n```\ngit push heroku master\n```\n\n-   Open your app project, and redo these steps to match your **Development Environment**:\n\n-   Create a User: Under CONTENT TYPES -\u003e **Users** - add a user.\n-   Set WYIWYG to Visible: Under PLUGINS -\u003e **Content Manager** -\u003e Article -\u003e [Tab] Edit View(Settings) -\u003e Click on `content` -\u003e Scroll down and toggle **Display as WYSIWYG** to `ON`.\n-   Allow API Access: Under PLUGINS -\u003e **Roles \u0026 Permissions** -\u003e Public -\u003e Article (check **find** and **findone**), User (check **find** and **findone**)\n-   Enter your Cloudinary Credentials: Under PLUGINS -\u003e **FILES UPLOAD - COGWHEEL**\n-   Add Content: Under CONTENT TYPES -\u003e **Articles** -\u003e add content.\n\nAfter you add content, you can go ahead and follow the next steps to create the Gatsby part of the project.\n\n### Install the Gatsby part of the Project\n\nOpen a new tab in your command line, and navigate to `./strapi-heroku-cms-demo/blog/`:\n\n`Path: ./strapi-heroku-cms-demo/blog`\n\n```\nnpm install\ngatsby develop\n```\n\nYou can now check to see if Gatsby is running [http://localhost:8000](http://localhost:8000).\n\n#### Push the Gatsby Project to a separate GitHub repo\n\nYou will need to create a separate repo to push just the Gatsby part of the project and which will link to Netlify.\n\n```\ngit init\ngit add .\ngit commit -m \"first commit\"\ngit remote add origin git@github.com:YOUR-NAME/YOUR-NEW-EMPTY-REPO.git\ngit push -u origin master\n```\n\n#### Modify the Gatsby-Config file\n\nLocate this code and replace the URL to match the URL from your Heroku install:\n\n`Path: ./blog/gatsby-config.js`\n\n```\n    {\n      resolve: `gatsby-source-strapi`,\n      options: {\n        apiURL: process.env.DEPLOY_URL\n          ? \"https://YOUR-APP-URL.herokuapp.com\"\n          : \"http://localhost:1337\",\n        contentTypes: [`article`, `user`],\n        queryLimit: 1000,\n      },\n    },\n```\n\n#### Configure Netlfiy\n\n-   Login to Netlify with `netlify login`.\n\nYou will need to link netlify to this repo. Use the **netlify init** to do so.\n\n```\nnetlify init\n```\n\nAfter configuring Netlify (see tutorial), you need to commit all the changes:\n\nCommit these changes:\n\n```\ngit add .\ngit commit -m \"git commit -m \"netlify config settings files\"\ngit push\nnetlify open\n```\n\n#### Set-up the Netlify WebHook URL\n\nThe last step is to set-up the Netlify Webhook URL so it updates:\n\n-   From your App, go to: Settings -\u003e Build \u0026 deploy -\u003e Continuous deployment -\u003e Build hooks\n\n    -   Click Add build hook\n    -   Give your app a build hook name, e.g. strapiUpdate\n    -   Save it and then copy the issued URL to the clipboard\n\n-   Change the **staticWebsiteBuildURL** variable found in `custom.json`.\n\nThese changes occur on your **Strapi Project**.\n\n`Path: ./cms/config/environments/production/custom.json`\n\nReplace the link with your link for the **staticWebsiteBuildURL**\n\nCommit these changes:\n\n```\ngit add .\ngit commit -m \"Add webhook support\"\ngit push heroku master\n```\n\nYou are now ready to test and play with this installation. You can build or change this.\n\n**NOTE:** You have NOT created a Repo for the Strapi part of the project, but this is highly recommended.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstrapi%2Fstrapi-heroku-cms-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstrapi%2Fstrapi-heroku-cms-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstrapi%2Fstrapi-heroku-cms-demo/lists"}