{"id":19817703,"url":"https://github.com/msaaddev/create-nextjs-blog","last_synced_at":"2025-05-01T11:31:07.761Z","repository":{"id":65531276,"uuid":"582672904","full_name":"msaaddev/create-nextjs-blog","owner":"msaaddev","description":"Instantly set up Next.js blog with TS or JS using npx create-nextjs-blog","archived":false,"fork":false,"pushed_at":"2023-01-07T16:18:05.000Z","size":2465,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-04-29T09:21:03.778Z","etag":null,"topics":["blog","next","next-mdx","next-mdx-remote","nextjs","nextjs-blog","nextjs-boilerplate","nextjs-starter","nextjs-template"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/msaaddev.png","metadata":{"files":{"readme":"readme.md","changelog":"changelog.md","contributing":"contributing.md","funding":null,"license":"license","code_of_conduct":"code-of-conduct.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-12-27T14:41:41.000Z","updated_at":"2024-01-24T15:49:53.000Z","dependencies_parsed_at":"2023-02-07T15:16:40.185Z","dependency_job_id":null,"html_url":"https://github.com/msaaddev/create-nextjs-blog","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msaaddev%2Fcreate-nextjs-blog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msaaddev%2Fcreate-nextjs-blog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msaaddev%2Fcreate-nextjs-blog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msaaddev%2Fcreate-nextjs-blog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/msaaddev","download_url":"https://codeload.github.com/msaaddev/create-nextjs-blog/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224253335,"owners_count":17280934,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["blog","next","next-mdx","next-mdx-remote","nextjs","nextjs-blog","nextjs-boilerplate","nextjs-starter","nextjs-template"],"created_at":"2024-11-12T10:13:23.843Z","updated_at":"2024-11-12T10:13:28.092Z","avatar_url":"https://github.com/msaaddev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![cover](assets/cover.png)\n\n\u003cdiv align=\"center\"\u003e\n\t\u003cimg src=\"https://img.shields.io/npm/v/create-nextjs-blog?color=1E1E1E\" alt=\"version\"\u003e\n\t\u003cimg src=\"https://img.shields.io/npm/l/create-nextjs-blog?color=1E1E1E\" alt=\"license\"\u003e\n\t\u003cimg src=\"https://img.shields.io/npm/dt/create-nextjs-blog?color=1E1E1E\" alt=\"downloads\"\u003e\n\t\u003ca href=\"https://stars.github.com/nominate/\"\u003e\n\t\t\u003cimg src=\"https://img.shields.io/badge/GitHub%20Star-Nominate-1E1E1E\" alt=\"nominate @msaaddev for GitHub Star\" /\u003e\n\t\u003c/a\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n\t\u003cstrong\u003eInstantly set up Next.js blog with TypeScript or JavaScript\u003c/strong\u003e\n\u003c/p\u003e\n\n![separator](assets/separator.jpeg)\n\n- **JavaScript Blog**: Set up a blog with JavaScript in seconds\n- **TypeScript Blog**: Set up a blog with TypeScript in seconds\n- **Tailwind CSS**: Supports Tailwind CSS out of the box for TypeScript ATM\n- **Unopinionated**: No opinionated styling or UI. You can build your own UI on top of it\n- **Category**: Create different post category with category individual pages. Read more [here](#create-categories)\n- **Post**: Create a new blog post by creating a new markdown file in the `posts` directory\n- **Route**: Automatically create routes for your blog posts based on the markdown file name\n- **SEO**: Use your blog post frontmatter to add SEO tags to your blog post\n- **Markdown components**: Use React components in your markdown blog posts\n- **MIT License**: Free to use for personal and commercial projects\n\n\u003cbr\u003e\n\n[*Live demo of the blog*](https://create-nextjs-blog.vercel.app/blog)\n\n\u003cbr\u003e\n\n\u003cimg src=\"./assets/suitcase.png\" width=\"10%\" /\u003e\n\n## Installation\n\n```sh\n# use it with npx (recommended)\nnpx create-nextjs-blog@latest\n\n# install the CLI globally\nnpm i -g create-nextjs-blog@latest\n```\n\n\u003cbr\u003e\n\n\u003cimg src=\"./assets/rocket.png\" width=\"10%\" /\u003e\n\n## Usage\n\n```sh\n# npx: create a new Next.js blog\nnpx create-nextjs-blog@latest\n\n# npx create a next Next.js blog with TypeScript\nnpx create-nextjs-blog@latest --typescript\n\n# npx create a next Next.js blog with Tailwind CSS \u0026 TypeScript\nnpx create-nextjs-blog@latest --withTailwind\n\n# npx create a next Next.js blog with JavaScript\nnpx create-nextjs-blog@latest --javascript\n\n# global: create a new Next.js blog\ncnb\n\n# global: create a next Next.js blog with TypeScript\ncnb --typescript\n\n# global: create a next Next.js blog with Tailwind CSS \u0026 TypeScript\ncnb --withTailwind\n\n# global: create a next Next.js blog with JavaScript\ncnb --javascript\n```\n\n\u003eOnce the blog is set up, run the Next.js app and navigate to [`http://localhost:3000/blog`](http://localhost:3000/blog) to see your blog. I highly recommend using [Vercel](https://vercel.com) to deploy your blog.\n\n## Demo\n\n![demo](assets/demo.gif)\n\n\u003cbr\u003e\n\n\u003cimg src=\"./assets/workflow.png\" width=\"10%\" /\u003e\n\n## Create a new blog post\n\n1. Create a new markdown file in the `posts` directory. For example, if you want to create a new blog post named `my-first-blog-post`, create a new file named `my-first-blog-post.md`.\n2. Add the frontmatter to the markdown file. The frontmatter is the metadata of your blog post. It contains the title, description, tags (SEO keywords), category, publish date, modified date, cover image of your blog post. Here is an example of the frontmatter.\n\n```mdx\n---\ntitle: Hello World\ndescription: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor'\ntag:\n    - example\n    - demo\ncategory:\n    - test\npublishedDate: 2022-12-28T16:27:05.876Z\nlastModifiedDate: 2022-12-28T16:27:05.876Z\ncover: ''\n---\n```\n\n3. Add the content of your blog post to the markdown file. You can use React components in your markdown file. Click [here](#inject-markdown-components) if you want to learn how to inject React components in your blog. The following is an example of a markdown blog post that uses a React component.\n\n```md\n## Paragraph\n\nLorem ipsum dolor sit amet, *consectetur* adipiscing elit, sed do eiusmod tempor **incididunt** ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea ***commodo*** consequat.\n\n\u003cNote\u003e\n    This is a sample note\n\u003c/Note\u003e\n```\n\n4. If you want to locally look at the blog post in your browser, run the following command once in your terminal.\n\n```sh\nnpm run generate-data\n```\n\n5. Now navigate to [`http://localhost:3000/blog/my-first-blog-post`](http://localhost:3000/blog/my-first-blog-post) to see your blog post.\n6. Once you are done, push the markdown file to your GitHub repository. Your blog post will be automatically deployed to your blog site.\n\n\u003eYou only need to run the command in step #4 once. You don't have to run it again after updating the file.\n\n## Create categories\n\n***Add a new category***\n\nTo add a new category, go to the `data/categories.json` file and create an object with your category. For example, if you want to add a `life` category, add an object with a single `name` key inside they JSON array.\n\n```json\n[\n\t{\n\t\t\"name\": \"life\"\n\t}\n]\n```\n\n***Use category in your blog file***\n\nTo use this newly created `life` category in your blog file, just add it as a value to the category in your markdown file frontmatter. For example, if you want to add a `life` category to your blog post, here is how you can do it.\n\n```mdx\n---\ntitle: 'My first blog post'\ndescription: 'This is my first blog post'\ncategory:\n    - life\n---\n```\n\n***Category page***\n\n- Your blog site has a category page. To access this page, navigate to [`http://localhost:3000/blog/category`](http://localhost:3000/blog/category) to see all the different blog categories you have.\n- To access a specific category page, navigate to [`http://localhost:3000/blog/category/guide`](http://localhost:3000/blog/category/guide) to see all the blog posts with the `guide` category.\n- You can also click on the category name in the blog post card at [`http://localhost:3000/blog`](http://localhost:3000/blog) to navigate to the category page.\n- Here is the live [demo](https://create-nextjs-blog.vercel.app/blog/category) of the category page. Click on any category, all the posts in that category will be displayed. If you want to see all the posts, navigate to [`https://create-nextjs-blog.vercel.app/blog`](https://create-nextjs-blog.vercel.app/blog).\n\n## Inject Markdown Components\n\n***Create a component***\n\nThe CLI uses [next-mdx-remote](https://github.com/hashicorp/next-mdx-remote) to render markdown files. You can create your own components and use them in your markdown files. To create a component, create a new file in the `components/markdown` directory. For example, if you want to create a `Note` component, create a new file in the `components/markdown` directory named `Note.js` or `Note.tsx` depending on the type of blog you created.\n\n```js\nconst Note = ({ children }) =\u003e {\n\treturn (\n\t\t\u003cp\n\t\t\tstyle={{\n\t\t\t\tbackgroundColor: '#fad',\n\t\t\t\tborderRadius: '10px',\n\t\t\t\tboxShadow: '0 0 5px #fad',\n\t\t\t\tpadding: '10px',\n\t\t\t\tmargin: '0 20px'\n\t\t\t}}\n\t\t\u003e\n\t\t\t\u003cem\u003e{children}\u003c/em\u003e\n\t\t\u003c/p\u003e\n\t);\n};\n\nexport default Note;\n```\n\n***Add the component in the `components/markdown/index.js` or `index.tsx` file***\n\n```js\nimport dynamic from 'next/dynamic';\n\nconst Note = dynamic(() =\u003e import('./Note'), { ssr: false });\n\nconst MarkdownComponents = () =\u003e {\n\treturn {\n\t\t// h1: (props: any) =\u003e \u003ch1 {...props} /\u003e,\n\t\tNote: props =\u003e \u003cNote {...props} /\u003e\n\t};\n};\n\nexport default MarkdownComponents;\n```\n\n***Use this component in your markdown blog files***\n\n```md\n\u003cNote\u003eYou can use this component in your markdown files.\u003c/Note\u003e\n```\n\n***Live demo***\n\nYou can see a live demo of this component [here](https://create-nextjs-blog.vercel.app/blog/hello-world). You can find its source code [here](https://github.com/msaaddev/create-nextjs-blog/tree/main/examples/markdown-blog-javascript/components/markdown).\n\n## Contributing Guidelines\n\nMake sure you read the [contributing guidelines](https://github.com/msaaddev/create-nextjs-blog/blob/main/contributing.md) before opening a PR.\n\n## Other Projects\n\nI have curated a [detailed list](https://github.com/msaaddev/open-source) of all the open-source projects I have authored. Do take out a moment and take a look.\n\n## License \u0026 Conduct\n\n-   MIT © [Saad Irfan](https://github.com/msaaddev)\n-   [Code of Conduct](https://github.com/msaaddev/create-nextjs-blog/blob/main/code-of-conduct.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmsaaddev%2Fcreate-nextjs-blog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmsaaddev%2Fcreate-nextjs-blog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmsaaddev%2Fcreate-nextjs-blog/lists"}