{"id":4622,"date":"2025-09-13T22:28:00","date_gmt":"2025-09-13T14:28:00","guid":{"rendered":"https:\/\/lupinvisual.com\/?p=4622"},"modified":"2026-04-15T20:00:58","modified_gmt":"2026-04-15T12:00:58","slug":"zero-cost-website","status":"publish","type":"post","link":"https:\/\/lupinvisual.com\/en\/blog\/zero-cost-website\/","title":{"rendered":"Notion Website Setup Tutorial: Build Your Own Site at Zero Cost"},"content":{"rendered":"<p>Website Preview: <a href=\"https:\/\/preview.tangly1024.com\/en\" target=\"_blank\" rel=\"noopener\"><\/a><a href=\"https:\/\/preview.tangly1024.com\/\" target=\"_blank\" rel=\"noopener\">https:\/\/preview.tangly1024.com\/<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. NotionNext Website Setup Guide: Advantages, Process, and Key Considerations<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u2705 Advantages of NotionNext<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Save money<\/strong>Completely free, open-source, and zero cost.<\/li>\n\n\n\n<li><strong>Super simple<\/strong>Whenever you write an article in Notion, it will automatically sync.<\/li>\n\n\n\n<li><strong>Quickly go live<\/strong>Deploying on Vercel is a breeze.<\/li>\n\n\n\n<li><strong>Focus on creation<\/strong>Focus on creating content without distractions from managing the platform or maintenance.<\/li>\n\n\n\n<li><strong>Looks good<\/strong>The templates and themes are already designed, providing ready-made professional blogs.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u26a0\ufe0f Limitations and Risks of NotionNext<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Customization is limited<\/strong>A major overhaul would be troublesome.<\/li>\n\n\n\n<li><strong>Relying on the Notion API<\/strong>If the Notion API experiences issues or changes, the website may be affected.<\/li>\n\n\n\n<li><strong>Learning Threshold<\/strong>Although simple, it still requires some basic knowledge of GitHub\/Vercel, otherwise you might get stuck.<\/li>\n\n\n\n<li><strong>SEO isn't necessarily good.<\/strong>Compared to traditional professional WordPress website building tools, it offers fewer SEO control options.<\/li>\n\n\n\n<li><strong>Single-function<\/strong>Suitable for simple text input. If you require complex interactions like shopping carts or membership systems, it is not suitable.<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Overall, NotionNext offers advantages in cost, ease of use, and intuitive operation, making it particularly suitable for those who simply need a basic website that can go live. While it has limitations in advanced features and high-level customization, it remains the most suitable choice for my current needs.<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">2. Preparations<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>When applying for a Notion account, we highly recommend using your school email address to sign up. This grants you unlimited pages for creating and managing content.<\/li>\n\n\n\n<li>Register a GitHub account<\/li>\n\n\n\n<li>Sign up for a Vercel account (we recommend logging in directly with GitHub)<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">3. Website Setup Process - Template &gt; Code &gt; Deployment<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"324\" src=\"https:\/\/lupinvisual.com\/wp-content\/uploads\/2025\/12\/notionext_step-1024x324.png\" alt=\"\" class=\"wp-image-4625\" style=\"width:373px;height:auto\" srcset=\"https:\/\/lupinvisual.com\/wp-content\/uploads\/2025\/12\/notionext_step-1024x324.png 1024w, https:\/\/lupinvisual.com\/wp-content\/uploads\/2025\/12\/notionext_step-300x95.png 300w, https:\/\/lupinvisual.com\/wp-content\/uploads\/2025\/12\/notionext_step-768x243.png 768w, https:\/\/lupinvisual.com\/wp-content\/uploads\/2025\/12\/notionext_step-1536x486.png 1536w, https:\/\/lupinvisual.com\/wp-content\/uploads\/2025\/12\/notionext_step-2048x647.png 2048w, https:\/\/lupinvisual.com\/wp-content\/uploads\/2025\/12\/notionext_step-18x6.png 18w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Deploying a site requires just three major steps:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Copy tangly1024's Notion template<\/li>\n\n\n\n<li>Clone tangly1024's GitHub source code<\/li>\n\n\n\n<li>Deploying in Vercel<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">STEP 1: Copy the Notion template<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>After logging into your Notion account, copy the template below.<\/li>\n<\/ul>\n\n\n\n<p><a href=\"https:\/\/tanghh.notion.site\/02ab3b8678004aa69e9e415905ef32a5?v=b7eb215720224ca5827bfaa5ef82cf2d\" target=\"_blank\" rel=\"noopener\">Notion Blog | Notion<\/a><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click \"Duplicate\" in the upper-right corner, select the workspace where you want to save it, and wait for it to be copied over. <img decoding=\"async\" src=\"https:\/\/raw.githubusercontent.com\/lupinart\/webimage\/main\/notion_web_1.gif\" alt=\"How to Duplicate NotionNext Templates in Notion\"> How to Duplicate NotionNext Templates in Notion<\/li>\n\n\n\n<li>Publish the webpage and make it public. A 32-character page ID will appear afterward; save it for later. <img decoding=\"async\" src=\"attachment:581d7c30-abb4-4855-9e29-dc1abe804b3c:pic1.png\" alt=\"Notion page IDs consist of 32 characters.\"> Notion page IDs consist of 32 characters.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">STEP:2 Copy the original GitHub code<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click the link below to copy it. It is not recommended to rename it. Do not change the project name to avoid configuration errors later.<\/li>\n<\/ul>\n\n\n\n<p><a href=\"https:\/\/github.com\/tangly1024\/NotionNext\/fork\" target=\"_blank\" rel=\"noopener\"><\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" width=\"1024\" height=\"381\" src=\"https:\/\/lupinvisual.com\/wp-content\/uploads\/2025\/12\/fork_github_notionext-1024x381.png\" alt=\"\" class=\"wp-image-4627\" style=\"width:720px;height:auto\" srcset=\"https:\/\/lupinvisual.com\/wp-content\/uploads\/2025\/12\/fork_github_notionext-1024x381.png 1024w, https:\/\/lupinvisual.com\/wp-content\/uploads\/2025\/12\/fork_github_notionext-300x112.png 300w, https:\/\/lupinvisual.com\/wp-content\/uploads\/2025\/12\/fork_github_notionext-768x286.png 768w, https:\/\/lupinvisual.com\/wp-content\/uploads\/2025\/12\/fork_github_notionext-1536x571.png 1536w, https:\/\/lupinvisual.com\/wp-content\/uploads\/2025\/12\/fork_github_notionext-2048x762.png 2048w, https:\/\/lupinvisual.com\/wp-content\/uploads\/2025\/12\/fork_github_notionext-18x7.png 18w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Simply fork the GitHub project.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">STEP 3: Create a Vercel Project<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Sign up and log in with your GitHub account<\/li>\n\n\n\n<li>When importing a Git repository, select NotionNext.<\/li>\n\n\n\n<li>Click Environment Variables, then add a new property. <strong>NOTION_PAGE_ID<\/strong> Enter the 32-character page ID in the Notion field.<\/li>\n\n\n\n<li>Click Deploy and wait for deployment.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">STEP:4 Page Completed<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on DOMAINS to view your website!<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"676\" height=\"480\" src=\"https:\/\/lupinvisual.com\/wp-content\/uploads\/2025\/12\/notion_web_3.gif\" alt=\"Import your GitHub project into Vercel, copy the Notion page ID into Vercel&#039;s environment variable settings, and deploy your NotionNext website.\" class=\"wp-image-4624\"\/><\/figure>\n\n\n\n<p>Import your GitHub project into Vercel, copy the Notion page ID into Vercel's environment variable settings, and deploy your NotionNext website.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Recommendation<\/h2>\n\n\n\n<p>Honestly, setting up a website with NotionNext was way easier than I expected. Just write articles in Notion, and it automatically updates the site. No need to mess with GitHub code\u2014just let it run. For a more professional look, you can connect your own domain to make it feel more official. When writing articles, add a cover image and title for a nicer shareable look.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Frequently Asked Questions<\/h2>\n\n\n\n<p><strong>Q1: What is NotionNext? How is it different from Notion?<\/strong><\/p>\n\n\n\n<p>NotionNext is an open-source project that enables you to quickly build a personal website using Notion as your writing platform, then deploy it via GitHub + Vercel.<\/p>\n\n\n\n<p><strong>Q2: Do I need to write code to build a website with NotionNext?<\/strong><\/p>\n\n\n\n<p>No coding required\u2014just basic account registration and deployment skills. Familiarity with GitHub is a plus, but you can complete the task by following the tutorial.<\/p>\n\n\n\n<p><strong>Q3: Can websites built with NotionNext be optimized for SEO?<\/strong><\/p>\n\n\n\n<p>Basic SEO settings can be configured. While offering slightly less flexibility than website builders like WordPress, NotionNext supports sitemaps, custom meta titles, and descriptions. With proper configuration, Google can still effectively index content.<\/p>\n\n\n\n<p><aside><\/p>\n\n\n\n<p>This article referenceshttps:\/\/docs.tangly1024.com\/article\/vercel-deploy-notion-next<\/p>\n\n\n\n<p><\/aside><\/p>\n\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Want to build your own website with Notion? Learn how to deploy a personal website in just 5 minutes using NotionNext. This complete guide takes you from Notion notes to live launch, making it easy to create resumes, portfolios, or blogs.<\/p>","protected":false},"author":1,"featured_media":4623,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_mo_disable_npp":"","_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"rank_math_title":"","rank_math_description":"","rank_math_focus_keyword":"Notion\u67b6\u7ad9","rank_math_robots":"","rank_math_canonical_url":"","footnotes":""},"categories":[35],"tags":[81,83],"class_list":["post-4622","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-workflow","tag-notion","tag-83"],"acf":[],"uagb_featured_image_src":{"full":["https:\/\/lupinvisual.com\/wp-content\/uploads\/2025\/12\/zero-cost-website-scaled.jpeg",2560,1920,false],"thumbnail":["https:\/\/lupinvisual.com\/wp-content\/uploads\/2025\/12\/zero-cost-website-150x150.jpeg",150,150,true],"medium":["https:\/\/lupinvisual.com\/wp-content\/uploads\/2025\/12\/zero-cost-website-300x225.jpeg",300,225,true],"medium_large":["https:\/\/lupinvisual.com\/wp-content\/uploads\/2025\/12\/zero-cost-website-768x576.jpeg",768,576,true],"large":["https:\/\/lupinvisual.com\/wp-content\/uploads\/2025\/12\/zero-cost-website-1024x768.jpeg",1024,768,true],"1536x1536":["https:\/\/lupinvisual.com\/wp-content\/uploads\/2025\/12\/zero-cost-website-1536x1152.jpeg",1536,1152,true],"2048x2048":["https:\/\/lupinvisual.com\/wp-content\/uploads\/2025\/12\/zero-cost-website-2048x1536.jpeg",2048,1536,true],"trp-custom-language-flag":["https:\/\/lupinvisual.com\/wp-content\/uploads\/2025\/12\/zero-cost-website-16x12.jpeg",16,12,true]},"uagb_author_info":{"display_name":"lupin","author_link":"https:\/\/lupinvisual.com\/en\/author\/lupinart1008gmail-com\/"},"uagb_comment_info":0,"uagb_excerpt":"\u60f3\u7528 Notion \u6253\u9020\u5c08\u5c6c\u7db2\u7ad9\uff1f\u6559\u4f60\u7528NotionNext 5\u5206\u9418\u90e8\u7f72\u500b\u4eba\u7db2\u7ad9\uff0c\u5f9eNotion\u7b46\u8a18\u5230\u6b63\u5f0f\u4e0a\u7dda&hellip;","_links":{"self":[{"href":"https:\/\/lupinvisual.com\/en\/wp-json\/wp\/v2\/posts\/4622","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lupinvisual.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lupinvisual.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lupinvisual.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lupinvisual.com\/en\/wp-json\/wp\/v2\/comments?post=4622"}],"version-history":[{"count":2,"href":"https:\/\/lupinvisual.com\/en\/wp-json\/wp\/v2\/posts\/4622\/revisions"}],"predecessor-version":[{"id":4629,"href":"https:\/\/lupinvisual.com\/en\/wp-json\/wp\/v2\/posts\/4622\/revisions\/4629"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lupinvisual.com\/en\/wp-json\/wp\/v2\/media\/4623"}],"wp:attachment":[{"href":"https:\/\/lupinvisual.com\/en\/wp-json\/wp\/v2\/media?parent=4622"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lupinvisual.com\/en\/wp-json\/wp\/v2\/categories?post=4622"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lupinvisual.com\/en\/wp-json\/wp\/v2\/tags?post=4622"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}