Building A Personal Website

HPC Cluster Academy

Elsa Gonsiorowski

August 2, 2022

Created: 2022-08-01 Mon 22:43

1. Schedule

9:00 About Me & Setup
9:20 Crash course in HTML & CSS
9:50 Markdown & Your Resume
10:20 Static Websites
10:50 Build Your Website!
11:00 Fun

1.1. Goals

  • Set up a markdown and web development environment on your machine
  • Refresh your resume
  • Build a personal website
  • Have fun!

Follow along:

1.2. POLL

  • Who can find the "raise hand" button on webex?

2. About Me & Setup

2.1. Elsa Gonsiorowski


2.2. Connect With Me

2.3. Setup: Things You'll Need

  • Resume
  • Text editor with Markdown, HTML, CSS support
  • GitHub account
  • (optional) Package manager to install Jekyll

2.4. Text Editor Support

  • Syntax highlighting, checking
  • Indentation
  • Export / preview support (may require additional software)
  • Snippets
  • Colors

2.5. Markdown

2.6. Activity: Setup

  1. Setup
    • Pick an editor and install packages
    • Find your most recent resume
    • Install Jekyll (optional)
  2. GitHub
    1. Create a profile on GitHub
    2. Follow @gonsie
    3. Follow your friends!

2.7. POLL

  • What is your github username?
  • Which editor are you using?


3.1. Computer Languages

A markup language is a system for annotating a document in a way that is syntactically distinguishable from the text.

A style sheet language, or style language, expresses the presentation of structured documents.

3.2. Computer Languages

  1. Markup
    • Adds information to the content, such as hierarchy or emphasis.
    • Example: HTML, Markdown, TeX, troff
  2. Style
    • Describes how to display the content
    • CSS, TeX class/style, editor color theme

3.3. Markup Languages


3.4. Beautiful Web Documents

  • HTML + CSS
  • Structure and style a document
  • Understood by browsers
  • HTML Elements are marked at the beginning and end with a tag
  • HTML Elements have attributes which provide additional information
  • CSS Selects an element and sets properties
  • W3Schools is a great reference

3.5. Example

  1. basic.html
    <!DOCTYPE html>
        <link rel="stylesheet" href="basic.css"/>
        <title>My web page</title>
        <p class="ugly">This is some text on my webpage</p>
  2. basic.css
    body {
    color: blue;
    p.ugly {
    border-bottom: 1px dotted #999;

3.6. Example – Rendered


3.7. Displaying a Web page

  1. Parse HTML to construct DOM tree (Document Object Model)
  2. Render tree construction / apply CSS
  3. Layout the elements
  4. Draw the page on the screen

3.8. Activity: Make a Web page

  1. Edit the basic HTML + CSS pages with your editor (basic.html and basic.css right-click to download)
  2. "Open" the basic.html file using your browser
  3. Add some more HTML and/or CSS

Try adding this:

<marquee>Some text</marquee>

3.9. POLL

  • Do you need to run the web server to view the page you created?
  • What is the URL of your page?
  • What is the most interesting tag?

4. Markdown & Your Resume

4.1. Markdown

  • Designed by John Gruber (Daring Fireball)
  • Defined syntax for translating text to HTML.
  • A superset of HTML
  • Used extensively in software communities.

4.2. Markdown to HTML


4.3. Markdown Syntax

4.4. Markdown Style Example


4.5. Markdown to HTML


Converters have their own rules.

4.6. Additional Markdown Rules

4.7. Activity: Practice Markdown

Practice writing markdown syntax by re-writing your resume in markdown, using the following rules:

  • Create a file
  • Your name is a level 1 heading
  • Sections are level 2 headings
  • Different companies are level 3 headings
  • Be sure to use lists and emphasis
  • Additional resources:

4.8. POLL

  • Does your editor allow you to preview the document?
  • How does markdown compare to HTML?

5. Static Websites

5.1. Static vs Dynamic Websites

  • Web pages with fixed content
  • No backing database / dynamic server
  • No way to "log in" to the site

5.2. Static Site Generators (SSGs)

5.3. Jekyll

  • Defines a file structure and file format
  • Built on top of markdown
  • Generate HTML and CSS from source code

5.4. Jekyll


5.5. Jekyll Front Matter

  • Jekyll parses markdown pages with extra front matter
    • Must be on line 1 of your .md file
    • Pass information about the page to jekyll to allow for proper rendering
    • must be followed by a blank line
  • Use this front matter on your file:
layout: resume
title: "My Awesome Resume"

5.6. Liquid

  • Templating language
  • Allows hierarchical construction of a jekyll web page
  • Access to variables, programming constructs

5.7. Activity: Your Resume Website

  • Fork
  • In settings: make sure GitHub Pages is turned on (from the main branch)
  • Clone your repo and update the file (with the front matter!)
  • Push your changes
  • Visit your website at <USERNAME>

5.8. POLL

  • Any issues?
  • How does your resume look?

6. Building a Website

6.1. Web Conventions
  1. DNS: Domain Name System
    • Hierarchical and decentralized name mapping to IP
  2. Default Homepage
    • index.html
  3. Subdomain
    • Allows name mapping at the destination

6.2. GitHub and GitLab Pages

  • FREE websites for you and your projects
  • Open source repos get free website hosting
  • Github: Can automatically serve HTML or a Jekyll site (git branch hack for other SSGs)
  • GitLab: Can deploy any static site using CI (examples provided)
  • can support custom domains

6.3. Building Your Personal Brand

  • How you present yourself to the world
  • Username, profile image(s), profile information
  • Join the blogosphere / independent web communities
  • Build your own network with RSS

6.4. Personal Site Demo

6.5. Activity: Build Your Website

7. Fun

7.1. Have Fun

7.2. Activity: GitHub Secret

  • Create a new repo called username
  • Add a file
  • Visit your GitHub Profile (

7.3. Activity: Show & Tell

  • What did you build?

8. Credits

Created by Elsa Gonsiorowski

using Emacs, Org Mode, and RevealJS (Robot Lung theme).

View the source.