{"id":20397463,"url":"https://github.com/ajeetchaulagain/nextjs-blog-starter-styled-components","last_synced_at":"2026-05-11T14:32:14.713Z","repository":{"id":214118575,"uuid":"735529402","full_name":"ajeetchaulagain/nextjs-blog-starter-styled-components","owner":"ajeetchaulagain","description":"A blog starter kit built using Next.js app router, styled-components, typescript and configured to source blog post from a markdown files.","archived":false,"fork":false,"pushed_at":"2023-12-27T16:31:18.000Z","size":786,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-05T10:28:47.027Z","etag":null,"topics":["app-router-nextjs","blog-template","blog-theme","markdown-post","markdown-to-html","nextjs","reusable-components","styled-component","typescript"],"latest_commit_sha":null,"homepage":"https://nextjs-blog-styled.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ajeetchaulagain.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-12-25T08:48:39.000Z","updated_at":"2024-12-10T05:01:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"c1e6ca7b-d837-4251-86a2-1d486745eb53","html_url":"https://github.com/ajeetchaulagain/nextjs-blog-starter-styled-components","commit_stats":null,"previous_names":["ajeetchaulagain/nextjs-blog-starter-styled-components"],"tags_count":1,"template":true,"template_full_name":null,"purl":"pkg:github/ajeetchaulagain/nextjs-blog-starter-styled-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajeetchaulagain%2Fnextjs-blog-starter-styled-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajeetchaulagain%2Fnextjs-blog-starter-styled-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajeetchaulagain%2Fnextjs-blog-starter-styled-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajeetchaulagain%2Fnextjs-blog-starter-styled-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ajeetchaulagain","download_url":"https://codeload.github.com/ajeetchaulagain/nextjs-blog-starter-styled-components/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajeetchaulagain%2Fnextjs-blog-starter-styled-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32898957,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-10T13:40:02.631Z","status":"online","status_checked_at":"2026-05-11T02:00:05.975Z","response_time":120,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["app-router-nextjs","blog-template","blog-theme","markdown-post","markdown-to-html","nextjs","reusable-components","styled-component","typescript"],"created_at":"2024-11-15T04:14:15.191Z","updated_at":"2026-05-11T14:32:14.689Z","avatar_url":"https://github.com/ajeetchaulagain.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Vercel](https://therealsujitk-vercel-badge.vercel.app/?app=nextjs-blog-styled)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/ajeetchaulagain/nextjs-blog-starter-styled-components/issues)\n\n# Next.js Blog Starter Kit with styled-components\n\nThis is a Blog starter kit built using [Next.js ](https://nextjs.org/) 14 (with [app router](https://nextjs.org/docs/app)), [styled-components](https://styled-components.com/) and typescript.\n\n**Live Demo:** https://nextjs-blog-styled.vercel.app/\n\n## Features\n\n- [styled-components](https://styled-components.com/) configuration with server-side rendering\n- Data sourcing for a blog post through Markdown files\n- Styling through Reusable components\n- Typescript and Eslint configuration\n- Uses Next.js latest [App Router](https://nextjs.org/docs/app) paradigm\n\n## How to use\n\n\u003e [!IMPORTANT]\n\u003e This application requires **Node.js v18.17+.**\n\n### Installation \u0026 running project\n\nExecute [create-next-app](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with npm or yarn to bootstrap this template or clone this repo:\n\n```bash\nnpx create-next-app --example https://github.com/ajeetchaulagain/nextjs-blog-starter-styled-components my-blog\n```\n\nOR\n\n```bash\ngit clone https://github.com/ajeetchaulagain/nextjs-blog-starter-styled-components.git my-blog\n```\n\nInstall `node_modules` and run dev server:\n\n```bash\ncd my-blog\nnpm install\nnpm run dev\n```\n\nYour dev server should be up and running at [http://localhost:3000](http://localhost:3000)\n\n### Usage Guide/Note\n\n- To add a blog post, add the new markdown file in `/posts` directory\n\n  \u003e **Note**: To create a blog post [remark](https://github.com/remarkjs/remark) and [remark-html](https://github.com/remarkjs/remark-html) is used to convert the markdown files into HTML string, which is then passed to page as the props. And for the metadata, [gray-matter](https://github.com/jonschlinkert/gray-matter) is used.\n\n- For styling markdown post, base styles are setup in `styles/MarkdownStyles.tsx`. For styling other pages, a minimal set of re-usable components created in this project are used.\n\n## Deployment\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template\u0026filter=next.js\u0026utm_source=create-next-app\u0026utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fajeetchaulagain%2Fnextjs-blog-starter-styled-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fajeetchaulagain%2Fnextjs-blog-starter-styled-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fajeetchaulagain%2Fnextjs-blog-starter-styled-components/lists"}