My goal is to create a website that is simple, elegant, responsive, and performant. Let me know if you have any suggestions, or find a bug!
Based loosely on the Tailwind Nextjs Starter Blog.
- Typescript
- Tailwind
- Frontmatter
- Yarn
- NextJS and Vercel
- Mdx
yarn installFirst, run the development server:
yarn devOpen http://localhost:3000 to see the result. The site will live update as you code.
data/siteMetadata.js - contains most of the site related information which should be modified for a user's need.
data/authors/default.md - default author information (required). Additional authors can be added as files in data/authors.
data/projectsData.js - data used to generate styled card on the 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.
tailwind.config.js and css/tailwind.css - contain the tailwind stylesheet which can be modified to change the overall look and feel of the site.
css/prism.css - controls the styles associated with the code blocks. Feel free to customize it and use your preferred prismjs theme e.g. prism themes.
components/social-icons - to add other icons, simply copy an svg file from Simple Icons and map them in index.js. Other icons use 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.
next.config.js - configuration related to Next.js. You need to adapt the Content Security Policy if you want to load scripts, images etc. from other domains.
Frontmatter populates the metadata for a post. Frontmatter follows Hugo's standards.
See PostFrontMatter for required and optional fields.
A post can be part of a series. Each post in a series should have the same PostSeries name, and incrementing numbers. The series will then populate the next/previous navigation on each post.
Add a new post to the data/blog with the required frontmatter.
Vercel: Push to main will trigger a deploy on Vercel.
Please give proper attribution, and link back to the source page on this blog. Otherwise, you are free to use as you see fit. CC.
For non-watermarked images and prints, contact me at prints @ gregliest dot com
This repo: MIT
Original (for the template): MIT © Timothy Lin