Building Websites

Core Concepts

• Websites are just collections of files
• Files must exist on computers
• Servers handle protocols for reading files
  • This allows files to be remote(ly accessible)
• Addresses tell servers where to look for files
• Domain names are aliases for locations
  • A DNS acts as a registry of (IP) addresses
  • It associates names to addresses.

Architecture

Client: web-browser

• Manages requests for information
• Makes sense of the responses
• Some code can be executed on your computer
  • Javascript allows for all sorts of interactivity
  • It is the “programming language” of the browser
• Security is high priority

Architecture

Host: computer where files live

• DNS manages connection to this machine, often called
• A “server,” colloquially, because…
• A proxy server handles requests for information
• Translates web-address to location of file on computer.
• Code can also be exucted here

Basics

• HTML is the language interpreted by your web-browser. CSS is used for styling.
• Several other languages can manage other requests on the host machine (such as executing code in another language, such as python).
• Servers serve up information in response to requests
  • They have their own language/codes (GET/POST/404/403/202, etc.)

Story Time

Review options by discussing personal journey.

• Squarespace
• Wordpress
  • and similar alternatives
• Servers
• GitHub Pages
• Static-Site Generators
  • Ivy, Hugo, etc.

Squarespace

• Emphasis on simplicity
• Pay a lot, but don’t have to “think”
  • It just works…
• Integrates with A LOT of platforms
  • Online store, forms, analytics, etc.
• Not very extensible
• Great design aesthetic

Wordpress

• Can DIY, but somewhat difficult
• Original purpose was blogging
• Web-Interface for (almost) everything
• “Plugin” system for extensibility
• Lots of pricing options for features
• Requires updates, maintenance
• Large community of “developers”

Static Websites

• No code execution on Host
• “Simpler” websites
• Just files (not applications)
• First came across HTML templates
• Easy to test out locally
• Free deployment options
  • Alternatives to interactivity
• Very extensible, flexible

• Can download template and edit it

  • Hands on, but not hard
  • Will be less organized on average

• Static Site Generators

  • You edit content in markdown files
  • Program converts them to HTML pages
  • MANY options in many languages
  • DIY-friendly, but not necessary

Why Static-Site Generators?

• Get the best of both worlds
• Can host it yourself or use a service
• Javascript allows for extreme extensibility
  • But you don’t have to understand exactly how it works
• Extensibility via themes
  • Content separated from styling

Take advantage of the hard work of others

Hugo

• Written in Go
  • Language developed at Google
  • Becoming a popular templating language
• Great user community
  • Lots of themes
  • Good documentation
  • Responsive forums
• FAST compilation

Conveniences

Markdown makes discussing code easy.

Inline code: variable

Code block:

# "```python" is used at the top so the static-site generator
# knows how to color the code for proper syntax-highlighting
porridge = "blueberry"
if porridge == "blueberry":
    print("Eating...")

Math!

(Many include support for it, fairly straight-forward to add yourself.)

In-line math: $x + y = z$

Block math: $$ f\left( x \right) = \;\frac{{2\left( {x + 4} \right)\left( {x - 4} \right)}}{{\left( {x + 4} \right)\left( {x + 1} \right)}} $$

Note It is much harder to write math on Wordpress/Squarespace websites.

Shortcodes

Inject custom HTML, use “plug-ins” like this:

{{% speaker_note %}}
- Speaker notes are done like this.
- They are only visible to the speaker.
{{% /speaker_note %}}

{{% fragment %}}
Press the `S` key to view the speaker notes!
{{% /fragment %}}

Background & Theme

Customize the slide style and background

{{< slide background-image="/img/boards.jpg" >}}
{{< slide background-color="#0000FF" >}}
{{< slide class="my-style" >}}

Can also use CSS to further customize: assets/css/reveal_custom.css

.reveal section h1,
.reveal section h2,
.reveal section h3 {
  color: navy;
}

Surprise!

This whole talk exists as a single markdown file.

• Next: Right Arrow or Space
• Previous: Left Arrow
• Start: Home
• Finish: End
• Overview: Esc
• Speaker notes: S
• Fullscreen: F
• Zoom: Alt/Ctrl + Click
• PDF Export: E

Workflow

• Develop website locally

  • Find theme/template, customize it
  • Hugo comes with local server
  • Python has one you can use alternatively

• Deploy on server

  • GitHub Pages
  • Rented from DigitalOcean, Vultr
  • University server

Domain Names

Once you are ready to have your own domain name, it is easy to purchase one and link it up to any service you want.

• I like Namecheap
• Can redirect to university server
• Rent your own ($5-10/mo), use it for remote-access
• Github Pages (FREE)
  • Comes with Content Delivery Network option!

Some notes

• Bad practice to “develop on the server” (but honestly, it’s the easiest way to get started)
• Hugo is not available on math.ucdenver.edu (maybe installable?)
• GitHub Pages is one of the best options available
• Use GitHub Pro (for FREE) with University Email!
  • Private repo for .md files, public for site

• May be a good idea to get started with Ivy since Python is available on the math server
  • Ivy functions similarly, is extensible, but has a small user-community.
  • Will be easy to port content over to Hugo later

Demonstration

• Show Hugo workflow!

• Log in to university server

  ssh lastfirst@math.ucdenver.edu
  cd public_html
  

• Place files there

  • Pull from GitHub or copy over ssh

• Visit math.ucdenver.edu/~lastfirst

  • (proxy server already configured)

Questions?

Homepage

Academic Theme: Documentation

Hugo Themes

Google Search Result for Github Resume Template This Website on GitHub Pages