Đây là hướng dẫn chi tiết giúp bạn tạo ra một trang web giống với trang bạn đang xem (phiên bản 6) mà không cần bất cứ kiến thức chuyên sâu về những công nghệ và công cụ mình đã sử dụng. Còn nếu bạn muốn biết sâu hơn về ý tưởng, lý do cũng như những kinh nghiệm tôi góp nhặt được trong quá trình tạo trang, bạn có thể xem bài đăng này How do I create this site (reasons and tips)?
Nếu bạn thấy hữu ích, vui lòng ủng hộ mình nhé. Cảm ơn bạn! 😊
Các chức năng của trang
Before continuing, please make sure you have the following (all are free, except the custom domain):
- A Github account.
- A Vercel account for deploying the site.
- A Notion account.
- (Optional) A custom domain, such as dinhanhthi.com.
- The main site: This site.
- You make edits on Notion or make changes on GitHub (e.g., the style of the site).
- Vercel detects the changes and renders the HTML files with the latest updates.
- You can then view the new contents.
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.
- dat.com-db-ex — This is the primary database for your posts.
- dat.com-topics-db-ex — The topics (or "tags") you write about will be available on the
/tags/page.
- dat.com-projects-db-ex — The projects' database will be displayed on both the
/projects/page and the home page.
- dat.com-tools-db-ex — The tools' database will be displayed on both the
/tools/page and the home page.
- 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.
- Fork this repository on Github. 🚨 Important: this tutorial is corresponding to version 6.1.3 (
notion-x@v1.5.6).
- (Optional) Please give me a star for that repository 🙏. Thank you.
- Open the file
example.env.localand 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").
Important: Do not share or make your secret variables public!
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!
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.
- Make sure you have a Vercel account and are already logged in.
- 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.
- Once you have access, click Import next to your repository.
- 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+von macOS orctrl+von Windows/Linux) into the "Key" input field on the Vercel page.
- Click Deploy and wait for a few minutes.
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”:
- Locate the key NEXT_PUBLIC_SITE_DOMAIN and replace its value with dat-com-demo.vercel.app.
- Locate the key ENV_MODE → Edit → set the value to “prod” and ensure that only “Production” is selected.
- 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.
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.
🟡 Cài đặt trên máy tính cá nhân
Now, your site is working, but all the content belongs to me (Thi). Let's update it with your information.
- 🟩 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/....
- 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
If you do not wish to use certain features, here is how you can turn them off:
🟡 Update new changes from the original repository
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 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!
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.
- Always remember to include the "slug" property, otherwise your post won't be rendered correctly!
- Use only H2 and H3 headings for your posts. H1 will be treated the same as H2.
- 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.
- If you want to specify different dates than the ones automatically assigned by Notion, you can use the "createdDate" and "lastModified" properties.
- 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.
The same concept applies to nested blocks within a Callout.
- 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! 😊
- Translate this tutorial in Vietnamese and French.
- Give an option to make other languages for a post.
- Make the CV section editable from Notion as well.
- Facilitate the creation process.
- Make personal information be customized via Notion too.
- 🙏 Please provide your ideas/contributions in Discussions. Thank you.