👋 Thi's personal website running on 11ty.
❗ Note : This repo is for my purposes ONLY. I actually wanted make it into an 11ty theme that could be used by others, but the complexity and my free time prevent me from continuing. If you figure out how to use it yourself that's great, otherwise just ask me but I can not promise I'll answer (soon) 🙁. Anyway, if you find something useful for me to improve this theme, just let me know, thanks a lot.
📚 Markdown notes are stored in a separated repo.
There are several "old" versions (mainly built on Jekyll) with different themes.
👉 Version 1 (Jekyll): v1.dinhanhthi.com -- source.
👉 Version 2 (Jekyll): v2.dinhanhthi.com -- source.
👉 Version 3 (Jekyll): v3.dinhanhthi.com -- source.
👉 Version 4 (Gatsby, canceled at 60%): demo of what I did -- source.
On MacOS (for me only)
# Install Python first!
cd scripts/
pip install -r requirements.txt
dat # go to dinhanhthi.com/
goto:dat
ud_dat # build & deploy to netlify
notes:update # git update notes/
touch_css # to run npm css:touch anywhere
touch_all # build whole site
# Reading notes
change_img_url ydkjsy-1 # change url to {{ img-url }}
# Images must be stored in dat.com/notes/img_tmp/
Shortcodes:
# Watch mode localhost
npm run watch
# For modifying theme (parse only posts in sample_posts/)
npm run theming
Let us assume that the installation step is complete.
- Update data : in
notes/_data/
. There are alsocsp.js
insrc/_data
. - Header icon (frontmatter):
icon: aio.svg
: icon has to be stored innotes/img/header/
.icon: /src/img_src/aio.svg
: icon has to be stored in/src/img/header/
(Yes, it'simg_src
!!!). It's useful for sample posts (we don't have to store icons in/notes/
)
- Update site:
npm run site:build-update
(On Mac/Linux, useud_dat
)
For modifying theme (parse only posts in sample_posts/
)
npm run theming # (--incremental is turned off)
Without image optimization (Note: If there is any propblem with the style, run npm run css:touch
),
# Real posts (/notes/posts/)
npm run full:watch-no-opt # localhost:8080, built to "_built"
# or
npm run watch
# Build whole site locally (to "_built")
npm run build-local
Without image optimization (Note: If there is any propblem with the style, run npm run css:touch
),
# Real posts (/notes/posts/)
npm run build # built to "_site"
npm run full:http-serve-opt # localhost:8081 over "_live" (a copy of "_site")
# Build and http serve real posts
npm run full:build-http-serve-opt
# Build & update & deploy
npm run site:build-update
# Just build
npm run build # _site
# Just update & deploy what built in _site
npm run site:update
Normally, you can not download the SVG format from flaticon. Just click Edit > Open Inspect Element > Copy SVG HTML element > Create a new file + paste this + save as .svg
.
Upload the configuration file in /src/fontello/config.json
to fontello.com (by clicking on the spanner symbol). Add any other icons you want. Once selected, click on "Get config only".
# Install fontello-cli
npm install -g fontello-cli
# Run
npm run ud-fontello
# Check code in src/fontello/config.json, field "css"
<!-- How to use? -->
<i class="fontello-icon icon-ng"></i>
Note: Sometimes, there are duplicates of hex/decimal codes (although the names are different). Navigate to the "Customize Codes" tab on the fontello website, find the duplicates, and change them. Note that, this tab, the codes in hexa-base, the downlowded configuration displays them in decimal-base ("code"
field). On this site you can convert the two formats.
Add a custom icon?
Click to show (a little long)!
At the first time after cloning,
# Install nodejs
# https://github.com/nodesource/distributions/blob/master/README.md#installation-instructions
npm i # Run once
sh scripts/getting_start.sh # Run once
# Any problem with sharp?
# Try to change the python path to python2
# Best practice: create a python env containing python just for this task!
# In case, python2 installed but it's not currently default
# Choose python version in npm with
npm config set python python2
# Problems with libvips (MacOS??)? => install it first
brew install vips
# Then again,
npm i
npm i -g kill-port
Dev mode,
# Install before
sudo npm install http-server -g
# Create \_live & Clone dat.com/\_site
sh getting_started.sh
Check section Dev for more.
# Make a shortcut on the system?
update_dat='cd ~/git/dinhanhthi.com && sh ud_site.sh && cd -1'
In case have some problems and need to re-install everything,
npm run re-install
It will remove node_modules/
, package-lock.json
and re-run npm i
.
# 'darwin-arm64v8' binaries cannot be used on the 'darwin-x64' platform
rm -rf node_modules/sharp
npm i
# or: https://bit.ly/3kyzXiL
# npm install --arch=x64 --platform=darwin sharp
# connect EADDRNOTAVAIL 127.0.0.1:8080 - Local (192.168.1.109:50781)
# (Usually after install WARP on MacOS)
sudo ifconfig lo0 -alias 192.0.2.2