Tailwind Nextjs Starter Blog V0.1.2 now comes with a project page.
Also fixed a few flex bugs on Safari.
Really enjoying developing on nextjs so far, especially with next/image which makes image optimization pretty straightforward.
The only difficulty is parsing the image dimensions. This is solved over here: https://github.com/timlrx/tailwind-nextjs-starter-blog/blob/master/lib/img-to-jsx.js where I used the image-size library to get the file dimensions.
Feature List
Tailwind 2.0
Near perfect lighthouse score
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
Projects page
SEO friendly with RSS feed, sitemaps and more!
Here's how the new projects page looks like:
And here's how the current blog posts looks like:
Let me know if you are using the template / planning to use the template and what other features would you like to see!
Top comments (7)
Hey Tim, thanks for the awesome starter blog. I've been playing around with it for a few months now and just love the template. Honestly I can't shut up about it and have mentioned it in my newsletter a couple times already.
I have two questions. In your experience, what's a great CMS option to connect to Next.js if I don't want to use the Markdown files?
Second, what's a good strategy to keep a project like this up-to-date with changes you might make (like those flex bugs you fixed)? Subscribing to the repository and reconciling any code changes you make with my project?
Hi Derek, the best way would it sync it would probably be merging the master branch from Github once in a while. The tricky thing is some of the changes are bug fixes and others might be more aesthetic or introduce new functionalities. In any case, if it works well for you, there's really no need to have the latest version. Maybe, you could cherry pick the latest features if you like them.
For other static site generators like hugo, normally there is a theme section and you can just sync the latest theme, but since this does not have a such a strong separation of template vs data, it makes it a little harder!
On CMS, if you are fine with a git based workflow, I think netlify CMS or forestry would work. I use forestry on my corporate blog. Other popular choices would be prismic or sanity but there's definitely a higher learning curve.
Thanks Tim. That's a good point about the theme workflow compared to e.g. Hugo.
I've used Netlify CMS & Forestry as well as Stackbit Studio for handling the git based workflow in the past. Obsidian is a nice local choice for Markdown file management too. I'm not sure which of those I'd be particularly comfortable handing off to a client, though.
I appreciate your thoughts & especially your template! Have a good one!
hey. i’m trying to use this as a starter blog. when i build. the error says it can’t map through posts because posts isn’t recognized. what am i doing wrong?
Hi, I just pulled the latest version and run npm build without problems. Are all your blog posts in the blog folder? Does your frontmatter follow a similar format as the posts I have or did you modify them? Any other modifications made?
You can run
node ./scripts/compose.js "My First Post" .mdto generate a sample post to test outty! i started tinkering with his leerob.io repository and got a site up. i implemented your mobileNav. i’m still a newbie. I prob set the frontMatter date wrong on the blog posts.
I’m trying to customize it more. like add your tag feature. I’m using this as a learning tool also.
Date needs to be represented as a string with the quotations like 'YYYY-MM-DD'. Have fun playing around and learning!