T47.IO | Personal Website

Code and Content for the personal portfolio

Installation

t47io Main requires the following Node.js packages as dependencies (see in package.json), all of which can be installed through yarn.

Make sure you have nodejs and babel-node ready globally. Also for static compression of asset files, install yarn, zopfli and brotli globally (by brew or apt-get):

# ubuntu/debian
sudo apt-get install yarn zopfli brotli
# osx
brew install yarn zopfli brotli
sudo ln -sf /usr/local/bin/bro /usr/local/bin/brotli

Then, setup the repository:

git clone https://github.com/t47io/t47io_main.git
cd ./t47io_main/
# babel-node is used for running ES6 scripts
yarn global add @babel/node
# pm2 is used for production only
yarn global add pm2
yarn install

PDF assets (publication, thesis and resume) should be maintained under static/pubs/, static/thesis/ and static/resume/ manually.

For production only, a fresh build of brotli is used. Follow the cmake instructions there and link it afterwards:

sudo ln -sf ~/brotli/out/brotli /usr/local/bin/brotli

Also, we use pm2, nginx and ngx_brotli module for hosting. A custom build of nginx is required to enable the brotli compression. For details, read posts here and here. Briefly, run yarn run update:nginx with sudo.

Configuration

Config files are stored as config/**/*.json. Example configs are included in the repository, see config/**/*.example.json.

Server credentials are stored in config/server.json, including server PORT, email SMTP logins, Google Analytics tracker ID and GitHub access token. The DEBUG flag here determines the server environment; the MAINTENANCE flag toggles 503 status. Adapt from the config/server.example.json as a template and rename it.

nginx reverse proxy and pm2 startup configs are not included in the repository.

Scripts

Use yarn scripts with yarn run <cmd>.

• Scripts for build and server:

command	description
dev	Spawn dev server with nodemon. When DEBUG=true, hot-reloading is enabled and bundles are not optimized or minimized. When DEBUG=false, the app only serves static assets from public/; thus you will need to run build first.
prod	Launch prod server with pm2. You should use this with DEBUG=false only.
build	Run webpack to build client-side bundles and server-side rendered index page into public/. It ignores DEBUG and always use DEBUG=false. Files are hash-versioned and gzipped. Assets from static/ are copied to public/, manifest file and sitemap.xml are generated. webpack build information is saved to config/stats.(json|html). For production, a follow up of yarn run cron:chmod is required for nginx permissions.

• Scripts for maintenance:

command	description
json	Concatenate app JSON files: config/(main|project).json. These files are code-split from app bundles.
lint	Check syntax standards with eslint and stylelint.
cron	Retrives GitHub contribution statistics, Google Scholar citations, SSL Certificate expirations, and backup local nginx and JSON configs with admin email notice.
stat	Updates stats by yarn run cron, rebuilds the server by yarn run build, and fix file permissions by yarn run cron:chmod.
update	Check and update yarn dependency versions.

Notes

• Template app HTML files public/(main|project).html.(gz|br) contains JS/CSS loading logic that do not hard-code any asset path. Thus they are allowed for long cache. Only (manifest|f.012345.min).js is variable with a short cache.
• Custom error pages are server-side rendered and stored as public/e.(\d{3}).html.(gz|br).
• Server-side rendered home page is stored as public/index.html.(gz|br), as a static version without animation or interactivity. It is served to bots based on user-agent match.
• webpack generated JS/CSS/HTML assets under public/ are pre-compressed by gzip and brotli.
• yarn run stat is scheduled weekly as a crontab job on production (by root).

License

Copyright © 2014-2020: Siqi Tian. All Rights Reserved.

Code and content are licensed under CC-BY-NC-SA 4.0 .

---

by t47 July 2017 .