#+REVEAL_ROOT: https://cdn.jsdelivr.net/npm/reveal.js #+REVEAL_INIT_OPTIONS: height:1000 #+REVEAL_THEME: blood #+title: Building A Personal Website #+subtitle: HPC Cluster Academy #+author: Elsa Gonsiorowski #+date: July 19, 2021 #+options: H:2 toc:nil #+export_file_name: index.html * 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]] ** 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! | * About Me & Setup ** Elsa Gonsiorowski - Joined LLNL / LC in 2016 - HPC I/O Specialist - Working on [[https://computing.llnl.gov/projects/scalable-checkpoint-restart-for-mpi][SCR: Scalable Checkpoint Restart]] - Part of the [[https://www.exascaleproject.org][ECP]] [[https://ideas-productivity.org][IDEAS]] Team working on [[https://bssw.io/blog_posts/productivity-and-sustainability-improvement-planning-psip][PSIP]] - Excited about emacs, org-mode, static websites, fish shell, cmake, documentation, crossfit, rowing, knitting ** gonsie.com #+ATTR_HTML: :alt Screenshot of gonsie.com [[file:images/bpw-gonsie-com.png]] ** github.com/gonsie #+ATTR_HTML: :alt Screenshot of gonsie's profile on github.com [[file:images/bpw-github-gonsie.png]] ** gonsie.com/cv.html #+ATTR_HTML: :alt Screenshot of Elsa's C.V. [[file:images/bpw-gonsie-cv.png]] ** Setup: Things You'll Need - Resume - Text editor with Markdown, HTML, CSS support - GitHub account - Package manager to install Jekyll (optional) - Mattermost ** Text Editor Support - Syntax highlighting, checking - Indentation - Export / preview support (may require additional software) - Snippets - Colors ** Markdown - Emacs ([[https://github.com/jrblevin/markdown-mode][markdown-mode]] / MELPA) - Vim ([[https://github.com/plasticboy/vim-markdown][vim-markdown]]) - SublimeText ([[https://packagecontrol.io/search/markdown][packages: markdown]]) - Atom ([[https://atom.io/packages/search?q=markdown][packages: markdown]]) - VSCode ([[https://marketplace.visualstudio.com/search?term=markdown&target=VSCode&category=All%20categories&sortBy=Relevance][extensions: markdown]]) - Web-based [[https://dillinger.io][Dillinger]] ** COMMENT Package Managers *** MacOS - [[https://brew.sh][Homebrew]] package manager *** Windows - [[https://docs.microsoft.com/en-us/windows/wsl/install-win10][Windows Subsystem for Linux]] - Suggested Linux: [[https://wiki.ubuntu.com/WSL][Ubunto Image]] *** Linux - =apt-get= for Ubuntu/Debian distros - =yum= for RedHat/CentOS distros ** *Activity: Setup* /1:30/ *** Setup - Pick an editor and install packages - Find your most recent resume - Install [[https://jekyllrb.com/docs/][Jekyll]] /(optional)/ - Join the Mattermost channel #bpw *** GitHub 1. Create a profile on [[https://github.com][GitHub]] 2. Follow [[https://github.com/gonsie][@gonsie]] 3. Follow your friends! ** POLL #+begin_src /poll "Which editor are you using?" "emacs" "vim" "sublimetext" "atom" "vscode" "web" "other" #+end_src * HTML & CSS ** Computer Languages #+BEGIN_QUOTE A *markup language* is a system for annotating a document in a way that is syntactically distinguishable from the text. #+END_QUOTE #+BEGIN_QUOTE A *style sheet language*, or *style language*, expresses the presentation of structured documents. #+END_QUOTE ** Computer Languages *** Markup - Adds information to the content, such as hierarchy or emphasis. - Example: HTML, Markdown, TeX, troff *** Style - Describes how to display the content - CSS, TeX class/style, editor color theme ** COMMENT Example #+BEGIN_SRC markdown # This is a level 1 heading in markdown #+END_SRC #+BEGIN_SRC html

This is a level 1 heading in HTML

#+END_SRC #+BEGIN_SRC org * This is a level 1 heading in orgmode #+END_SRC This is some regular text. *This is some red text.* \pause #+begin_llnlsummaryenv Markup + Styling = Beautiful Documents #+end_llnlsummaryenv ** Markup Languages # +attr_latex: :height 0.8\textheight [[file:images/markup-word-cloup.png]] ** 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 - [[https://www.w3schools.com/][W3Schools]] is a great reference ** Example -- HTML #+BEGIN_SRC html :tangle basic.html My web page

This is some text on my webpage

#+END_SRC ** Example -- CSS #+BEGIN_SRC css :tangle basic.css body { color: blue; } p.ugly { border-bottom: 1px dotted #999; } #+END_SRC ** Example -- Rendered # +attr_latex: :width 0.7\textwidth [[file:images/basic-page.png]] ** Displaying a Web page 1. Parse HTML to construct DOM tree @@latex:\\@@ (Document Object Model) 2. Render tree construction / apply CSS 3. Layout the elements 4. Draw the page on the screen ** *Activity: Make a Web page* /2:00/ 1. Edit the basic HTML + CSS pages with your editor ([[file:basic.html][basic.html]] and [[file:basic.css][basic.css]] right-click to download) 2. "Open" the basic.html file using your browser 3. Add some more HTML and/or CSS - [[https://www.w3schools.com/tags/default.asp][List of HTML elements]] - [[https://www.w3schools.com/cssref/default.asp][CSS Reference]] ------ Try adding this: ~Some text~ ** 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? * Markdown & Your Resume ** Markdown - Designed by [[https://daringfireball.net][John Gruber (Daring Fireball)]] - Defined syntax for translating text to HTML. - A superset of HTML - Used extensively in software communities. ** Markdown to HTML #+BEGIN_SRC dot :file images/bpw-mkdown.png :cmdline -Kdot -Tpng digraph g { converter [shape=box]; rankdir = LR; markdown -> converter -> html; } #+END_SRC #+RESULTS: [[file:images/bpw-mkdown.png]] ** Markdown Syntax 1 #+BEGIN_SRC markdown # h1 Heading ## h2 Heading ### h3 Heading --- Emphasis with **bold**, *italic*, or ~~strikethrough~~ text. > Blockquote for included text [Also links](http://example.com) #+END_SRC ** Markdown Syntax 2 #+BEGIN_SRC markdown 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"); ``` #+END_SRC ** Markdown Syntax Example # +attr_html: :width 80% [[file:images/mkdown-example.png]] ** Markdown Style Example # +attr_html: :width 80% [[file:images/mkdown-custom-css.png]] ** Markdown to HTML # +attr_html: :width 80% #+RESULTS: [[file:images/bpw-mkdown.png]] ------ Converters have their own rules. ** Additional Markdown Rules - [[https://github.github.com/gfm/][GitHub-flavored-markdown]] (GFM) includes task lists and emojis. - [[https://kramdown.gettalong.org][kramdown]] includes better handling of code blocks - [[https://pandoc.org][pandoc]] converts to/from any number of markup formats ** *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: [[https://www.markdownguide.org][Markdown Guide]] ** POLL - Does your editor allow you to preview the document? - How does markdown compare to HTML? * Static Websites ** Static vs Dynamic Websites - Web pages with fixed content - No backing database / dynamic server - No way to "log in" to the site ** Static Site Generators (SSGs) - [[https://jekyllrb.com][Jekyll]] (Ruby) - [[https://gohugo.io][Hugo]] (Go) - [[https://www.11ty.dev][Eleventy]] (Javascript) - [[https://blog.getpelican.com][Pelican]] (Python) ** Jekyll - Defines a file structure and file format - Built on top of markdown - Generate HTML and CSS from source code ** Jekyll #+BEGIN_SRC dot :file images/jekyll.png :cmdline -Kdot -Tpng digraph g { rankdir = LR; node [shape="box"]; Jekyll; node [shape="ellipse"]; website [label="Website:\nA set of related\nweb pages (HTML + CSS)"] markdown -> Jekyll -> website; HTML -> Jekyll; Sass -> Jekyll CSS -> Jekyll; Liquid -> Jekyll; } #+END_SRC #+attr_latex: :width 0.7\textwidth #+RESULTS: [[file:images/jekyll.png]] ** 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: #+begin_src jekyll --- layout: resume title: "My Awesome Resume" --- #+end_src ** Liquid - Templating language - Allows hierarchical construction of a jekyll web page - Access to variables, programming constructs ** *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 =.github.io/jekyll-resume/resume.html= ** POLL - Any issues? - How does your resume look? * Building a Website ** Web Conventions #+BEGIN_SRC https://gonsie.com https://gonsie.github.io/index.html #+END_SRC *** DNS: Domain Name System - Hierarchical and decentralized name mapping to IP *** Default Homepage - =index.html= *** Subdomain - Allows name mapping at the destination ** 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 ** Building Your Personal Brand - How you present yourself to the world - Username, profile image(s), profile information - Join the blogosphere / independent web communities - [[https://indieweb.org]] - [[https://dev.to]] - Build your own network with RSS ** Personal Site Demo ** *Activity: Build Your Website* /5:00/ - Look up a domain (try [[https://namecheap.com][namecheap]] or [[https://hover.com][hover]]). How much does it cost? - Explore different Static Site Generators - Find a theme (most come with instructions) - [[https://jamstackthemes.dev/ssg/]] - [[http://jekyllthemes.org][jekyllthemes.org]] - [[https://themes.gohugo.io]] - Set up a [[https://pages.github.com][GitHub Pages]] or [[https://docs.gitlab.com/ee/user/project/pages/][GitLab pages]] website - Write an index and/or about page - Brainstorm some blog posts - Add an RSS feed to your site - Use Liquid to add a list of blog posts to the homepage - Enable HTTPS on your site * Fun ** Have Fun - [[https://secretgeek.github.io/html_wysiwyg/html.html][This page is a truly naked, brutalist html quine.]] - [[https://web.archive.org/web/20210318102514/https://jrl.ninja/etc/1/][58 bytes of css to look great nearly everywhere]] ** *Activity: GitHub Secret* - Create a new repo called /username/ - Add a =README.md= file - Visit your GitHub Profile (=github.com/username=) ** *Activity: Show & Tell* - What did you build? * Credits Created with [[https://www.gnu.org/software/emacs/][Emacs]], [[https://orgmode.org][Org Mode]], and [[https://revealjs.com][RevealJS]]. #+begin_export html View the source. #+end_export