morethan-log

Next.js static blog using Notion as a Content Management System (CMS). Supports both Blog format Post as well as Page format for Resume. Deployed using Vercel.

Demo Blog | Demo Resume

Features

📒 Writing posts using notion

No need of commiting to Github for posting anything to your website.
Posts made on Notion are automaticaly updated on your site.

📄 Use as a page as resume

Useful for generating full page sites using Notion.
Can be used for Resume, Portfolios etc.

👀 SEO friendly

Dynamically generates OG IMAGEs (thumbnails!) for posts. (og-image-korean).
Dynamically creates sitemap for posts.

Add a new language

Add a new language in ./src/locales folder with the same structure as en.json.
Add a new language in Next.config.js with the same structure as en.
Dubplicate Notion template and share to web.
Add the new Notion page Id in ./src/locals/index.ts with the same structure as en and chnage last part of the key to the new language code.

Note: if you dont set on ./src/locales/index.ts->NOTION_PAGE_ID_{LANG} environment variable, it will use NOTION_PAGE_ID environment variable from set.config.js.

Disable Multi language

uncomment insaid array on file ./src/locales/index.ts and set you default language on next.config.js file.
set NOTION_PAGE_ID environment variable from set.config.js.

🤖 Customisable and Supports various plugin through CONFIG

Your profile information can be updated through Config. (site.config.js)
Plugins support includes, Google Analytics, Search Console and also Commenting using Github Issues(Utterances) or Cusdis.

🌎 Internationalization

Supports multiple languages. (English, Arabic)
Can be easily extended to support more languages.

Getting Started

Star this repo.
Fork the repo to your Profile.
Duplicate this Notion template, and Share to Web.
Copy the Web Link and keep note of the Notion Page Id from the Link which will be in this format [username.notion.site/NOTION_PAGE_ID?v=VERSION_ID].
Clone your forked repo and then customize site.config.js based on your preference.
Deploy on Vercel, with the following environment variables.
- NOTION_PAGE_ID (Required): The Notion page Id got from the Share to Web URL.
- NEXT_PUBLIC_GOOGLE_MEASUREMENT_ID : For Google analytics Plugin.
- NEXT_PUBLIC_GOOGLE_SITE_VERIFICATION : For Google search console Plugin.

10 Steps to build your own morethan-log (by 23.06.23)

Click to see guide

Prepare Notion, Vercel account.
⭐ Star and Fork this repo.

As you click the Notion template, you will see this notion page in your browser. Click Duplicate button(복제 in image) in right top.

And you will see notion page in notion app in your account.

Click Share and Publish in right top, and check web link. (Copy web link)

Modify site.config.js file in your forked repo.

💡 NOTE. I changed 2 RED PART

Move and login to vercel.

Build new project using Add New...

Import your forked morethan-log repository

Add Environment variabes to vercel project

Wait for the deployment to complete. After the deployment is successful, you should see an image like the one below.

🥳 Congratulations. Now check out your blog

Add a new language

Add a new language in ./src/locales folder with the same structure as en.json.
Add a new language in Next.config.js with the same structure as en.
Dubplicate Notion template and share to web.
Add the new Notion page Id in ./src/locals/index.ts with the same structure as en and chnage last part of the key to the new language code.

Note: if you dont set on ./src/locales/index.ts->NOTION_PAGE_ID_{LANG} environment variable, it will use NOTION_PAGE_ID environment variable from set.config.js.

Disable Multi language

uncomment insaid array on file ./src/locales/index.ts and set you default language on next.config.js file.
set NOTION_PAGE_ID environment variable from set.config.js.