Free Next.js Blog Template
MIT License
https://theme-awesome.vercel.app/
You can download latest version from here https://storage.googleapis.com/theme-awesome/awesome.zip
I just want to create/update markdown files to deploy sites using Git. This blog can run without any SaaS service such as contentful or Strapi
Node.js and npm
.
README.md # README file
next.config.js # Next JS configuration
blog.config.ts # The theme's original configuration
next-sitemap.js # Sitemap configuration
public # Public folder
assets
images # Image used by the theme
components
articles # The components related to article
buttons # The components related to article
common # The common components
layouts # Layout components of the theme
sides # The components related to side column
texts # The components related to texts
utils # The utility components
contents # Markdown files for each contents
pages # Next JS pages
hooks # React hooks functions
styles # Global css directory
types # Type utilities
utils # Utility functions
.babelrc # Babel configuration to extends Next.js
.editorconfig # Editor configuration
.eslint # JavaScript coding rule configuration
tsconfig.json # TypeScript configuration
tsconfig.json # TypeScript configuration
package.json # Package configuration to install dependencies
yarn.lock # Package configuration to install dependencies
vercel.json # Vercel configuration to deploy the theme
$ cd ./path/to/the/project
$ npm install
$ npm run dev
Open https://localhost:3300 with your favorite browser
First, copy the contents of the theme, and push them to the GitHub
Second, Using the vercel is the easiest way to deploy the site.
You can customize the site easily with blog.config.ts
blog.config.ts
looks like below.
blog.config.ts
export default {
siteLogo: {
url: "/images/logo.svg",
width: "201",
height: "39",
},
siteName: "AWESOME",
title: "AWESOME",
description: "AWESOME Next.js TypeScript MDX Blog Theme",
styles: {
containerMaxWidth: "1280px",
colors: {
primary: "#50C0A1",
primaryGradient: "linear-gradient(to right, #06A9B7, #B0DE87)",
base: "#F2F4F3",
border: "",
bg: "#F7F7F7",
text: "#2C2C2C",
grayLighter: "#A0A0A0",
},
breakPoints: {
huge: "1440px",
large: "1170px",
medium: "768px",
small: "450px",
},
},
account: {
name: "Mr. AWESOME",
description: "profile here profile here profile here profile here",
image: `/images/me.png`,
social: {
twitter: "https://twitter.com/steelydylan",
github: "https://github.com/steelydylan",
},
},
hero: {
title: "My awesome life",
image: "/images/plane.jpeg",
description: "AWESOME Next.js TypeScript MDX Blog Theme",
},
navigation: [
{
name: "travel",
url: `/travel`,
},
{
name: "camp",
url: `/camp`,
},
],
article: {
defaultThumbnail: "/images/thumbnail.png",
articlesPerPage: 6,
},
categories: [
{
id: "camp",
title: "Camp",
imagePath: "/images/camp.jpeg",
description: "Look at my awesome camp life",
},
{
id: "travel",
title: "Travel",
imagePath: "/images/london.jpeg",
description: "Look at my awesome travel life",
},
],
tags: [
{
id: "london",
title: "London",
},
{
id: "boston",
title: "Boston",
},
{
id: "paris",
title: "Paris",
},
{
id: "fire",
title: "Fire",
},
{
id: "sky",
title: "Sky",
},
],
};
siteLogo
the header logo image and its sizesiteName
the site name for the SEO and OGPtitle
the title tagdescription
the description for the top pagestyles
the site CSSaccount
the blog author infohero
the hero image of the top pagenavigation
the header navigationarticle.defaultThumbnail
the default thumbnail of the each articlesarticle.articlesPerPage
the number of the article of the each index pageswriters
id
the slug of the writertitle
the title of the writerimage
the image url of the writerdescription
the description of the writercategories
id
the slug of the category. it is used for the urltitle
the title of the categoryimagePath
the image url of the categorydescription
the description of the categorytags
id
the slug of the tag. it is used for the urltitle
the title of the tagAdd mdx files on the following path contents/***/index.mdx
The ***
part will be the slug of the article
Each articles can have meta info via frontmatter like belows.
---
title: Awesome - Next.js Blog Theme
date: 2021-09-18
writtenBy: steelydylan
category: themes
tags: ["about"]
related: []
thumbnail: /images/awesome.png
---
title
the title of the articledate
written date of the articlewrittenBy
the author of the articlecategory
the category of the article, it should be defined on the blog.config.ts
related
related articles of the article, it should be the article slugs arraythumbnail
the thumbnail image of the articledescription
the description of this articleFirst, let's create a database in Notion. Type /table
to create a table block, which will be the database.
Prepare the following properties for the table
Page
Title of the portfolioSlug
Used as the URL to display the portfolioPublished
Whether to display the portfolio or notDate
The date of the portfolioAuthors
The author of this articleThumbnail
Thumbnail of the articleDescription
Brief description of the portfolioCategory
category of the articleThis sample page will help
Next, We will obtain the Secret Key and Database ID from Notion.
First, obtain the Secret Key.
To obtain the Secret Key, go to the Notion page, Settings & Members, Integrations, Develop your own integrations, and create a new Integration.
Next, invite the integration you just created to the table you just created.
Click the Share button in the upper right corner of the Notion, and invite the integration you created from Invite in the popover that appears.
Next, obtain the database ID.
The table page has the following URL
https://www.notion.so/*****************?v=xxxxxxxxxxxxxxxxxxxxxxxxxxxx
The ****************
part is the database ID, so write it down.
Enter the information you have noted in the .env file
NOTION_DATABASE_ID=
NOTION_TOKEN=
In, blog.config.ts
, just set notion
to use
property
use: "notion", // mdx or notion
MIT License