More Premium Hugo Themes Premium Nextjs Themes

Dinhanhthi.com

My personal website for taking notes. It uses Next.js and Notion as CMS.

Dinhanhthi.com

My personal website for taking notes. It uses Next.js and Notion as CMS.

Author Avatar Theme by dinhanhthi
Github Stars Github Stars: 81
Last Commit Last Commit: May 16, 2025 -
First Commit Created: Apr 29, 2023 -
default image

Overview

Thi’s personal website, dinhanhthi.com, is built on 11ty. It was originally intended to be turned into an 11ty theme for others to use, but due to complexity and time constraints, that idea was abandoned. Despite this, Thi is open to feedback on improving the theme.

Features

  • Built with 11ty
  • Support for Markdown notes
  • Multiple versions available (built on Jekyll)
  • Useful commands for development and customization
  • Temporary blog and note posts for easy draft creation
  • Instructions for updating data and icons
  • Support for Fontello icons

Installation

  1. Clone this repo with the name “dinhanhthi.com”.
  2. Clone the notes repo to “dinhanhthi.com/notes”.
  3. Run npm i to install necessary dependencies.
  4. Modify and update notes in the “notes” folder.
  5. To run the website in watch mode, use the command npm run watch.
  6. To run the website in theming mode, use the command npm run theming.
  7. To run the website in preprod mode, use the command npm run preprod.
  8. To build the preprod version, use the command npm run build-preprod.
  9. Temporary blog posts can be added to the “notes/blog_wip/” folder.
  10. Temporary note posts can be added to the “notes/posts_wip/” folder.
  11. Blog posts must be stored in “notes/blog/name-of-blog.md”.
  12. Note posts must be stored in “notes/posts/name-of-note.md”.
  13. Update data in “notes/_data/”.
  14. Update the header icon in the frontmatter. The icon file should be stored in “notes/img/header/” or “src/img_src/”.
  15. Update the site by running npm run site:update (or ud_dat on Mac/Linux).
  16. To modify the theme, parse only posts in sample_posts without image optimization.
  17. To download SVGs from Flaticon, use the inspect element feature in your browser.
  18. To update Fontello icons, upload the configuration file to fontello.com.

Summary

Thi’s personal website, dinhanhthi.com, is built using 11ty and offers support for Markdown notes. Although it was originally intended to be turned into an 11ty theme, Thi has decided not to pursue that route due to complexity and time constraints. However, Thi welcomes any feedback on improving the theme. The installation process involves cloning the repository, installing dependencies, and making modifications to the notes. There are also various useful commands and instructions provided for working with the website. Overall, dinhanhthi.com offers a range of features and customization options for users.