dinhanhthi/dinhanhthi.com-v5

The 5th version of my personal website written in 11ty.

v5.dinhanhthi.com

👋 Thi's personal website running on 11ty.

🚀 Demo: https://v5.dinhanhthi.com

🔥 Current version: https://dinhanhthi.com

❗ 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.

Useful commands

On MacOS (for me only)

# Install Python first!
cd scripts/
pip install -r requirements.txt

dat # go to dinhanhthi.com/
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/

Dev

New computer?

• Clone this repo with dinhanhthi.com name.
• Clone notes to dinhanhthi.com/notes.
• Run npm i to install stuffs.
• Modify + update notes in notes.

⭐ TL;DR;

• Watch mode (all posts as on prod): npm run watch.
• Theming mode (for customizing themes + display draft & fixed posts): npm run theming.
• Preprod (all posts on prod + serve in 8081): npm run preprod
  • Build preprod (in case preprod is already running): npm run build-preprod
• Temporary blog posts: put in notes/blog_wip/ (these posts are showed in both dev and prod modes).
• Temporary note posts: put in notes/posts_wip/ (these posts are showed in both dev and prod modes).
• For working with Typora + VSCode (this blog post):
  • Blog posts must be store in notes/blog/name-of-blog.md (no sub folder).
  • Note posts must be store in notes/posts/name-of-note.md (no sub folder).

More details (a little old)

Let us assume that the installation step is complete.

• Update data : in notes/_data/. There are also csp.js in src/_data.
• Header icon (frontmatter):
  • icon: aio.svg: icon has to be stored in notes/img/header/.
  • icon: /src/img_src/aio.svg: icon has to be stored in /src/img/header/ (Yes, it's img_src!!!). It's useful for sample posts (we don't have to store icons in /notes/)
• Update site: npm run site:update (On Mac/Linux, use ud_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

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

Download SVG from flaticon

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.

Update Fontello icons?

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?

1. Search for an icon (eg. svg images) + download to local.
   1. Free SVG icon: site.
   2. If you need to crop some images? Use this site.
   3. Need to convert to svg? Use this site.
2. Drag and drop this icon to fontello site.

Installation

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'

Re-install?

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.

Errors?

# '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