Show HN: Minimalist Blog Template on Next.js 14

{
  "by": "whitefables",
  "descendants": 0,
  "id": 40245293,
  "score": 1,
  "text": "I built a blog template to go through the full motion of integrating wisp cms (a project I&#x27;m building).<p>Seeked inspiration from some of the existing vercel templates and slapped on some fictitious articles. Feels like an amazing blog I would follow myself tbh.<p>Feel free to fork it or contribute to it!",
  "time": 1714722970,
  "title": "Show HN: Minimalist Blog Template on Next.js 14",
  "type": "story",
  "url": "https://github.com/Wisp-CMS/nextjs-blog-cms-wisp"
}

{
  "author": "Wisp-CMS",
  "date": null,
  "description": "A Next.js 14 Blog using Server Components - backed by Wisp CMS - GitHub - Wisp-CMS/nextjs-blog-cms-wisp: A Next.js 14 Blog using Server Components - backed by Wisp CMS",
  "image": "https://repository-images.githubusercontent.com/793986835/85a5bb66-bbc9-452c-8ca9-7694f368ec6a",
  "logo": "https://logo.clearbit.com/github.com",
  "publisher": "GitHub",
  "title": "GitHub - Wisp-CMS/nextjs-blog-cms-wisp: A Next.js 14 Blog using Server Components - backed by Wisp CMS",
  "url": "https://github.com/Wisp-CMS/nextjs-blog-cms-wisp"
}

{
  "url": "https://github.com/Wisp-CMS/nextjs-blog-cms-wisp",
  "title": "GitHub - Wisp-CMS/nextjs-blog-cms-wisp: A Next.js 14 Blog using Server Components - backed by Wisp CMS",
  "description": "A Next.js 14 Blog using Server Components - Backed by Wisp CMS Featured Links  Demo Blog Feature Walkthrough Editing Experience Documentation Video Tutorial  This is a Next.js, Tailwind CSS, Shadcn...",
  "links": [
    "https://github.com/Wisp-CMS/nextjs-blog-cms-wisp"
  ],
  "image": "https://repository-images.githubusercontent.com/793986835/85a5bb66-bbc9-452c-8ca9-7694f368ec6a",
  "content": "<div><article><p></p><h2>A Next.js 14 Blog using Server Components - Backed by Wisp CMS</h2><a target=\"_blank\" href=\"https://github.com/Wisp-CMS/nextjs-blog-cms-wisp#a-nextjs-14-blog-using-server-components---backed-by-wisp-cms\"></a><p></p>\n<p><a target=\"_blank\" href=\"https://nextjs-blog-cms-wisp.vercel.app/\"><img src=\"https://camo.githubusercontent.com/7d0796cee0b32fc5fc0bed30a1574b3bc25770df348e746d91f1c57c2ff73b9b/68747470733a2f2f696d61676564656c69766572792e6e65742f6c4c6d4e654f5037485847304f716147393777696d772f636c766c7567727539303030306f34673861687870303639732f33323433326363662d353761382d343939322d386335312d6535613437653131303031382e706e672f7075626c6963\" alt=\"Demo Travel Blog on Next.js 14\" title=\"Demo Travel Blog on Next.js 14\" /></a></p>\n<p><a target=\"_blank\" href=\"https://app.netlify.com/start/deploy?repository=https://github.com/Wisp-CMS/nextjs-blog-cms-wisp/\"><img src=\"https://camo.githubusercontent.com/8ef0cc1d083b2d67eb72500031401d9b52c3ecb9fb4c4405f46afd0d0aba02d6/68747470733a2f2f7777772e6e65746c6966792e636f6d2f696d672f6465706c6f792f627574746f6e2e737667\" alt=\"Deploy to Netlify\" /></a> <a target=\"_blank\" href=\"https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FWisp-CMS%2Fnextjs-blog-cms-wisp&amp;env=NEXT_PUBLIC_BLOG_ID&amp;envDescription=Blog%20ID%20obtained%20from%20the%20Setup%20Page%20on%20Wisp%20CMS&amp;demo-title=Demo%20Travel%20Blog&amp;demo-description=Demo%20travel%20blog%20using%20Nextjs%2014%20Server%20Component&amp;demo-url=https%3A%2F%2Fnextjs-blog-cms-wisp.vercel.app%2F&amp;demo-image=https%3A%2F%2Fimagedelivery.net%2FlLmNeOP7HXG0OqaG97wimw%2Fclvlugru90000o4g8ahxp069s%2F32432ccf-57a8-4992-8c51-e5a47e110018.png%2Fpublic\"><img src=\"https://camo.githubusercontent.com/20bea215d35a4e28f2c92ea5b657d006b087687486858a40de2922a4636301ab/68747470733a2f2f76657263656c2e636f6d2f627574746f6e\" alt=\"Deploy with Vercel\" /></a></p>\n<p><strong>Featured Links</strong></p>\n<ul>\n<li><a target=\"_blank\" href=\"https://nextjs-blog-cms-wisp.vercel.app/\">Demo Blog</a></li>\n<li><a target=\"_blank\" href=\"https://youtu.be/7wVYAGhDmdY\">Feature Walkthrough</a></li>\n<li><a target=\"_blank\" href=\"https://youtu.be/uSKO8J38T98\">Editing Experience</a></li>\n<li><a target=\"_blank\" href=\"https://www.wisp.blog/docs/next-js-blog-starter-kit/overview\">Documentation</a></li>\n<li><a target=\"_blank\" href=\"https://www.wisp.blog/docs/next-js-blog-starter-kit/running-blog\">Video Tutorial</a></li>\n</ul>\n<p>This is a <a target=\"_blank\" href=\"https://nextjs.org/docs/getting-started/installation\">Next.js</a>, <a target=\"_blank\" href=\"https://tailwindcss.com/\">Tailwind CSS</a>, <a target=\"_blank\" href=\"https://ui.shadcn.com/\">Shadcn</a> blogging starter template. This version is using Next.js 14 App Router with <a target=\"_blank\" href=\"https://nextjs.org/docs/getting-started/react-essentials#server-components\">React Server Components</a> and uses <a target=\"_blank\" href=\"https://wisp.blog/?utm_source=github&amp;utm_medium=web&amp;utm_campaign=nextjs-blog-cms-wisp\">Wisp</a> for publishing blog posts.</p>\n<p>Probably the most feature-rich Next.js blog template out there that is easily configurable and customizable. It's perfect as an upgrade from blogs using Jekyll, Hugo, Gatsby, Contentlayer, or ContentCollections.</p>\n<p></p><h2>About Wisp</h2><a target=\"_blank\" href=\"https://github.com/Wisp-CMS/nextjs-blog-cms-wisp#about-wisp\"></a><p></p>\n<p>Wisp is a modern CMS for adding blogs to websites. It features an intuitive, medium-like editorial experience so that you can focus on writing instead of getting distracted by markdown.</p>\n<p></p><h2>Features</h2><a target=\"_blank\" href=\"https://github.com/Wisp-CMS/nextjs-blog-cms-wisp#features\"></a><p></p>\n<ul>\n<li>Beautiful blog starter kit with server rendering using Next.js 14 Server Components</li>\n<li>Responsive layout for mobile devices</li>\n<li>Filter blog posts by tags</li>\n<li>About page</li>\n<li>Light &amp; dark mode</li>\n<li>Automatic hierarchical sitemap generation</li>\n<li>Automatic Open Graph image generation</li>\n<li>Automatic <a target=\"_blank\" href=\"https://www.wisp.blog/blog/suggesting-related-blog-post-with-ai-content-recommendation\">Related Posts suggestions</a></li>\n<li>RSS Feed</li>\n</ul>\n<p></p><h2>Technologies</h2><a target=\"_blank\" href=\"https://github.com/Wisp-CMS/nextjs-blog-cms-wisp#technologies\"></a><p></p>\n<ul>\n<li><a target=\"_blank\" href=\"https://nextjs.org/\">Next.js 14</a> using App Router &amp; TypeScript</li>\n<li><a target=\"_blank\" href=\"https://wisp.blog/?utm_source=github&amp;utm_medium=web&amp;utm_campaign=nextjs-blog-cms-wisp\">Wisp</a> to manage blog posts</li>\n<li><a target=\"_blank\" href=\"https://tailwindcss.com/\">Tailwind CSS</a> for CSS framework</li>\n<li><a target=\"_blank\" href=\"https://ui.shadcn.com/\">Shadcn UI</a> for UI components</li>\n<li><a target=\"_blank\" href=\"https://eslint.org/\">ESLint</a> for static analysis</li>\n<li><a target=\"_blank\" href=\"https://www.typescriptlang.org/\">TypeScript</a> for type safety</li>\n<li>Font optimization with <a target=\"_blank\" href=\"https://nextjs.org/docs/app/api-reference/components/font\">next/font</a></li>\n</ul>\n<p></p><h2>Step-by-step Video Tutorial</h2><a target=\"_blank\" href=\"https://github.com/Wisp-CMS/nextjs-blog-cms-wisp#step-by-step-video-tutorial\"></a><p></p>\n<p>We've now included a 3-part video tutorial to help you run this blog on your computer:</p>\n<p><a target=\"_blank\" href=\"https://camo.githubusercontent.com/950760ba8fef527f1c59d5a7c72408085ed32a998a0c1f3ccbb81b1af3e3b9ff/68747470733a2f2f696d61676564656c69766572792e6e65742f6c4c6d4e654f5037485847304f716147393777696d772f636c7571797831726c303030306c356473336630766b6665722f32613932623762362d396231312d346534312d383731392d6261643762653939623931322e706e672f7075626c6963\"><img src=\"https://camo.githubusercontent.com/950760ba8fef527f1c59d5a7c72408085ed32a998a0c1f3ccbb81b1af3e3b9ff/68747470733a2f2f696d61676564656c69766572792e6e65742f6c4c6d4e654f5037485847304f716147393777696d772f636c7571797831726c303030306c356473336630766b6665722f32613932623762362d396231312d346534312d383731392d6261643762653939623931322e706e672f7075626c6963\" alt=\"3-part Video Tutorial to Launch Nextjs Blog\" title=\"3-part Video Tutorial to Launch Nextjs Blog\" /></a></p>\n<ul>\n<li><a target=\"_blank\" href=\"https://www.wisp.blog/docs/next-js-blog-starter-kit/running-blog?utm_source=github&amp;utm_medium=web&amp;utm_campaign=nextjs-blog-cms-wisp\">Part 1: Running the Next JS blog (15 min)</a></li>\n<li><a target=\"_blank\" href=\"https://www.wisp.blog/docs/next-js-blog-starter-kit/personalizing-blog?utm_source=github&amp;utm_medium=web&amp;utm_campaign=nextjs-blog-cms-wisp\">Part 2: Personalizing Your Next.js Blog (15 min)</a></li>\n<li><a target=\"_blank\" href=\"https://www.wisp.blog/docs/next-js-blog-starter-kit/deploying-blog?utm_source=github&amp;utm_medium=web&amp;utm_campaign=nextjs-blog-cms-wisp\">Part 3: Deploying Your Next.js Blog (15 min)</a></li>\n</ul>\n<p></p><h2>Quick Start Guide</h2><a target=\"_blank\" href=\"https://github.com/Wisp-CMS/nextjs-blog-cms-wisp#quick-start-guide\"></a><p></p>\n<p>First, install the dependencies:</p>\n<p>Then, copy the <code>.env.example</code> file to <code>.env</code>:</p>\n<p>Note: You will need to populate the <code>NEXT_PUBLIC_BLOG_ID</code> variable with the Blog ID obtained from wisp after you've created an account.</p>\n<p>Finally, run the development server:</p>\n<p>Open <a target=\"_blank\" href=\"http://localhost:3000/\">http://localhost:3000</a> with your browser to see the result.</p>\n<p></p><h2>Getting Help</h2><a target=\"_blank\" href=\"https://github.com/Wisp-CMS/nextjs-blog-cms-wisp#getting-help\"></a><p></p>\n<p>Full documentation on how to get started on wisp as well as this starter kit is available on <a target=\"_blank\" href=\"https://www.wisp.blog/docs/next-js-blog-starter-kit/overview?utm_source=github&amp;utm_medium=web&amp;utm_campaign=nextjs-blog-cms-wisp\">wisp's documentation site</a></p>\n</article></div>",
  "author": "",
  "favicon": "https://github.githubassets.com/favicons/favicon.svg",
  "source": "github.com",
  "published": "",
  "ttr": 62,
  "type": "object"
}