Building A Personal Website

(HPC Cluster Academy)

Elsa Gonsiorowski

July 19, 2021

Created: 2021-07-15 Thu 14:31

1 Goals

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

Follow along: https://www.gonsie.com/bpw/index.html

1.1 Schedule

1:00 About Me & Setup
1:30 Crash course in HTML & CSS
2:00 Markdown & Your Resume
2:30 Static Websites
3:00 Build Your Website!
3:30 Fun!

2 About Me & Setup

2.1 Elsa Gonsiorowski

  • Joined LLNL / LC in 2016
  • HPC I/O Specialist
  • Working on SCR: Scalable Checkpoint Restart
  • Part of the ECP IDEAS Team working on PSIP
  • Excited about emacs, org-mode, static websites, fish shell, cmake, documentation, crossfit, rowing, knitting

2.2 gonsie.com

Screenshot of gonsie.com

2.3 github.com/gonsie

Screenshot of gonsie's profile on github.com

2.4 gonsie.com/cv.html

Screenshot of Elsa's C.V.

2.5 Setup: Things You'll Need

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

2.6 Text Editor Support

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

2.7 Markdown

2.8 Activity: Setup 1:30

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

2.9 POLL

/poll "Which editor are you using?" "emacs" "vim" "sublimetext" "atom" "vscode" "web" "other"

3 HTML & CSS

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

markup-word-cloup.png

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 – HTML

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="basic.css"/>
    <title>My web page</title>
  </head>
  <body>
    <p class="ugly">This is some text on my webpage</p>
  </body>
</html>

3.6 Example – CSS

body {
color: blue;
}
p.ugly {
border-bottom: 1px dotted #999;
}

3.7 Example – Rendered

basic-page.png

3.8 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.9 Activity: Make a Web page 2:00

  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.10 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

bpw-mkdown.png

4.3 Markdown Syntax 1

# h1 Heading
## h2 Heading
### h3 Heading

---

Emphasis with **bold**, *italic*, or ~~strikethrough~~ text.

> Blockquote for included text

[Also links](http://example.com)

4.4 Markdown Syntax 2

1. Numbered Lists
   - Unordered lists
   * mixed marks
   + like this
7. Only the first number matters

Support for `inline code` and code blocks:

```
for (int i = 0; i < 100; i++) printf("Hello World!\n");
```

4.5 Markdown Syntax Example

mkdown-example.png

4.6 Markdown Style Example

mkdown-custom-css.png

4.7 Markdown to HTML

bpw-mkdown.png

Converters have their own rules.

4.8 Additional Markdown Rules

4.9 Activity: Practice Markdown 2:30

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

  • Create a file resume.md
  • 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: Markdown Guide

4.10 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

jekyll.png

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 resume.md 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 3:00

  • Fork https://github.com/gonsie/jekyll-resume
  • In settings: make sure GitHub Pages is turned on (from the main branch)
  • Clone your repo and update the resume.md file (with the front matter!)
  • Push your changes
  • Visit your website at <USERNAME>.github.io/jekyll-resume/resume.html

5.8 POLL

  • Any issues?
  • How does your resume look?

6 Building a Website

6.1 Web Conventions

https://gonsie.com

https://gonsie.github.io/index.html
  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)
  • username.github.io
  • username.github.io/repo
  • 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 5:00

7 Fun

7.1 Have Fun

7.2 Activity: GitHub Secret

  • Create a new repo called username
  • Add a README.md file
  • Visit your GitHub Profile (github.com/username)

7.3 Activity: Show & Tell

  • What did you build?

8 Credits

Created with Emacs, Org Mode, and RevealJS.

View the source.