Our great sponsors
-
tailwind-nextjs-starter-blog
This is a Next.js, Tailwind CSS blogging starter template. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
-
The site is built using Next.js and is based upon the Tailwind Nextjs Starter Blog created by Timothy Lin. The key difference is that, rather than pulling from local Markdown and configuration files to populate the site, all the data is pulled via GraphQL queries using a schema deployed to StepZen, which we'll explore in a moment.
You'll need a GitHub account. The site utilizes your name, email, twitter username and bio, so it'll work best if you have these filled out in your profile. If you have some public repositories on your account, those will be used to populate your recent projects on the about page. You will need to get a personal access token, which is used to access the GitHub API. For these purposes, you'll only need basic read permissions.
In terms of deployment, you can deploy the site wherever you can host a Next.js Jamstack site. I deployed mine to Netlify and utilized the Netlify Next.js cache plugin to improve the build speed. Utilizing the cache was important in my case as I have a lot of DEV posts and the DEV API is rate limited to 3 rps for reads (1 rps for writes, but that doesn't impact our API). (Note: the code has a short delay built into the blog post rendering to prevent API limit errors during the build on sites with a lot of posts.)
Let's begin by pulling the code for the sample frontend. The frontend code is available in this GitHub repository. Let's clone it into a folder named zenblog.
You can also expand upon the pre-built StepZen schema by using stepzen import to import more API templates or creating your own custom schema code to extend the schema we imported. For details on the pre-built schemas available to import, check out the API templates page on StepZen.com or visit the StepZen schemas GitHub repo. For example, you might want to use the Cloudinary schema for serving your media file or the Algolia schema for adding search functionality. For more details on how to write custom schemas, for StepZen, visit the StepZen docs.
A GraphiQL query editor will open that is already connected to your deployed API for you to test. Any changes you make to the API code will be automatically uploaded and deployed until you end the stepzen start process. However, you shouldn't need to make any changes at this point. Let's test that this is working by querying the API with a simple query to get posts: