Blog posts

A responsive blog list component that displays blog posts in a grid or list format.

A component for displaying blog post cards in a clean, modern design

The Shipixen blog can be used as a knowledge base or documentation hub. This guide will show you how to add a knowledge base or documentation hub to your Shipixen template.

By default, the blog is located at `/all-articles`. This can be changed by editing the `allArticlesPath` variable in `site.settings.js`.

Shipixen supports importing blog posts from json to a file-based markdown blog. Here is how you can do that. The best part is you can deploy your blog to Vercel with a single click afterwards.

Changing from a Ghost blog to a file-based markdown blog is easy with Shipixen. Import posts, customize your theme, and deploy to Vercel with 1 click.

It is possible to generate a template with Shipixen without a blog. However, you can add a blog later on. This guide will show you how to do that.

The Shipixen boilerplate comes with Lucide Icons built in, a simple icon pack with over 1300 icons.

The Shipixen boilerplate comes with custom-made presentational components that you can use to build your own landing page.

Learn how to create a custom React component that can be used in the blog. Custom components can be used to create reusable sections in the blog as well as interactive components.

Learn how to create custom layouts for your blog posts. Layouts are a great way to add a consistent look and feel to your blog posts.

An overview of the codebase in the generated boilerplate

Read about how to use the Shipixen Vercel Integration to deploy your Shipixen project to Vercel.

Learn how to use the blog. Write blog posts by example plus get a markdown cheatsheet - headers, lists, images, tables and more!

Learn about the boilerplate configuration and how to customize it to your needs after you have generated your site.

The Shipixen boilerplate uses the app/ directory to store all of your pages and api routes.

The Shipixen boilerplate uses the components directory to store all the components used in your project.

The Shipixen boilerplate uses the contentlayer plugin to generate types for your content. This file contains the configuration for the plugin.

Learn about the .contentlayer/ directory in the mdx blog starter.

The Shipixen boilerplate uses the css/ directory to store all of your global CSS. It contains the main Tailwind "entry point" file, `globals.css`.

The Shipixen boilerplate uses the data/ directory to store all of your blog post data (mdx files), as well as author data and global configuration.

The Shipixen boilerplate uses the demo directory to showcase the UI library and landing page sections.

Learn about the env files & the .env.example file in your Shipixen boilerplate.

Learn about the .eslintignore file in your Shipixen boilerplate.

Learn about the .eslintrc file in your Shipixen boilerplate.

Learn about the .gitignore file in your Shipixen boilerplate.

Learn about the .husky/ directory in your Shipixen boilerplate.

Learn about the jsonconfig.json file in your Shipixen boilerplate.

The Shipixen boilerplate uses the layouts directory to store the layouts for the blog.

The Shipixen boilerplate uses the lib/ directory to store utilities and helper functions.

Learn about the next-env.d.ts file in your Shipixen boilerplate.

Learn about the .next/ directory in your Shipixen boilerplate.

Learn about the next.config.js file in your Shipixen boilerplate.

Learn about the node_modules/ directory in your Shipixen boilerplate.

Learn about the package.json file in your Shipixen boilerplate.

Learn about the postcss.config.js file in your Shipixen boilerplate.

Learn about the .prettierrc file in your Shipixen boilerplate.

The Shipixen boilerplate uses the public/ directory to store static files, such as images and favicons.

The Shipixen boilerplate uses the scripts/ directory to generate the rss feed.

Learn about the tailwind.config.js file in your Shipixen boilerplate.

Learn about the tsconfig.json file in your Shipixen boilerplate.

Learn about the .vscode/ directory in your Shipixen boilerplate.

A collection of landing page component demos that you can copy-paste in your own projects.