Descritiion
forked by https://github.com/timlrx/tailwind-nextjs-starter-blog
이 프로젝트는 https://github.com/timlrx/tailwind-nextjs-starter-blog 를 fork해 커스터마이징한 repo 입니다.
기존 프로젝트에서 사용중인 next/image를 제거하고 static export가 가능하게 구조를 변경했으며 project 탭을 블로그 갤러리 뷰로 사용하고 있습니다.
블로그 작성
/data/blog
페이지 작성
/staticPages
Frontmatter
blog 작성시 주요 필드 정리
title (required)
date (required) '2021-01-01'
tags (required, can be empty array) ['test1','test2']
draft (optional) true | false
summary (optional)
thumbs (required, can be empty array) ['/images/avatar.png']
page 작성시 주요 필드 정리
title (required)
date (required)
tag (optional)
Tailwind Nextjs Starter Blog
This is a Next.js, Tailwind CSS 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.
Examples
- Demo Blog - this repo
- My personal blog - modified to auto-generate blog posts with dates
Using the template? Happy to accept any PR with modifications made e.g. sub-paths, localization or multiple authors
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, but focuses only on static site generation. Design is adapted from Tailwindlabs blog.
I wanted it to be nearly as feature-rich as popular blogging templates like beautiful-jekyll and Hugo Academic but with the best of React's ecosystem and current web development's best practices.
Features
- Easy styling customization with Tailwind 2.0
- Near perfect lighthouse score - Lighthouse report
- Lightweight, 43kB first load JS, uses Preact in production build
- Mobile-friendly view
- Light and dark theme
- MDX - write JSX in markdown documents!
- Server-side syntax highlighting with rehype-prism
- Math display supported via KaTeX
- Automatic image optimization via next/image
- Flexible data retrieval with next-mdx-remote
- Support for tags - each unique tag will be its own page
- Support for nested routing of blog posts
- Projects page
- SEO friendly with RSS feed, sitemaps and more!
Sample posts
- A markdown guide
- Learn more about images in Next.js
- A tour of math typesetting
- Simple MDX image grid
- Example of long prose
- Example of Nested Route Post
Quick Start Guide
npx degit https://github.com/timlrx/tailwind-nextjs-starter-blog.git
- Personalize
siteMetadata.json
- Modify
projectsData.js
- Modify
headerNavLinks.js
to customize navigation links - Add blog posts
- Deploy on Vercel
Development
First, run the development server:
npm start
# or
npm run dev
Open 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.
Extend / Customize
data/siteMetadata.json
- contains most of the site related information which should be modified for a user's need.
data/projectsData.js
- data used to generate styled card in projects page.
data/headerNavLinks.js
- navigation links.
data/logo.svg
- replace with your own logo.
data/blog
- replace with your own blog posts.
public/static
- store assets such as images and favicons.
css/tailwind.css
- contains the tailwind stylesheet which can be modified to change the overall look and feel of the site.
components/social-icons
- to add other icons, simply copy an svg file from Simple Icons and map them in index.js
. Other icons uses heroicons.
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 for more information