README.md

@@ -1,30 +1,79 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+![tailwind-nextjs-banner](/public/static/images/twitter-card.png)
 
-## Getting Started
+# Tailwind Nextjs Starter Blog
+
+This is a [Next.js](https://nextjs.org/), [Tailwind CSS](https://tailwindcss.com/) 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.
+
+## Motivation
+
+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.
+
+It is inspired by [Lee Robinson's blog](https://github.com/leerob/leerob.io), but focuses only on static site generation. Design is adapted from [Tailwindlabs blog](https://github.com/tailwindlabs/blog.tailwindcss.com).
+
+I wanted it to be nearly as feature-rich as popular blogging templates like [beautiful-jekyll](https://github.com/daattali/beautiful-jekyll) and [Hugo Academic](https://github.com/wowchemy/wowchemy-hugo-modules) but with the best of React's ecosystem and current web development's best practices.
+
+## Features
+
+- Easy styling customization with [Tailwind 2.0](https://blog.tailwindcss.com/tailwindcss-v2)
+- Near perfect lighthouse score - [Lighthouse report](https://www.webpagetest.org/result/210111_DiC1_08f3670c3430bf4a9b76fc3b927716c5/)
+- Lightweight, 43kB first load JS, uses Preact in production build
+- Mobile-friendly view
+- Light and dark theme
+- [MDX - write JSX in markdown documents!](https://mdxjs.com/)
+- Server-side syntax highlighting with [rehype-prism](https://github.com/mapbox/rehype-prism)
+- Math display supported via [KaTeX](https://katex.org/)
+- Automatic image optimization via [next/image](https://nextjs.org/docs/basic-features/image-optimization)
+- Flexible data retrieval with [next-mdx-remote](https://github.com/hashicorp/next-mdx-remote)
+- Support for tags - each unique tag will be its own page
+- SEO friendly with RSS feed, sitemaps and more!
+
+## Quick Start Guide
+
+1. Fork this project
+2. Rename the project to <yourusername>.github.io
+3. Modify `siteMetadata.json` and blog posts
+4. Deploy on Vercel
+
+## Development
 
 First, run the development server:
 
 ```bash
-npm run dev
+npm start
 # or
-yarn dev
+npm run dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
 You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
 
-## Learn More
+## Extend / Customize
 
-To learn more about Next.js, take a look at the following resources:
+`data/siteMetadata.json` - contains most of the site related information which should be modified for a user's need.
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+`data/logo.svg` - replace with your own logo.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+`data/blog` - replace with your own blog posts.
 
-## Deploy on Vercel
+`public/static` - store assets such as images and favicons.
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+`css/tailwind.css` - contains the tailwind stylesheet which can be modified to change the overall look and feel of the site.
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+`components/social-icons` - to add other icons, simply copy an svg file from [Simple Icons](https://simpleicons.org/) and map them in `index.js`. Other icons uses [heroicons](https://heroicons.com/).
+
+`components/MDXComponents.js` - pass your own JSX code or React component by specifying it over here. You can then call them directly in the `.mdx` or `.md` file. By default, a custom link and image component is passed.
+
+`layouts` - main templates used in pages.
+
+`pages` - pages to route to. Read the [Next.js documentation](https://nextjs.org/docs) for more information
+
+## Deploy
+
+**Vercel**  
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/timlrx/tailwind-nextjs-starter-blog)
+
+The easiest way to deploy the template is to use the [Vercel Platform](https://vercel.com) from the creators of Next.js. Check out the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+
+**Netlify / Github Pages / Firebase etc.**  
+As the template uses `next/image` for image optimization, additional configurations has to be made to deploy on other popular static hosting websites like [Netlify](https://www.netlify.com/) or [Github Pages](https://pages.github.com/). An alternative image optimization provider such as Imgix, Cloudinary or Akamai has to be used. Alternatively, replace the `next/image` component with a standard `<img>` tag. See [`next/image` documentation](https://nextjs.org/docs/basic-features/image-optimization) for more details.

public/index.xml

@@ -24,6 +24,14 @@
     <pubDate>Sat, 16 Nov 2019 00:00:00 GMT</pubDate>
   </item>
 
+  <item>
+    <guid>https://tailwind-nextjs-starter-blog.vercel.appintroducing-tailwind-nextjs-starter-blog</guid>
+    <title>Markdown Guide</title>
+    <link>https://tailwind-nextjs-starter-blog.vercel.appintroducing-tailwind-nextjs-starter-blog</link>
+    <description>Markdown cheatsheet for all your blogging needs - headers, lists, images, tables and more! An illustrated guide based on Github Flavored Markdown.</description>
+    <pubDate>Fri, 11 Oct 2019 00:00:00 GMT</pubDate>
+  </item>
+
   <item>
     <guid>https://tailwind-nextjs-starter-blog.vercel.appgithub-markdown-guide</guid>
     <title>Markdown Guide</title>