Simple Gatsby.js Site with Google Sheets as Data Source – Upwork

Affiliate Dev

I would like to convert my WordPress site over to Gatsby.js and add functionality to use Google sheets as a data source (plugin available for this). My site is a blog site that mainly consist of about 70 posts and the homepage.
Here is the core Google sheets functionality I need (Example Google sheet will be provided).
1. Create Shortcodes in Google sheets
I would like to have a google sheet where I can create shortcodes that could be inserted into my markdown files and Gatsby.js would insert the value from google sheets.
Column A = shortcode name
Column B = HTML / markdown
2. Create / Edit Blog Posts from Google Sheets
I would like to be able to create/update entire blog posts from Google sheets. Some of the site will be created from markdown files so we need support for doing Markdown, markdown + google sheets and just google sheets.
Column A = HTML element (example: H1)
Column B = Value for column A
I imagine each blog post will have its own sheet.
3. Link Rotation Script from Google Sheets
On my site I have affiliate links that I would like to be able to control from Google sheets. In Google sheets I will create different links and assign a data-cta-group value. During Gatsby.js build I want a JS file to be generated from the Google sheet with all the link variations. The script will then work on the frontend during page load to replace the links that match the dta-cta-group with one of the variations from the script.
Here are possible plugins that could be used.
I would like for the design to be very basic just like my current site. I am trying to match the layout, fonts, headings etc of a article. I found this Gatsby.js theme which is based on that might be helpful.
I would like to use TailwindCSS and PurgeCSS if helpful.
Additional Gatsby.js Customizations
1. During build before static pages are output I need to have data attributes added to some link elements.
– Link Elements: All links that match a REGEX for the link URL.
Add the attribute "data-cta" this is the position of the link with all the matches (1,2,3 etc.) this will be recorded as "CTA:1", "CTA:2" etc.
2. Add Table of Contents plugin
3. Add Sitemap
4. Add SEO plugin and setup basic configuration. Including the basic article structured data markup and the FAQ markup (for example supporting the FAQ structured data markup when adding FAQ from google sheets)
I am looking for an experienced developer that I can work with for years to come.
Hourly Range: $25.00-$45.00

Posted On: September 21, 2021 10:13 UTC
Category: Front-End Development
Skills:Gatsby.js, React, JavaScript, Tailwind CSS, Web Design, CSS3, HTML, Google Sheets, Google APIs, Static Site Generator

Country: United States

click to apply

Leave a comment

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