Welcome to SERP Secrets, a blog dedicated to exploring the latest trends and strategies in Search Engine Optimization (SEO), with a special focus on the impact of Artificial Intelligence on the industry.
This site covers topics like:
- AI-driven SEO strategies
- Technical SEO tips
- Future trends in search engine algorithms
This site is built using the Tailwind Nextjs Starter Blog template by Tim L. R. X.
Content is modelled using Contentlayer, which allows you to define your own content schema and use it to generate typed content objects. See Contentlayer documentation for more information.
Frontmatter follows Hugo's standards.
Please refer to contentlayer.config.ts
for an up to date list of supported fields. The following fields are supported:
title (required)
date (required)
tags (optional)
lastmod (optional)
draft (optional)
summary (optional)
images (optional)
authors (optional list which should correspond to the file names in `data/authors`. Uses `default` if none is specified)
layout (optional list which should correspond to the file names in `data/layouts`)
canonicalUrl (optional, canonical url for the post for SEO)
Here's an example of a post's frontmatter:
---
title: 'Introducing Tailwind Nexjs Starter Blog'
date: '2021-01-12'
lastmod: '2021-01-18'
tags: ['next-js', 'tailwind', 'guide']
draft: false
summary: 'Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.'
images: ['/static/images/canada/mountains.jpg', '/static/images/canada/toronto.jpg']
authors: ['default', 'sparrowhawk']
layout: PostLayout
canonicalUrl: https://tailwind-nextjs-starter-blog.vercel.app/blog/introducing-tailwind-nextjs-starter-blog
---
A pages.yml
workflow is already provided. Simply select "GitHub Actions" in: Settings > Pages > Build and deployment > Source
.
The easiest way to deploy the template is to deploy on Vercel. Check out the Next.js deployment documentation for more details.
Netlify’s Next.js runtime configures enables key Next.js functionality on your website without the need for additional configurations. Netlify generates serverless functions that will handle Next.js functionalities such as server-side rendered (SSR) pages, incremental static regeneration (ISR), next/images
, etc.
See Next.js on Netlify for suggested configuration values and more details.
Run:
$ EXPORT=1 UNOPTIMIZED=1 yarn build
Then, deploy the generated out
folder or run npx serve out
it locally.
Important
If deploying with a URL base path, like https://example.org/myblog you need an extra BASE_PATH
shell-var to the build command:
$ EXPORT=1 UNOPTIMIZED=1 BASE_PATH=/myblog yarn build
=> In your code, ${process.env.BASE_PATH || ''}/robots.txt
will print "/myblog/robots.txt"
in the out
build (or only /robots.txt
if yarn dev
, ie: on localhost:3000)
Tip
Alternatively to UNOPTIMIZED=1
, to continue using next/image
, you can use an alternative image optimization provider such as Imgix, Cloudinary or Akamai. See image optimization documentation for more details.
Consider removing the following features that cannot be used in a static build:
- Comment out
headers()
fromnext.config.js
. - Remove
api
folder and components which call the server-side function such as the Newsletter component. Not technically required and the site will build successfully, but the APIs cannot be used as they are server-side functions.
Using the template? Support this effort by giving a star on GitHub, sharing your own blog and giving a shoutout on Twitter or becoming a project sponsor.