⭐ Demo (current version): https://dinhanhthi.com/
🚀 Performance: Google Insight.
⛑ Dev branch: dev (working branch, always up-to-date)
🌐 Prod branch: _site (already-built html files, what you see on dinhanhthi.com)
There are several "old" versions (mainly built on Jekyll) with different themes.
👉 Version 0 (Jekyll): v0.dinhanhthi.com -- source.
👉 Version 1 (Jekyll): v1.dinhanhthi.com -- source.
👉 Version 2 (Jekyll): v2.dinhanhthi.com -- source.
- High performance (customized from Google's high performance theme).
- Flexible on all devices.
- Support many components for note taking in markdown (my styles 😉)
- A ustomizable resume page.
- Optimization images, html, css, javascript files.
- Support instant search with hightlight (using elasticlunr)
- [NEW] Support Dark / Light Modes with a toggle button.
- [NEW] Auto scrolling + expanding the TOC. When you scroll to some H2 heading, it will expand all of its H3 children if available. Try this page for an example.
At the first time after cloning,
# install nodejs
# https://github.com/nodesource/distributions/blob/master/README.md#installation-instructions
npm install # run once# If you have any problem with the installation sharp?
# Try to change the python path to python2
# Best practice: create a python env containing python just for this task!
# In case you have python2 installed but it's not currently default
# You can choose python version in npm with
npm config set python python2
# If you have problems with libvips (MacOS??)?
# install it first
brew install vips
# then again,
npm i
Because of the weakness of eleventy, we have to do below things to make the dev locally much faster!
# Install http-server to make a separated server
# (we don't intend to serve our eleventy site, just build it)
sudo npm install http-server -g
# Go to the main folder and then
mkdir _live
npm run local:build # a folder _site will be created
# Run the serve on folder _live
# (You need to do this everytime you restart the computer)
npm run local:serve
# Each time we want to build, run in another terminal
npm run local:buildUpload the config file in /src/fontello/config.json to fontello.com (by clicking on the spanner symbol). Add more icons you want. After choosing, click to "Get config only".
# install fontello-cli
npm install -g fontello-cli
# install / update new icon
fontello-cli --config src/fontello/config.json --css src/fontello/css --font src/fontello/font install
# open src/fontello/css/fontello.css
# find: "../"
# and replace with: "/src/fontello/"
# check code in src/fontello/config.jsonAdd a custom icon?
- Search for an icon (eg. svg images) + download to local.
- Drag and drop this icon to fontello site.
npm run local:watch
# If there are some changes in .eleventy.js
# Run below (alongside with local:watch)
npm run local:buildUpload the config file in /src/fontello/config.json to fontello.com (by clicking on the spanner symbol). Add more icons you want. After choosing, click to "Get config only".
# install fontello-cli
npm install -g fontello-cli
# install / update new icon
fontello-cli --config src/fontello/config.json --css src/fontello/css --font src/fontello/font install
# open src/fontello/font/fontello.css
# find: "../"
# and replace with: "/src/fontello/"
# check code in src/fontello/config.jsonCheck this note to understand below steps.
# Merge changes from branch dev to branch _site
# Clone this repo to 2 separated folders
|
|- dinhanhthi.com # <- branch "dev" for editing notes
|- dat.com # <- branch "_site" for pushing to netlify
# more details
git clone git@github.com:dinhanhthi/dinhanhthi.com.git # already done in previous section
git clone git@github.com:dinhanhthi/dinhanhthi.com.git dat.com
# On dat.com/, just run
# (It takes time to build the whole site in dinhanhthi.com/)
sh ud_site.sh
# If you wanna make an alias (Linux, MacOS)
update_dat='cd ~/git/dat.com && sh ud_site.sh && cd -1'
# change "~/git/dat.com" to yours