Personal Academic Websites A brief introduction Only 20 minutes, so very brief coverage of each topic. Feel free to ask questions or come by later for more detail on a specific topic.

Personal Academic Websites Why make one? What to include? Introduce yourself to prospective colleagues and employers Update people on your projects and publications Curriculum Vitae Publications Research and teaching interests Personal information

Website Basics Where to keep your site What to call your site Hosting What to call your site Domain names How to build your site HTML and CSS; Content Management Systems (CMS); online site builders Visit sarahsaur.us for resources mentioned in this presentation

Hosting Free hosting available on department servers (talk to Hugh Chou to get yours set up) Free third-party hosting Usually supported by advertising on your page Paid hosting Can cost as little as a few dollars a month Online site builders will host you site on their servers

Domain names Free service URLs Buying your own Pros: Free! Cons: Long, hard to remember, and will change if you change hosts Examples yoursite.weebly.com epsc.wustl.edu/~yourname sites.google.com/site/yoursite/ Pros: personal, easy to remember, and won’t change Cons: not free, take a little work to set up Examples yourname.com yourname.me randomword.pw What is a domain name. Why get your own.

Basics of HTML and CSS HTML CSS HTML describes the structure of Web pages It defines what a certain part of the site is, e.g., a paragraph, a list, a link, or a header CSS describes the presentation of Web pages, including colors, layout, and fonts. It defines how a certain part of the site displays

HTML example Code Display <h1>Heading</h1> <p>This is a paragraph. Text text text, here is some text.</p> <p>Here is another paragraph. Text text text, here is some more text</p> <h2>An Unordered List:</h2> <ul> <li>Stars</li> <li>Planets</li> <li>Moons</li> </ul>

CSS example Code Display body { color:black; font-family:"Trebuchet MS", Helvetica, sans-serif; background-color:#b0c4de; } h1 {color:#101C6B;} h2 {color:#2038D6;}

Sample Site Hand-coded in Notepad++ View here

Content Management Systems (CMS) A software tool that allows even those with little to no knowledge of HTML to build and manage a website Some can be downloaded and installed on your own web space Some are provided as a web-based service

WordPress Primarily for blogging, but flexible enough to create non-blog websites Two different versions of WordPress WordPress.org – self-hosted, open-source software WordPress.com – a web-based blogging service

Installing WordPress Simple “5-minute install” Download WordPress Create a database on your web space Upload WordPress files Run the installation script Done! Many web hosting services offer automatic WordPress installation

Building a site in WordPress Static Pages vs Posts Pages To blog or not to blog Changing the front page of your site to a static page Themes Thousands of free and premium designs to choose from, or make your own Plugins and Widgets Add additional functionality to your site

Creating and Editing Pages Add New Page Edit Page

WordPress Themes

WordPress Themes

WordPress Themes

Online Site Builders Sites that offer free website building tools plus hosting Google Sites Weebly Wix Wordpress.com Many offer extra features for paying accounts

Free Site Builder Example: Weebly Simple and easy to use WYSIWYG (What You See Is What You Get) page creator Drag and drop page elements like columns, paragraphs and photos right where you want them Free service has small, unobtrusive advertisement at bottom of page Premium service ($4-7/month) removes ad, and has a few more features like more space, connecting to your own domain, statistics, etc.

Weebly Demo Weebly.com

Weebly Site Example Visit Here

Example Sites EPSc People Other People Martin Pratt - http://epsc.wustl.edu/~martinpratt/website/About.html Stephen Seddio - http://epsc.wustl.edu/~sseddio Kelsi Singer - https://sites.google.com/site/kelsisinger/ Wendy Cage - http://www.wendycadge.com/ David Gauntlett - http://davidgauntlett.com/ Jim Wild - http://www.jwild.co.uk/