Step 1: Building a Blog Site

This guide accompanies the video walk-through and will provide you with code snippets and commands used in the video.

In this video, Aaron configures his Content with blog data, then builds and deploys a Pages front-end for his blog.

Want to learn more?

If you want to see the finished code from the end of this section, clone the starter repo with git clone https://github.com/YextSolutions/pages-starter-react-blog and check out the blogs branch with git checkout blogs.

Before You Begin

Set up your Local Dev Environment

Before you begin, set up your local dev environment. Here are directions on installing dependencies for getting started with Pages.

Connect to Your Yext Account Locally

If you don’t have a Yext account and didn’t create a playground account with the local dev environment instructions, create a playground account . You will be pushing mock data to your sandbox account and connecting to it to help facilitate local development. Run the following command:

• If you are connecting to a sandbox (aka Playground) account, run:

  yext init -u sandbox <account_id>

• If you are connecting from a production account, run:

  yext init <account_id>

Walkthrough

Updated Step

Instead of following the video to clone this repo, we recommend you instead run:

yext pages new

Select “Blog Starter” as your starter repository. This will clone the repo and create a remote repository for you. Then cd into your project and continue following the video steps starting at 0:40.

0:20 Aaron clones the pages-starter-react-blog repository into a local directory. Clone the repo by running:

git clone https://github.com/YextSolutions/pages-starter-react-blog.git <YOUR_DIRECTORY>

Additional Step Not in Video

At this point, you should remove the existing remote origin. You will be replacing this with your new blank repo later on:

git remote rm origin

0:29 cd into your project and install dependencies:

cd <YOUR PROJECT>
npm install

0:40 Build your site and run it locally:

npm run dev

Click on the home and blog-post pages from the local development landing page to confirm that everything was installed correctly. Run CTRL+C to stop running local dev.

1:40 Seed your account with data:

yext resources apply platform-config

Choose yes to overwrite the configuration resources (you’re applying this to a blank account anyway!).

2:30 Open your directory in VS Code or whichever IDE you prefer.

3:03 Add Template configuration to src/templates/blog-post.tsx in order to generate a different static page for every blog in your Content. This defines a stream which specifies the entities from the Content to use this template with.

export const config: TemplateConfig = {
  stream: {
    $id: "blog",
    filter: {
      entityTypes: ["ce_blog"],
    },
    fields: ["id", "name", "datePosted", "body", "slug", "c_coverPhoto"],
    localization: {
      locales: ["en"]
    },
  },
};

3:42 Update the getPath function to return the slug field for the blog as the URL path for any given blog:

export const getPath: GetPath<TemplateProps> = ({document}) => {
	return document.slug;
};

3:55 Update the template code to render each blog:

const BlogPost: Template<TemplateRenderProps> = ({
  document,
}: TemplateProps) => {

  return (
    <>
      <div className="mx-auto flex w-full max-w-4xl flex-col items-start justify-center">
				<InfoSection titleCssStyles="text-5xl pb-4" title={document.name}>
          <p className="font-semibold">{document.datePosted}</p>
          <div className="font-display">{renderBlogContent(document.body)}</div>
        </InfoSection>
      </div>
    </>
  );
};

4:20 Build and run your application to see the changes you made:

npm run dev

5:05 Conditionally render a cover photo for the blog if the entity has one:

// src/templates/blog-post.tsx

const BlogPost: Template<TemplateRenderProps> = ({
  document,
}: TemplateProps) => {

  return (
    <>
      <div className="mx-auto flex w-full max-w-4xl flex-col items-start justify-center">
				<InfoSection titleCssStyles="text-5xl pb-4" title={document.name}>
					{document.c_coverPhoto && <Image image={document.c_coverPhoto} />} // New content
          <p className="font-semibold">{document.datePosted}</p>
          <div className="font-display">{renderBlogContent(document.body)}</div>
        </InfoSection>
      </div>
    </>
  );
};

5:40 Commit your changes:

git add .
git commit -m "blog posts"

5:50 Push to your new remote repository:

git remote add origin <YOUR_BLANK_GITHUB_REPO>
git branch -M origin
git push -u origin main

6:12 Deploy your site. Navigate to your Yext account and Click on Pages > All Sites > Add New Site. Click on Use my Github Account. Choose a name for your site, select your Github account, select your repository, and choose the main branch. Click Deploy Site to finish.

7:00 Once your site is done deploying, click on the production URL to ensure it deployed successfully. Navigate to “A Creative Blog Post” by appending /blog-post/1 to the URL.

7:30 Navigate to the “A Creative Blog Post” entity. Copy this stock image URL and add it to the Cover Photo field:

https://images.unsplash.com/photo-1560421683-6856ea585c78?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2948&q=80

Remember to click save after you add the photo.

7:50 Refresh the page. You will see the photo that you added to the blog post entity appear on the page.