zt-yang / zhutian-yang-website

Yang's academic website

Academic personal website

This is a relatively simple scaffold for an academic personal website, using the 11ty static-site generator.

Installation

To get started, you'll need to use git to clone this repository, install Node.js to run the generator (for testing locally), and then edit the code in a text editor.

If you've never done this kind of thing before, on Windows you can use the git binary installer or GitHub desktop. There are a lot of tutorials on version control with git, but it's a big topic that hopefully you won't need for your personal website where you aren't collaborating with anyone.

To build locally you'll just need Node.js, a widely-used JavaScript runtime. There are several ways to install it, depending on your operating system. On macOS if you use Homebrew that's the simplest option (brew install node), while on Linux I think nvm is the most flexible way to get a recent version. On Windows I found nvm for Windows to be easy to use (confusingly, this is not the same as the main nvm project).

Visual Studio Code is a good choice of text editor on all platforms.

Using the template

Once you have node installed, you can compile and view the site by running the following in a terminal at the command line, in the directory with this repo:

npm install
npm run serve

You'll only need to run npm install once. npm run serve will let you view your site locally and automatically regenerates it as you edit the source code. You can also run npm run build for just compiling the code once (useful if you're deploying by copying to CSAIL or MIT).

This is meant to be a starting point for building your own website, whether that means cobbling together HTML and CSS from other people's sites or making your own design. The only interesting feature already implemented is generating a list of publications on the home page from data.

The place to start looking is index.njk and index.11tydata.js. The index.njk file is a Nunjucks template for the root HTML file, powered by the data from index.11tydata.js. Next, you can take a look at main.scss, which defines the entire styling for the page. It's written in Sass, which extends CSS with some nice features like variables and mixins.

Writing a website

The template doesn't have anything fancy in the way of design. Feel free to look at existing websites and try to copy parts that you like. For general help on the web, the MDN from Mozilla is a great resources (here's their getting started page).

Browser Developer Tools are a great way to inspect websites and see what makes them tick - the Chrome DevTools documentation is a good overview, as is the MDN. Firefox, Safari, and Edge all have similar features.

Deploying your website

We can give you three ways to deploy your site: GitHub Pages, CSAIL hosting, and MIT hosting.

GitHub pages

You should add this repo to your own GitHub account. Then go to its Settings page, click on Pages in the sidebar, and enable Pages. Deploy from the gh-pages branch. A GitHub Actions workflow (build.yml) automatically compiles and deploys your site to this branch every time you push to the repository.

By default, your site will be accessible from a URL like https://zt-yang.github.io/zhutian-yang-website: it will use your username and whatever you named the repo. However, you can use just https://zt-yang.github.io (again, with your username) by naming your repo tchajed.github.io.

If you're willing to spend money on your website, you can also buy a custom domain and set it up with GitHub Pages. Take a look at custom domains for the setup instructions. For pricing and availability for domains, you can try Namecheap or Google Domains. As a quick reference - chajed.io costs me $40/year (on the expensive end because it's a .io), while tchajed.com would cost $14/year. You can also get a .website or .xyz domain at reasonable prices.

When you use a custom domain, note that GitHub Pages is still the one actually running your website - you're just buying a domain that points to their servers.

CSAIL

Take a look at https://tig.csail.mit.edu/web-services/personal-web-page/.

You'll need to use AFS, so take a look at https://tig.csail.mit.edu/data-storage/afs/afs-basic-use/. (Note: AFS is terrible.)

You'll want to use something to copy files to the server, like rsync or an SCP client.

This will be at a URL like https://people.csail.mit.edu/nickolai/.

MIT

Take a look at https://sipb.mit.edu/doc/afs-and-you/. One thing they don't tell you: if you change a file, it'll take about 15 minutes to show up (due to aggressive caching that MIT's web servers do).

You'll want to use something to copy files to the server, like rsync or an SCP client.

This will be at a URL like https://www.mit.edu/~jda/.