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

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

by t47 July 2017 .