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
- Clone this repo with the name “dinhanhthi.com”.
- Clone the notes repo to “dinhanhthi.com/notes”.
- Run
npm i
to install necessary dependencies. - Modify and update notes in the “notes” folder.
- To run the website in watch mode, use the command
npm run watch
. - To run the website in theming mode, use the command
npm run theming
. - To run the website in preprod mode, use the command
npm run preprod
. - To build the preprod version, use the command
npm run build-preprod
. - Temporary blog posts can be added to the “notes/blog_wip/” folder.
- Temporary note posts can be added to the “notes/posts_wip/” folder.
- Blog posts must be stored in “notes/blog/name-of-blog.md”.
- Note posts must be stored in “notes/posts/name-of-note.md”.
- Update data in “notes/_data/”.
- Update the header icon in the frontmatter. The icon file should be stored in “notes/img/header/” or “src/img_src/”.
- Update the site by running
npm run site:update
(orud_dat
on Mac/Linux). - To modify the theme, parse only posts in sample_posts without image optimization.
- To download SVGs from Flaticon, use the inspect element feature in your browser.
- 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.