This REPO contains the latest example code from the Gatsby / Strapi Video Tutorial Series. You can review the code directly, within the following directories.
NOTE: This is the BETA version of Strapi, ALPHA is not being maintained.
Code examples for the folder "cms". Path: ./tutorial/cms
<- Strapi Project
Code examples for the folder "blog". Path: ./tutorial/blog
. <- Gatsby Project
Create a folder, e.g. ./my-project
and git clone
this repo.
cd my-project
git clone https://github.com/strapi/strapi-heroku-cms-demo.git
From your command line, issue the following commands in order to install this Strapi and Gatsby project:
Path: ./my-project/
git clone git@github.com:strapi/strapi-heroku-cms-demo.git
cd strapi-heroku-cms-demo
cd cms
npm install
strapi build
Once 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):
content
-> Scroll down and toggle Display as WYSIWYG to ON
.Test you local API routes
You will need to have a Heroku account, and the Heroku CLI installed. Heroku install instructions
Do these steps to upload your Strapi project to Heroku:
heroku login
git init
git add .
git commit -am "Initial Commit"
heroku create my-uniquely-named-strapi-project
heroku addons:create heroku-postgresql:hobby-dev
heroku config
heroku config:set DATABASE_USERNAME=example
heroku config:set DATABASE_PASSWORD=example
heroku config:set DATABASE_HOST=example.compute-2.amazonaws.com
heroku config:set DATABASE_PORT=5432
heroku config:set DATABASE_NAME=example
git push heroku master
Open your app project, and redo these steps to match your Development Environment:
Create a User: Under CONTENT TYPES -> Users - add a user.
Set WYIWYG to Visible: Under PLUGINS -> Content Manager -> Article -> [Tab] Edit View(Settings) -> Click on content
-> Scroll down and toggle Display as WYSIWYG to ON
.
Allow API Access: Under PLUGINS -> Roles & Permissions -> Public -> Article (check find and findone), User (check find and findone)
Enter your Cloudinary Credentials: Under PLUGINS -> FILES UPLOAD - COGWHEEL
Add Content: Under CONTENT TYPES -> Articles -> add content.
After you add content, you can go ahead and follow the next steps to create the Gatsby part of the project.
Open a new tab in your command line, and navigate to ./strapi-heroku-cms-demo/blog/
:
Path: ./strapi-heroku-cms-demo/blog
npm install
gatsby develop
You can now check to see if Gatsby is running http://localhost:8000.
You will need to create a separate repo to push just the Gatsby part of the project and which will link to Netlify.
git init
git add .
git commit -m "first commit"
git remote add origin git@github.com:YOUR-NAME/YOUR-NEW-EMPTY-REPO.git
git push -u origin master
Locate this code and replace the URL to match the URL from your Heroku install:
Path: ./blog/gatsby-config.js
{
resolve: `gatsby-source-strapi`,
options: {
apiURL: process.env.DEPLOY_URL
? "https://YOUR-APP-URL.herokuapp.com"
: "http://localhost:1337",
contentTypes: [`article`, `user`],
queryLimit: 1000,
},
},
netlify login
.You will need to link netlify to this repo. Use the netlify init to do so.
netlify init
After configuring Netlify (see tutorial), you need to commit all the changes:
Commit these changes:
git add .
git commit -m "git commit -m "netlify config settings files"
git push
netlify open
The last step is to set-up the Netlify Webhook URL so it updates:
From your App, go to: Settings -> Build & deploy -> Continuous deployment -> Build hooks
Change the staticWebsiteBuildURL variable found in custom.json
.
These changes occur on your Strapi Project.
Path: ./cms/config/environments/production/custom.json
Replace the link with your link for the staticWebsiteBuildURL
Commit these changes:
git add .
git commit -m "Add webhook support"
git push heroku master
You are now ready to test and play with this installation. You can build or change this.
NOTE: You have NOT created a Repo for the Strapi part of the project, but this is highly recommended.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。