Phoenix content management is a CMS (Content Management System) that allows you to edit website content on a React Website using Google Sheets and Firestore. This video shows how to edit website using Google spreadsheet.

This video shows how to authorize the CMS on the first use.

1. (00:20) Sign into your Google account.

2. (00:58) Open up the spreadsheet. Here you can sync up data to appear on the site.

3. (01:35) To edit text on the website, build out the component on the left side. In column B.

4. (02:15Note: When you run the script for the first time, you may have to authorize it. Keep this in mind when you authenticate, you’ll need to click a tiny blue line after clicking ‘Advanced’. Once that’s done, click ‘Update Section’ in the Phoenix tab.

5. (03:00) The text will immediately update the interface of your site. 

6. (04:13) We use Google Firebase to run the app and store data. You must be logged into your Google account to access it.

7. (05:22) In Firebase, go to the nav panel on the right and hit ‘Database’. This is how your text is registering in the database.

8. (05:48) In the Firebase nav panel go to the ‘Storage’. This is where all of your images are stored.

9. (06:20) To replace an image on your site, click the new image you want. Note: it’s important to always compress your images before uploading and I recommend

10. (07:15) A panel on the right will appear. Go to ‘File Location’ and copy the document URL then return to your Google spreadsheet.

11. (07:35) Find the image and paste the new URL. At the top of the spreadsheet hover over the ‘Phoenix’ tab and click ‘Update Section’. The new image will be on your site.

1. (00:20) To share a document with everyone in your organization, open the Google spreadsheet. In the top right corner hit ‘Share’. In the top right corner hit ‘Share’ and type in their email addresses. Make sure they can edit the document. Then hit ‘Done’. 

2. (00:42) If you want to make updates on your site, select the ‘content’ column and make the revisions. To save, go to the Phoenix tab at the top and hit ‘Update Section’.

3. (01:30) The first time you do this you’ll receive an authentication error like the one pictured below. Click ‘Advanced’. Scroll down and hit the ‘Firestore’ URL. Click ‘Allow’.

4. (03:28) To save the changes to the Google Firestore database, go back to the ‘Phoenix’ tab and hit ‘Update All’.

Categories: Tutorials


Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *