🫀

Step by step guide to create a site like dinhanhthi.com v6

Anh-Thi Dinh
This post is for you to quickly create a site like this site (version 6) without needing extensive knowledge about the tools and techniques I used to build it. For ideas, reasons, and some tips on creating this site, you can check out this post How do I create this site (reasons and tips)?
🧡
If what I do is helpful to you for some reason, please consider supporting me. Thank you! 😊

Features

Prerequisite

Before continuing, please make sure you have the following (all are free, except the custom domain):
  1. A Github account.
  1. A Vercel account for deploying the site.
  1. A Notion account.
  1. (Optional) A custom domain, such as dinhanhthi.com.

What does it look like in the end?

  1. The main site: This site.
  1. Demo of notion-x and all components on this website
  1. This page has the "discrete" style enabled | Thi's Site
  1. CV page
  1. Projects page
  1. Favorite Tools page
  1. Favorite Bookmarks page
  1. Blog page

How does it work?

  1. You make edits on Notion or make changes on GitHub (e.g., the style of the site).
  1. Vercel detects the changes and renders the HTML files with the latest updates.
  1. You can then view the new contents.

Databases

To get started, use your Notion workspace and clone (duplicate) the databases listed below. Please read the description of each database carefully.
🤝
In each database, the comment system has been activated. Feel free to leave your ideas or contributions there.
  1. dat.com-db-ex — This is the primary database for your posts.
  1. dat.com-topics-db-ex — The topics (or "tags") you write about will be available on the /tags/ page.
  1. dat.com-projects-db-ex — The projects' database will be displayed on both the /projects/ page and the home page.
  1. dat.com-tools-db-ex — The tools' database will be displayed on both the /tools/ page and the home page.
  1. dat.com-bookmarks-ex — The bookmarks' database will be displayed on both the /bookmarks/ page and the home page.
⚠️
After cloning all the above databases, you need to make them public. To do this, click on Share at the top right of your Notion page, go to the "Publish" tab, and click Publish. You can also choose to disable "Allow duplicate as template" if desired.

Clone the code base

  1. Fork this repository on Github. 🚨 Important: this tutorial is corresponding to version 6.1.3 ([email protected]).
  1. (Optional) Please give me a star for that repository 🙏. Thank you.
  1. Open the file example.env.local and copy all variables (except the "optional" ones). Paste them into your local text editor and replace all "xxx" values with your own (Refer to the section "Get the required information" to find values for all "xxx").
    1. ⚠️
      Important: Do not share or make your secret variables public!

Get the required information

We need to replace all the "xxx" values in the file example.env.local with your own values.
⚠️
Important: These are confidential information, so please do not share or store them on Github! You can store your values in two places — on your local machine and on Vercel!
The links to the database and pages mentioned in this section are just examples. You need to obtain the values from your own cloned database!
⚠️
Because the steps below use the same name of request "queryCollection" when you switch between databases, make sure you copy the correct one! Most of non-working cases come from a mistake in this step!

Connect to Vercel and make your site public

Before making your site with your personal information, let’s make it work first! It helps us check the changes quickly right on the site.
We use Vercel to host our website.
  1. Make sure you have a Vercel account and are already logged in.
  1. On the Vercel Dashboard, click Add New… > Project. In the "Import Git Repository" section, if you don't see your forked repository, click Adjust Github App Permission and follow the on-screen instructions to give Vercel permission to access your repository.
  1. Once you have access, click Import next to your repository.
  1. In the "Configure Project" step, click Environment Variables, select all the variables you created in the previous step (excluding the "optional" ones), copy them, and paste them (using cmd + v on macOS or ctrl + v on Windows/Linux) into the "Key" input field on the Vercel page.
  1. Click Deploy and wait for a few minutes.
If everything is OK, you will see this page.
Click Add Domain (from the page above) or go to Dashboard → your project → Settings → Domains. Change to the desired domain, such as dat-com-demo.vercel.app.
On the sidebar, click on “Environment Variables”:
  1. Locate the key NEXT_PUBLIC_SITE_DOMAIN and replace its value with dat-com-demo.vercel.app.
  1. Locate the key ENV_MODE → Edit → set the value to “prod” and ensure that only “Production” is selected.
  1. Create a new key ENV_MODE (yes, the same as the key above) → Set its value as “dev” and ensure that “Production” is not selected.
You should see something like this!
🎉
Congratulations! Your site is live at https://dat-com-demo.vercel.app (of course, your final site will be different from this one)
From now on, I will be writing for two types of readers.
  • Sections marked with 🟩 are for readers who don't want to make many changes to the code (and I assume that they are not familiar with coding). The guides in this category will help you create a site that is exactly the same as mine. All you need to do is write your own posts on Notion. If you choose this option, you can ignore everything marked with 🟡.
  • Sections marked with 🟡 are for readers who are familiar with coding, git, and have some knowledge of web development. The guides in this category are more advanced, and you can customize your site differently from what you see on my website. If you choose this option, everything marked with 🟩 is optional. This note How do I create this site (reasons and tips)? may also be useful for you.

🟡 Set up your local environment

Personalize your site

Now, your site is working, but all the content belongs to me (Thi). Let's update it with your information.
  1. 🟩 On the page of the forked repository, press . to open the in-browser IDE. We will modify the code using this IDE. Another way to open the IDE is to change the URL of the current repository from github.com/.... to github.dev/....
    1. You will see a window like this. This is the IDE where you can change the codes.
  1. From now on, whenever you make changes in this IDE, click the "Source Control" icon on the left sidebar, write a message for the changes, and click Commit & Push.
In the IDE, you can quickly open a file by pressing cmd + p (macOS) or ctrl + p (Windows/Linux), and then typing the name of the file you want to open.

If you use Google Analytics?

Things on Home page

Things on About page

Things on Notes page

Change the topics

Change the projects

Change the tools

Change the bookmarks

Don’t use some features?

If you do not wish to use certain features, here is how you can turn them off:

🟡 Update new changes from the original repository

Writing a new post

Just create a new post in the clone of dat.com-db-ex. Read its description for the meaning of the properties in each post.
There are three different post types: "discrete", "blog", and (invisible) "normal". You can toggle the type of each post using the "discrete" and "blog" properties. If both "blog" and "discrete" are selected, "discrete" will take priority.
  • The template for "blog" and "normal" is the same. The difference lies in the list of posts shown on the /blogs/ page.
  • The template for "discrete" is completely different from the other two. It is used for notes that are not organized into sections. When writing notes for this post, use Toggle Blocks. Tip: For new blocks, place them at the top of other blocks so they appear first in the list.

If you have any question?

If you have any questions or need further assistance with setting up your site like dinhanhthi.com v6, feel free to open a new discussion on Github. I prefer you to ask there instead of leaving a comment in this post, as it will be more helpful for others to find the information directly in the project. I'll do my best to assist you. Good luck with your project!

🤝 Help me improve the site

There are, of course, many things to fix and improve on this site/theme. Please help me by opening a new discussion on Github. I would greatly appreciate it.

Some remarks and tips

  1. Always remember to include the "slug" property, otherwise your post won't be rendered correctly!
  1. Use only H2 and H3 headings for your posts. H1 will be treated the same as H2.
  1. When you want to take "discrete" notes (notes that don't need to be organized into sections or subsections, example), you can enable the "discrete" mode by setting the "discrete" property for that note. Note that, for this type of note, each discrete note is stored in a Toggle block. You can also use Callout blocks for remarks.
  1. If you want to specify different dates than the ones automatically assigned by Notion, you can use the "createdDate" and "lastModified" properties.
  1. For advanced nested blocks, such as Columns inside a Toggle block, you cannot directly create them, but you can create columns outside of a toggle block and then drag and drop these columns inside the toggle block.
    1. The same concept applies to nested blocks within a Callout.
  1. By default, posts that are not ticked in the "published" property are not public on the web. However, they are accessible in development mode. On Vercel, you can check this using the URL created for your website, which is invisible to search engines. With this in mind, you can set a "secret" link to your website to view all your unpublished notes.
🧡
If what I do is helpful to you for some reason, please consider supporting me. Thank you! 😊

TODO

  1. Translate this tutorial in Vietnamese and French.
  1. Give an option to make other languages for a post.
  1. Make the CV section editable from Notion as well.
  1. Facilitate the creation process.
  1. Make personal information be customized via Notion too.
  1. 🙏 Please provide your ideas/contributions in Discussions. Thank you.