{"pageProps":{"post":{"mdxSource":"var Component=(()=>{var c=Object.create;var r=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var s=n=>r(n,\"__esModule\",{value:!0});var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),f=(n,e)=>{s(n);for(var a in e)r(n,a,{get:e[a],enumerable:!0})},b=(n,e,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of p(e))!u.call(n,i)&&i!==\"default\"&&r(n,i,{get:()=>e[i],enumerable:!(a=h(e,i))||a.enumerable});return n},w=n=>b(s(r(n!=null?c(m(n)):{},\"default\",n&&n.__esModule&&\"default\"in n?{get:()=>n.default,enumerable:!0}:{value:n,enumerable:!0})),n);var d=g((k,l)=>{l.exports=_jsx_runtime});var N={};f(N,{default:()=>j,frontmatter:()=>x});var t=w(d()),x={title:\"Introducing Tailwind Nextjs Starter Blog\",date:\"2021-01-12\",lastmod:\"2021-09-08\",tags:[\"next-js\",\"tailwind\",\"guide\"],draft:!1,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\"]};function y(n){let e=Object.assign({div:\"div\",h1:\"h1\",a:\"a\",span:\"span\",p:\"p\",img:\"img\",h2:\"h2\",ul:\"ul\",li:\"li\",ol:\"ol\",code:\"code\",pre:\"pre\",h3:\"h3\",strong:\"strong\",br:\"br\"},n.components),{Image:a,wrapper:i}=e,o=(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.div,{children:(0,t.jsx)(a,{alt:\"tailwind-nextjs-banner\",src:\"/static/images/twitter-card.png\",width:\"1200\",height:\"600\"})}),`\n`,(0,t.jsxs)(e.h1,{id:\"tailwind-nextjs-starter-blog\",children:[(0,t.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#tailwind-nextjs-starter-blog\",children:(0,t.jsx)(e.span,{className:\"icon icon-link\"})}),\"Tailwind Nextjs Starter Blog\"]}),`\n`,(0,t.jsx)(e.p,{children:(0,t.jsx)(e.a,{href:\"https://vercel.com/new/git/external?repository-url=https://github.com/timlrx/tailwind-nextjs-starter-blog\",children:(0,t.jsx)(e.img,{src:\"https://vercel.com/button\",alt:\"Deploy with Vercel\"})})}),`\n`,(0,t.jsxs)(e.p,{children:[\"This is a \",(0,t.jsx)(e.a,{href:\"https://nextjs.org/\",children:\"Next.js\"}),\", \",(0,t.jsx)(e.a,{href:\"https://tailwindcss.com/\",children:\"Tailwind CSS\"}),\" blogging starter template. Probably the most feature rich nextjs markdown blogging template out there. 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.\"]}),`\n`,(0,t.jsx)(e.p,{children:\"Check out the documentation below to get started.\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"Facing issues? Check the \",(0,t.jsx)(e.a,{href:\"https://github.com/timlrx/tailwind-nextjs-starter-blog/wiki\",children:\"FAQ page\"}),\" and do a search on past issues. Feel free to open a new issue if none has been posted previously.\"]}),`\n`,(0,t.jsx)(e.p,{children:\"Feature request? Check the past discussions to see if it has been brough up previously. Otherwise, feel free to start a new discussion thread. All ideas are welcomed!\"}),`\n`,(0,t.jsxs)(e.h2,{id:\"examples\",children:[(0,t.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#examples\",children:(0,t.jsx)(e.span,{className:\"icon icon-link\"})}),\"Examples\"]}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.a,{href:\"https://tailwind-nextjs-starter-blog.vercel.app/\",children:\"Demo Blog\"}),\" - this repo\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.a,{href:\"https://www.timlrx.com\",children:\"My personal blog\"}),\" - modified to auto-generate blog posts with dates\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.a,{href:\"https://tambouille.vercel.app/\",children:\"Aloisdg's cookbook\"}),\" - with pictures and recipes!\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.a,{href:\"https://tailwind-nextjs-starter-blog-seven.vercel.app/\",children:\"GautierArcin's demo with next translate\"}),\" - includes translation of mdx posts, \",(0,t.jsx)(e.a,{href:\"https://github.com/GautierArcin/tailwind-nextjs-starter-blog/tree/demo/next-translate\",children:\"source code\"})]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.a,{href:\"https://davidlevai.com/\",children:\"David Levai's digital garden\"}),\" - customized design and added email subscriptions\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.a,{href:\"https://thinhcorner.com/\",children:\"Thinh's Corner\"}),\" - \",(0,t.jsx)(e.a,{href:\"https://github.com/Th1nhNg0/th1nhng0.vercel.app/blob/5e73a420828d82f01e7147512a2c3273c4ec19f8/layouts/PostLayout.js\",children:\"customized layout\"}),\" with sticky side table of contents\"]}),`\n`]}),`\n`,(0,t.jsx)(e.p,{children:\"Using the template? Feel free to create a PR and add your blog to this list.\"}),`\n`,(0,t.jsxs)(e.h2,{id:\"motivation\",children:[(0,t.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#motivation\",children:(0,t.jsx)(e.span,{className:\"icon icon-link\"})}),\"Motivation\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"I wanted to port my existing blog to Nextjs and Tailwind CSS but there was no easy out of the box template to use so I decided to create one. Design is adapted from \",(0,t.jsx)(e.a,{href:\"https://github.com/tailwindlabs/blog.tailwindcss.com\",children:\"Tailwindlabs blog\"}),\".\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"I wanted it to be nearly as feature-rich as popular blogging templates like \",(0,t.jsx)(e.a,{href:\"https://github.com/daattali/beautiful-jekyll\",children:\"beautiful-jekyll\"}),\" and \",(0,t.jsx)(e.a,{href:\"https://github.com/wowchemy/wowchemy-hugo-modules\",children:\"Hugo Academic\"}),\" but with the best of React's ecosystem and current web development's best practices.\"]}),`\n`,(0,t.jsxs)(e.h2,{id:\"features\",children:[(0,t.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#features\",children:(0,t.jsx)(e.span,{className:\"icon icon-link\"})}),\"Features\"]}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[\"Easy styling customization with \",(0,t.jsx)(e.a,{href:\"https://blog.tailwindcss.com/tailwindcss-v2\",children:\"Tailwind 2.0\"}),\" and primary color attribute\"]}),`\n`,(0,t.jsxs)(e.li,{children:[\"Near perfect lighthouse score - \",(0,t.jsx)(e.a,{href:\"https://www.webpagetest.org/result/210111_DiC1_08f3670c3430bf4a9b76fc3b927716c5/\",children:\"Lighthouse report\"})]}),`\n`,(0,t.jsx)(e.li,{children:\"Lightweight, 45kB first load JS, uses Preact in production build\"}),`\n`,(0,t.jsx)(e.li,{children:\"Mobile-friendly view\"}),`\n`,(0,t.jsx)(e.li,{children:\"Light and dark theme\"}),`\n`,(0,t.jsxs)(e.li,{children:[\"Supports \",(0,t.jsx)(e.a,{href:\"https://plausible.io/\",children:\"plausible\"}),\", \",(0,t.jsx)(e.a,{href:\"https://simpleanalytics.com/\",children:\"simple analytics\"}),\" and google analytics\"]}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://mdxjs.com/\",children:\"MDX - write JSX in markdown documents!\"})}),`\n`,(0,t.jsxs)(e.li,{children:[\"Server-side syntax highlighting with line numbers and line highlighting via \",(0,t.jsx)(e.a,{href:\"https://github.com/timlrx/rehype-prism-plus\",children:\"rehype-prism-plus\"})]}),`\n`,(0,t.jsxs)(e.li,{children:[\"Math display supported via \",(0,t.jsx)(e.a,{href:\"https://katex.org/\",children:\"KaTeX\"})]}),`\n`,(0,t.jsxs)(e.li,{children:[\"Automatic image optimization via \",(0,t.jsx)(e.a,{href:\"https://nextjs.org/docs/basic-features/image-optimization\",children:\"next/image\"})]}),`\n`,(0,t.jsxs)(e.li,{children:[\"Flexible data retrieval with \",(0,t.jsx)(e.a,{href:\"https://github.com/kentcdodds/mdx-bundler\",children:\"mdx-bundler\"})]}),`\n`,(0,t.jsx)(e.li,{children:\"Support for tags - each unique tag will be its own page\"}),`\n`,(0,t.jsx)(e.li,{children:\"Support for multiple authors\"}),`\n`,(0,t.jsx)(e.li,{children:\"Blog templates\"}),`\n`,(0,t.jsx)(e.li,{children:\"TOC component\"}),`\n`,(0,t.jsx)(e.li,{children:\"Support for nested routing of blog posts\"}),`\n`,(0,t.jsx)(e.li,{children:\"Newsletter component with support for mailchimp, buttondown and convertkit\"}),`\n`,(0,t.jsxs)(e.li,{children:[\"Supports \",(0,t.jsx)(e.a,{href:\"https://github.com/laymonage/giscus\",children:\"giscus\"}),\", \",(0,t.jsx)(e.a,{href:\"https://github.com/utterance/utterances\",children:\"utterances\"}),\" or disqus\"]}),`\n`,(0,t.jsx)(e.li,{children:\"Projects page\"}),`\n`,(0,t.jsx)(e.li,{children:\"SEO friendly with RSS feed, sitemaps and more!\"}),`\n`]}),`\n`,(0,t.jsxs)(e.h2,{id:\"sample-posts\",children:[(0,t.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#sample-posts\",children:(0,t.jsx)(e.span,{className:\"icon icon-link\"})}),\"Sample posts\"]}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://tailwind-nextjs-starter-blog.vercel.app/blog/github-markdown-guide\",children:\"A markdown guide\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://tailwind-nextjs-starter-blog.vercel.app/blog/guide-to-using-images-in-nextjs\",children:\"Learn more about images in Next.js\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://tailwind-nextjs-starter-blog.vercel.app/blog/deriving-ols-estimator\",children:\"A tour of math typesetting\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://tailwind-nextjs-starter-blog.vercel.app/blog/pictures-of-canada\",children:\"Simple MDX image grid\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://tailwind-nextjs-starter-blog.vercel.app/blog/the-time-machine\",children:\"Example of long prose\"})}),`\n`,(0,t.jsx)(e.li,{children:(0,t.jsx)(e.a,{href:\"https://tailwind-nextjs-starter-blog.vercel.app/blog/nested-route/introducing-multi-part-posts-with-nested-routing\",children:\"Example of Nested Route Post\"})}),`\n`]}),`\n`,(0,t.jsxs)(e.h2,{id:\"quick-start-guide\",children:[(0,t.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#quick-start-guide\",children:(0,t.jsx)(e.span,{className:\"icon icon-link\"})}),\"Quick Start Guide\"]}),`\n`,(0,t.jsxs)(e.ol,{children:[`\n`,(0,t.jsxs)(e.li,{children:[\"JS (official support) - \",(0,t.jsx)(e.code,{children:\"npx degit https://github.com/timlrx/tailwind-nextjs-starter-blog.git\"}),\" or TS (community support) - \",(0,t.jsx)(e.code,{children:\"npx degit timlrx/tailwind-nextjs-starter-blog#typescript\"})]}),`\n`,(0,t.jsxs)(e.li,{children:[\"Personalize \",(0,t.jsx)(e.code,{children:\"siteMetadata.js\"}),\" (site related information)\"]}),`\n`,(0,t.jsxs)(e.li,{children:[\"Personalize \",(0,t.jsx)(e.code,{children:\"authors/default.md\"}),\" (main author)\"]}),`\n`,(0,t.jsxs)(e.li,{children:[\"Modify \",(0,t.jsx)(e.code,{children:\"projectsData.js\"})]}),`\n`,(0,t.jsxs)(e.li,{children:[\"Modify \",(0,t.jsx)(e.code,{children:\"headerNavLinks.js\"}),\" to customize navigation links\"]}),`\n`,(0,t.jsx)(e.li,{children:\"Add blog posts\"}),`\n`,(0,t.jsx)(e.li,{children:\"Deploy on Vercel\"}),`\n`]}),`\n`,(0,t.jsxs)(e.h2,{id:\"development\",children:[(0,t.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#development\",children:(0,t.jsx)(e.span,{className:\"icon icon-link\"})}),\"Development\"]}),`\n`,(0,t.jsx)(e.p,{children:\"First, run the development server:\"}),`\n`,(0,t.jsx)(e.pre,{className:\"language-bash\",children:(0,t.jsxs)(e.code,{className:\"language-bash code-highlight\",children:[(0,t.jsxs)(e.span,{className:\"code-line\",children:[(0,t.jsx)(e.span,{className:\"token function\",children:\"npm\"}),` start\n`]}),(0,t.jsxs)(e.span,{className:\"code-line\",children:[(0,t.jsx)(e.span,{className:\"token comment\",children:\"# or\"}),`\n`]}),(0,t.jsxs)(e.span,{className:\"code-line\",children:[(0,t.jsx)(e.span,{className:\"token function\",children:\"npm\"}),` run dev\n`]})]})}),`\n`,(0,t.jsxs)(e.p,{children:[\"Open \",(0,t.jsx)(e.a,{href:\"http://localhost:3000\",children:\"http://localhost:3000\"}),\" with your browser to see the result.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"You can start editing the page by modifying \",(0,t.jsx)(e.code,{children:\"pages/index.js\"}),\". The page auto-updates as you edit the file.\"]}),`\n`,(0,t.jsxs)(e.h2,{id:\"extend--customize\",children:[(0,t.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#extend--customize\",children:(0,t.jsx)(e.span,{className:\"icon icon-link\"})}),\"Extend / Customize\"]}),`\n`,(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.code,{children:\"data/siteMetadata.js\"}),\" - contains most of the site related information which should be modified for a user's need.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.code,{children:\"data/authors/default.md\"}),\" - default author information (required). Additional authors can be added as files in \",(0,t.jsx)(e.code,{children:\"data/authors\"}),\".\"]}),`\n`,(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.code,{children:\"data/projectsData.js\"}),\" - data used to generate styled card in projects page.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.code,{children:\"data/headerNavLinks.js\"}),\" - navigation links.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.code,{children:\"data/logo.svg\"}),\" - replace with your own logo.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.code,{children:\"data/blog\"}),\" - replace with your own blog posts.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.code,{children:\"public/static\"}),\" - store assets such as images and favicons.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.code,{children:\"tailwind.config.js\"}),\" and \",(0,t.jsx)(e.code,{children:\"css/tailwind.css\"}),\" - contain the tailwind stylesheet which can be modified to change the overall look and feel of the site.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.code,{children:\"css/prism.css\"}),\" - controls the styles associated with the code blocks. Feel free to customize it and use your preferred prismjs theme e.g. \",(0,t.jsx)(e.a,{href:\"https://github.com/PrismJS/prism-themes\",children:\"prism themes\"}),\".\"]}),`\n`,(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.code,{children:\"components/social-icons\"}),\" - to add other icons, simply copy an svg file from \",(0,t.jsx)(e.a,{href:\"https://simpleicons.org/\",children:\"Simple Icons\"}),\" and map them in \",(0,t.jsx)(e.code,{children:\"index.js\"}),\". Other icons uses \",(0,t.jsx)(e.a,{href:\"https://heroicons.com/\",children:\"heroicons\"}),\".\"]}),`\n`,(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.code,{children:\"components/MDXComponents.js\"}),\" - pass your own JSX code or React component by specifying it over here. You can then call them directly in the \",(0,t.jsx)(e.code,{children:\".mdx\"}),\" or \",(0,t.jsx)(e.code,{children:\".md\"}),\" file. By default, a custom link and image component is passed.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.code,{children:\"layouts\"}),\" - main templates used in pages.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.code,{children:\"pages\"}),\" - pages to route to. Read the \",(0,t.jsx)(e.a,{href:\"https://nextjs.org/docs\",children:\"Next.js documentation\"}),\" for more information\"]}),`\n`,(0,t.jsxs)(e.h2,{id:\"post\",children:[(0,t.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#post\",children:(0,t.jsx)(e.span,{className:\"icon icon-link\"})}),\"Post\"]}),`\n`,(0,t.jsxs)(e.h3,{id:\"frontmatter\",children:[(0,t.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#frontmatter\",children:(0,t.jsx)(e.span,{className:\"icon icon-link\"})}),\"Frontmatter\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"Frontmatter follows \",(0,t.jsx)(e.a,{href:\"https://gohugo.io/content-management/front-matter/\",children:\"Hugo's standards\"}),\".\"]}),`\n`,(0,t.jsx)(e.p,{children:\"Currently 7 fields are supported.\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsxs)(e.code,{className:\"code-highlight\",children:[(0,t.jsx)(e.span,{className:\"code-line\",children:`title (required)\n`}),(0,t.jsx)(e.span,{className:\"code-line\",children:`date (required)\n`}),(0,t.jsx)(e.span,{className:\"code-line\",children:`tags (required, can be empty array)\n`}),(0,t.jsx)(e.span,{className:\"code-line\",children:`lastmod (optional)\n`}),(0,t.jsx)(e.span,{className:\"code-line\",children:`draft (optional)\n`}),(0,t.jsx)(e.span,{className:\"code-line\",children:`summary (optional)\n`}),(0,t.jsx)(e.span,{className:\"code-line\",children:`images (optional, if none provided defaults to socialBanner in siteMetadata config)\n`}),(0,t.jsx)(e.span,{className:\"code-line\",children:\"authors (optional list which should correspond to the file names in `data/authors`. Uses `default` if none is specified)\\n\"}),(0,t.jsx)(e.span,{className:\"code-line\",children:\"layout (optional list which should correspond to the file names in `data/layouts`)\\n\"})]})}),`\n`,(0,t.jsx)(e.p,{children:\"Here's an example of a post's frontmatter:\"}),`\n`,(0,t.jsx)(e.pre,{children:(0,t.jsxs)(e.code,{className:\"code-highlight\",children:[(0,t.jsx)(e.span,{className:\"code-line\",children:`---\n`}),(0,t.jsx)(e.span,{className:\"code-line\",children:`title: 'Introducing Tailwind Nexjs Starter Blog'\n`}),(0,t.jsx)(e.span,{className:\"code-line\",children:`date: '2021-01-12'\n`}),(0,t.jsx)(e.span,{className:\"code-line\",children:`lastmod: '2021-01-18'\n`}),(0,t.jsx)(e.span,{className:\"code-line\",children:`tags: ['next-js', 'tailwind', 'guide']\n`}),(0,t.jsx)(e.span,{className:\"code-line\",children:`draft: false\n`}),(0,t.jsx)(e.span,{className:\"code-line\",children:`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.'\n`}),(0,t.jsx)(e.span,{className:\"code-line\",children:`images: ['/static/images/canada/mountains.jpg', '/static/images/canada/toronto.jpg']\n`}),(0,t.jsx)(e.span,{className:\"code-line\",children:`authors: ['default', 'sparrowhawk']\n`}),(0,t.jsx)(e.span,{className:\"code-line\",children:`layout: PostLayout\n`}),(0,t.jsx)(e.span,{className:\"code-line\",children:`---\n`})]})}),`\n`,(0,t.jsxs)(e.h3,{id:\"compose\",children:[(0,t.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#compose\",children:(0,t.jsx)(e.span,{className:\"icon icon-link\"})}),\"Compose\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"Run \",(0,t.jsx)(e.code,{children:\"node ./scripts/compose.js\"}),\" to bootstrap a new post.\"]}),`\n`,(0,t.jsx)(e.p,{children:\"Follow the interactive prompt to generate a post with pre-filled front matter.\"}),`\n`,(0,t.jsxs)(e.h2,{id:\"deploy\",children:[(0,t.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#deploy\",children:(0,t.jsx)(e.span,{className:\"icon icon-link\"})}),\"Deploy\"]}),`\n`,(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.strong,{children:\"Vercel\"}),(0,t.jsx)(e.br,{}),`\n`,\"The easiest way to deploy the template is to use the \",(0,t.jsx)(e.a,{href:\"https://vercel.com\",children:\"Vercel Platform\"}),\" from the creators of Next.js. Check out the \",(0,t.jsx)(e.a,{href:\"https://nextjs.org/docs/deployment\",children:\"Next.js deployment documentation\"}),\" for more details.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.strong,{children:\"Netlify / Github Pages / Firebase etc.\"}),(0,t.jsx)(e.br,{}),`\n`,\"As the template uses \",(0,t.jsx)(e.code,{children:\"next/image\"}),\" for image optimization, additional configurations has to be made to deploy on other popular static hosting websites like \",(0,t.jsx)(e.a,{href:\"https://www.netlify.com/\",children:\"Netlify\"}),\" or \",(0,t.jsx)(e.a,{href:\"https://pages.github.com/\",children:\"Github Pages\"}),\". An alternative image optimization provider such as Imgix, Cloudinary or Akamai has to be used. Alternatively, replace the \",(0,t.jsx)(e.code,{children:\"next/image\"}),\" component with a standard \",(0,t.jsx)(e.code,{children:\"<img>\"}),\" tag. See \",(0,t.jsxs)(e.a,{href:\"https://nextjs.org/docs/basic-features/image-optimization\",children:[(0,t.jsx)(e.code,{children:\"next/image\"}),\" documentation\"]}),\" for more details.\"]}),`\n`,(0,t.jsx)(e.p,{children:\"The API routes used in the newsletter component cannot be used in a static site export. You will need to use a form API endpoint provider and substitute the route in the newsletter component accordingly. Other hosting platforms such as Netlify also offer alternative solutions - please refer to their docs for more information.\"}),`\n`,(0,t.jsxs)(e.h2,{id:\"support\",children:[(0,t.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#support\",children:(0,t.jsx)(e.span,{className:\"icon icon-link\"})}),\"Support\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"Using the template? Support this effort by giving a star on Github, sharing your own blog and giving a shoutout on Twitter or be a project \",(0,t.jsx)(e.a,{href:\"https://github.com/sponsors/timlrx\",children:\"sponsor\"}),\".\"]}),`\n`,(0,t.jsxs)(e.h2,{id:\"licence\",children:[(0,t.jsx)(e.a,{\"aria-hidden\":\"true\",tabIndex:\"-1\",href:\"#licence\",children:(0,t.jsx)(e.span,{className:\"icon icon-link\"})}),\"Licence\"]}),`\n`,(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.a,{href:\"https://github.com/timlrx/tailwind-nextjs-starter-blog/blob/master/LICENSE\",children:\"MIT\"}),\" \\xA9 \",(0,t.jsx)(e.a,{href:\"https://www.timrlx.com\",children:\"Timothy Lin\"})]})]});return i?(0,t.jsx)(i,Object.assign({},n,{children:o})):o}var j=y;return N;})();\n;return Component.default;","toc":[{"value":"Tailwind Nextjs Starter Blog","url":"#tailwind-nextjs-starter-blog","depth":1},{"value":"Examples","url":"#examples","depth":2},{"value":"Motivation","url":"#motivation","depth":2},{"value":"Features","url":"#features","depth":2},{"value":"Sample posts","url":"#sample-posts","depth":2},{"value":"Quick Start Guide","url":"#quick-start-guide","depth":2},{"value":"Development","url":"#development","depth":2},{"value":"Extend / Customize","url":"#extend--customize","depth":2},{"value":"Post","url":"#post","depth":2},{"value":"Frontmatter","url":"#frontmatter","depth":3},{"value":"Compose","url":"#compose","depth":3},{"value":"Deploy","url":"#deploy","depth":2},{"value":"Support","url":"#support","depth":2},{"value":"Licence","url":"#licence","depth":2}],"frontMatter":{"readingTime":{"text":"6 min read","minutes":5.575,"time":334500,"words":1115},"slug":"introducing-tailwind-nextjs-starter-blog","fileName":"introducing-tailwind-nextjs-starter-blog.mdx","title":"Introducing Tailwind Nextjs Starter Blog","date":"2021-01-12T00:00:00.000Z","lastmod":"2021-09-08","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"]}},"authorDetails":[{"readingTime":{"text":"1 min read","minutes":0.615,"time":36900,"words":123},"slug":["default"],"fileName":"default.md","name":"Tails Azimuth","avatar":"/static/images/avatar.png","occupation":"Professor of Atmospheric Science","company":"Stanford University","email":"address@yoursite.com","twitter":"https://twitter.com/Twitter","linkedin":"https://www.linkedin.com","github":"https://github.com","date":null},{"readingTime":{"text":"1 min read","minutes":0.77,"time":46200,"words":154},"slug":["sparrowhawk"],"fileName":"sparrowhawk.md","name":"Sparrow Hawk","avatar":"/static/images/sparrowhawk-avatar.jpg","occupation":"Wizard of Earthsea","company":"Earthsea","twitter":"https://twitter.com/sparrowhawk","linkedin":"https://www.linkedin.com/sparrowhawk","date":null}],"prev":{"title":"Images in Next.js","date":"2020-11-11T00:00:00.000Z","tags":["next js","guide"],"draft":false,"summary":"In this article we introduce adding images in the tailwind starter blog and the benefits and limitations of the next/image component.","authors":["sparrowhawk"],"slug":"guide-to-using-images-in-nextjs"},"next":{"title":"Introducing Multi-part Posts with Nested Routing","date":"2021-05-02T00:00:00.000Z","tags":["multi-author","next-js","feature"],"draft":false,"summary":"The blog template supports posts in nested sub-folders. This can be used to group posts of similar content e.g. a multi-part course. This post is itself an example of a nested route!","slug":"nested-route/introducing-multi-part-posts-with-nested-routing"}},"__N_SSG":true}