Creating your research websites

Original Author: Tim O'Brien, March 31, 2017

As a member of 220C, you will create and maintain a website for your project, including weekly blog-style update posts. The main website and blog need not be on the same site; you can have a main project page, as well as a separate blog.

You should host these on the CCRMA webspace. There are several options for doing this. Depending on your familiarity with different languages, preferred means of interacting with these tools, and personal aesthetic, you can pick which works best for you.

Once you have your site up and running, please email the course staff ({cc, lja}@ccrma) so we can add it to the 220C site.

CCRMA Wiki

This is the path of least resistance. If you don't have a lot of experience creating websites, or don't want to spend too much time setting one up, this is your friend. The CCRMA Wiki is any page under https://ccrma.stanford.edu/wiki/. For example, Andrew A. Watts (TA in 2017) used the Wiki for his piece Feedback Shift II.

To create a new page on the Wiki:

• Go to the Wiki, https://ccrma.stanford.edu/wiki/, and click the link in the top right corner to log in. Use your CCRMA credentials (the same ones you use to sign in to the Linux computers at the Knoll).
• To create a new page, simply navigate to the name of the page you'd like to create. For example, I could try https://ccrma.stanford.edu/wiki/Some_new_project. When I get there, I see a notice that the page doesn't exist. Great! Now I can create it by clicking the create tab at the top of the page.
• When editing a page here, you must use the Wiki syntax. Here are some useful resources for Wiki editing: editing pages, formatting, links, lists, images, tables.

Your own HTML site

While a Wiki page is easy to create and edit, its functionality and appearance are restricted to that which is allowed in the Wiki syntax. On the other hand, you have a lot of flexibility if you create a static HTML site under your CCRMA webspace. This comes at the cost of slightly more time and effort to set up the site.

Note: don't even think about a fancy CMS site like WordPress or Joomla or Drupal. You can't put that on your CCRMA webspace, and it's more trouble than it's worth for this type of single-quarter project.

Reminder: your CCRMA webspace

Every CCRMA user has a folder called ~/Library/Web/. Anything you put in there can be accessed on the web by going to http://ccrma.stanford.edu/~yourusername/. For more refresher material, see:

• How-to: Using your CCRMA account
• CCRMA remote access

As always, if you have any trouble with this, let us know.

Bootstrap

Bootstrap is a very popular framework which allows you to write relatively simple HTML pages which look and behave nicely. (See, for example, the 220C site.) Further customization via additional CSS and JS elements is also straightforward.

As long as you put everything within a directory like ~/Library/Web/YourProjectName/, e.g. with a main page at ~/Library/Web/YourProjectName/index.html, your project is accessible at https://ccrma.stanford.edu/~yourusername/YourProjectName.

Static Site Generators

Static Site Generators (SSGs) are programs you run on your local maching which spit out a static HTML website, similar to what you might get when you create a Bootstrap site by hand. The SSG offers some nice functionality -- you could write your content in Markdown, tweak the appearance from some provided template, and handle multiple pages more easily (e.g. with a single dynamic navigation bar). You'll maintain your own local copy of the parts, and every time you update your site, you'll tell the SSG to compile it into static HTML, which you then upload to your CCRMA webspace.

There are many options (e.g. see this post). I have used Pelican, Jekyll, and Octopress in the past. However, I often revert back to the simplicity of a handmade Bootstrap site, since it can be time consuming to set up, tweak, and maintain an SSG site for a small project.

Conclusion: pick what makes sense for you

In the end, pick whatever option makes sense for you. There is value to presenting your work beautifully. However, your work itself is most important. Straightforward, well-written updates on a Wiki page are more than acceptable. You could even do a great job with an incredibly bare bones site like this one (warning: profanity).