Making this site

This site was built around September 2019. Two months be­fore then, I knew ab­solutely noth­ing about Javascript, HTML, and CSS. Now I can say I know some­thing about HTML and CSS and still too lit­tle about Javascript.

Looking back, the de­sign prin­ci­ples of this site are the fol­low­ing,

• Minimal de­sign in its looks

• Performant, i.e. fast page load

I hope I have these prin­ci­ples in mind be­fore I started to learn to build a web­site, that would save me a lot of time…

The first thing I did is to learn how to use Jekyll. I heard of Jekyll a long time ago when I know noth­ing about front-end, back-end, javascript, web de­vel­op­ment, and many oth­ers. Following this di­rec­tion, I found the min­i­mal-mis­take starter which is an ex­cel­lent site tem­plate. I re­called that maybe af­ter only sev­eral days I suc­cess­fully got my site run­ning on GitHub page. However, I was not sat­is­fied with the look of the site. Then I started to learn CSS and HTML and tried Bulma to cus­tomize the looks of the site. During this process, I was ex­posed to Javascript and front-end de­vel­op­ment world. I started to no­tice all these buzz­words, SPA, re­ac­tiv­ity, React, Vuejs, Gatsby and many oth­ers, and started to look for other op­tions of build­ing a web­site. After some­what amount of re­search, I landed on Nuxt.js. Retrospectively, the rea­son I chose it is ac­tu­ally pretty dumb. It is just be­cause that I can at least un­der­stand Vue.js a lit­tle bit com­pared to the learn­ing ex­pe­ri­ence of React.

Starting from scratch, very slowly, I started to build my per­sonal site us­ing Nuxt.js. I quickly re­al­ized that it might not be suit­able for my pur­pose. There are mainly two rea­sons for this:

• There is no stan­dard or easy way to in­cor­po­rate the con­tent from my mark­down files to the page ren­der­ing. All the meth­ods I found on­line feel like a hack and it suf­fers the prob­lem of load­ing all the posts to­gether for every sin­gle page! This is­sue is also ad­dressed in this blog post.

• Although nuxt.js does have a sta­tic site gen­er­a­tion mode, the pre-ren­dered page bun­dle still in­cludes a bunch of client-side Javascript codes, which in my case are not nec­es­sary at all. These client-side JS are there for so-called hy­dra­tion which take over the site once the first-load is com­pleted. However, for my per­sonal site on which 99% per­cent of the pages is just sta­tic con­tent, these JS are 100% un­nec­es­sary. It also makes the site bloated sig­nif­i­cantly, an as­pect I hate. Unfortunately, at least cur­rently, there is no full sta­tic gen­er­a­tion mode.

The sec­ond rea­son is the one which even­tu­ally leads to me re­al­iz­ing that us­ing a JS frame­work based sta­tic site gen­er­a­tor is re­ally not a good choice for my pur­pose. However, dur­ing the process, I started to learn the rich­ness of JS com­mu­nity and the ex­is­tence of mil­lions of pack­ages (might be too many). Thus I do want to stick to Javascript. Then I came across 11ty, which I quickly re­al­ized is a very suit­able tool for my pur­pose and taste.

• First, it is not a frame­work, a point also em­pha­sized on their web­site. Thus there is no un­nec­es­sary client-side Javascript gen­er­ated by the frame­work. It also means you don’t need to write frame­work-spe­cific codes.

• Second, sim­i­lar to Jekyll, it put all your con­tents into collections which can then be used and re­ferred any­where in the tem­plates.

• Third, Eleventy has a pow­er­ful func­tion­al­ity called JavaScript Data Files which al­lows one to be able to get any data into the build process (as long as you can write it in JavaScript). For in­stance, re­triev­ing the bib­li­o­graphic in­for­ma­tion from a DOI and use them in the tem­plate/​lay­outs

With the lim­ited knowl­edge of Javascript I learned from try­ing Nuxt.js and the help from a few starter source codes ^[1][2][3], it did­n’t take much time for me to set up this site us­ing 11ty and get it run­ning ^[4].

As for the de­sign of this site, I am heav­ily in­flu­enced by Tom MacWright’s per­sonal site. I hope to talk about this more in de­tails in the fu­ture. For this site’s CSS, I end up choos­ing the tail­wind­css since it is a low-level CSS frame­work, which al­lows me to acheive the look I want with­out much ef­fort.

I guess the les­son I learned is, do not make things over­com­pli­cated.