/my-first-blog

My first dev blog using existing template.

Primary LanguageTypeScriptMIT LicenseMIT

My Dev Blog

My Dev blog powered by Nextjs, Tailwind, ContentLayer


Motive

I always wanted a DEV blog where I can post my thoughts and workflows. Decided to build my blog and tried with various tech stacks and finally landed upon current framework.

Template Used

schardev/nextjs-contentlayer-blog - This is the template I used here which met all my requirements. Mobile friendly, SEO friendly, easy to use, modern, readable and customize.

Theme

The template comes with a default theme based on Stone color palette from Tailwind CSS. But don't worry, you have the freedom to create your own theme by customising and tweaking config.css.

Getting Started

  1. Clone the starter template:
git clone https://github.com/schardev/nextjs-contentlayer-blog

# or using `gh`
gh repo clone schardev/nextjs-contentlayer-blog
  1. Add site information and relevant data to lib/siteConfig.ts.
  2. Add your blog posts to content/blog directory with proper front-matter (see available fields here)
  3. Build your blog with:
pnpm build
  1. Deploy to your hosting provider 🎉

Starting a development server isn't different either, just run:

pnpm dev

Now open http://localhost:3000 to view changes to your blog as it happens.

Directory and File Structure

Directory/File Notes
app/ Defines your site/blog's routes
components/ All react component code lives here
content/ Directory where your MDX or Markdown file lives
public/ Static assets goes here (e.g., put all your images inside public/images and fonts inside public/fonts etc)
styles/ Find all styling files here
schema/ Contains schema-related files
contentlayer.config.ts Contentlayer configuration file (you can change your content directory here)
lib/siteConfig.ts Holds config related to the site itself

Additional notes

  • If you have worked with next/image before you know that working with external images is a pain in the ass, as you have to manually inspect and pass width and height properties to the <Image/> component. Sure you can use fill property but then you have to have a fixed aspect ratio and/or deal with z-indexes. However, working with external images is now a breeze. Use the custom <Image/> component from the components/ directory that takes care of all of it. No more manual width and height hassles, as image optimizations are automatically handled.

  • Additionally, code blocks support everything rehype-pretty-code supports. You even get the bonus of file type icons! You can also extend or customize the default file type icons from here.

  • As mentioned already, styling is mostly controlled via CSS variables so it's pretty easy to tweak and configure. See config.css.

Note:

Image optimisations using custom <Image/> component only works if your blog is statically generated. Do not use it as a client or server component.

If you encounter any issues or have any feature requests, feel free to report them in the main repository.

Inspirations

Licence

MIT © Saurabh Charde

Feel free to use this in whatever projects you like. Make sure to star the repo if you like it.