Hosting a website on the Knuth Server

Agenda

  • Learn broad, high-level concepts of HTML, CSS, Javascript
  • Learn the basic steps of hosting on Knuth
    1. Create a basic HTML file (for now)
    2. Transfer file from your computer to knuth account's public_html
    3. Set permissions so that your HTML file becomes public
  • Use an AI model of your choice to develop a static website
    • Share prompt and screenshots for a discussion activity

Things you need for this presentation

  • Download FileZilla (filezilla-project.org, choose client download)
  • Access to a linux based terminal
    • Probably already through VSCode (use that if you're familiar)
    • Windows: Download Windows Subsystem for Linux (WSL)
      • Open up the PowerShell and type in wsl --install
      • You'll be using WSL
    • Mac: You can use the built-in Terminal app

Section 1: HTML, CSS, JS

HTML (HyperText Markup Language)

  • HTML provides the structure of a webpage
    • headings, paragraphs, lists, images, links, forms, etc.
  • HTML uses tags with arrow brackets.
    • <h1>HEADER</h1>
    • <p>PARAGRAPH</p>
    • <img src="URL">
    • <a href="URL">LINK TEXT</a>
  • More HTML resources are at the end of this presentation

HTML div containers

  • <div> containers are the basic building blocks in HTML. They usually have an ID or class parameter that references your style sheet (style.css file).
    • Example: <div class="nav-menu">

HTML is like the foundation, walls, and rooms of a house

CSS (Cascading Style Sheets)

  • CSS controls how the HTML elements look on the screen
    • colors, fonts, layouts, spacing, sizes, responsive design (mobile vs desktop)
  • CSS is usually defined in <style> [css code] </style>
  • You should keep your CSS in a separate file and import it/reference it in your HTML file

CSS would be the paint color, type of flooring, furniture arrangement, and overall interior design of a house

JavaScript (JS)

  • JS controls the behavior and interactivity of your website
    • Handles complex features such as content updates, animations, form validation, and communication

JS is like the electricity, plumbing, and appliances in a home. It adds functionality.

For a personal website, you shouldn't really need JS (which we will not focus on today)

Section 2: Learning to transfer files to knuth and setting permissions

Creating your starter index.html

  • index.html is what the server will look for as the homepage
    • your homepage is actually cs.hmc.edu/~[username]
  • Q: What does <head></head> seem to do?
  • Q: How do you write comments in HTML?

Create a folder called "CS Website" and a file called "index.html" in that folder

  • Do this through VSCode or through the terminal
  • Copy this starter code (yes, type it) OR
  • Use VSCode to generate code for you using the prompt "basic HMTL template"

Open index.html locally so that we can check that it works

  • Use the terminal (navigate to where your index.html file is located and use open index.html)
  • Or you can double click index.html in your file browser (file explorer or finder)

Good development practice: You should edit your website locally on your computer, and then transfer those files to the server

Use FileZilla to drag & drop index.html to the server public_html folder

  • Open FileZilla and enter these near the top of the application
    • Host: knuth.cs.hmc.edu
    • Username: [username] without @knuth.cs.hmc.edu
    • Password: [your password]
    • Port: 22
    • Your computer may ask for many permissions
  • Drag and drop, left to right, index.html from your machine to the server's public_html folder

Important distinction: I made you create a "CS Website" on your local machine, but everything in that folder will go into the server side "public_html" for it to become your website

Try checking your website now. What do you see?

  • Type in cs.hmc.edu/~[username]
  • You should be seeing an error! This is because the public doesn't have permission to view the file
    • Fun CS Trivia: Our Knuth server defaults files to no permissions for everyone but the user because of someone cheating back in '98, where a student was copying another student's CS 5 HW

We're going to manually change permissions through the terminal

  • Open up your terminal (Mac can open "terminal" and Windows can open up "WSL")
  • ssh [username]@knuth.cs.hmc.edu
  • enter username and password (remember, the password will not appear, but just keep on typing)
  • change directory to public_html by typing in cd public_html and hit enter
  • type in ls -l to list the folder contents with extra data

Setting permissions

  • chmod is the command that changes file/directory permissions
  • File permissions have 10 characters; the first character indicates file type and most of the time it will be a regular file (-) or directory (d).
  • Type ls -l in the terminal to see file permissions and other meta data
  • You might see something like -rw------- [username] ... index.html
    • The first string are your permissions
  • Take a look at this chart and make sense of it (this is numeric notation)
  • chmod uses binary! Do you recognize how 1 corresponds with --x?
  • regular filess need chmod 644 [filename]
  • directories need chmod 755 [directory]
  • or you can use symbolic notation...

Use this command for convenience every single time!

  • chmod -Rh o+rX ~/public_html will automatically set the correct permissions for your website
    • the -Rh in this case is to recursively and safely update all permissions in public_html

You'll need to chmod every new file or directory that you move into your server to make sure it's viewable to the public

Also, I made you do all that work to make you learn something. You can change permissions through FileZilla if you care to mess around with the app.

Summary

  • Develop your website on your local machine
  • Transfer files over to the server (FileZilla is easy, but you can come up wtih other methods)
  • Set permissions on the server side

Section 3: Editing your website

Check that your website is public!

  • Type in your internet browser cs.hmc.edu/~[username]
    • your index.html is the homepage

As you start creating more pages and subpages, make sure to organize your website on your local machine and on your server. The next slide shows an example

How you organize your website is how your URLs will be determined

  • cs.hmc.edu/~[username]/boba.html
  • cs.hmc.edu/~[username]/images/selfie.png

You can also reference your content by file paths


Instead of doing <img src="https://cs.hmc.edu/~[username]/images/selfie.png"> on your homepage

  • Use its relative path <img src="images/selfie.png">

If your path is in a parent directory


Say you want education.html to embed an image of torotea.png

  • <img src= "../images/torotea.png">
  • the .. references the parent directory

What could be on a professional, personal website?

  • Name, pronouns, how to pronounce it
  • contact info, but protect if from webscraping with this format: name [at] hmc [dot] edu
  • Basic educational history
  • Projects and experience highlights
  • Be creative!

Customize your website using AI

  • Use AI to help you generate a personal website, and make sure to specify that you want your style.css to be a separate file (because it's good practice)
    • In your index.html file, you will have to import your .css file

Discussion activity:

  • Let's discuss what we're seeing!
    • How similar/different are our websites?
    • Is the code readable? Can you understand it?
    • Do you like/dislike the results?
    • What are some tips you would suggest to everyone here for improving your website?

And that's it! The last few slides will show some very basic HTML code.

  • but before that...

Final Feedback

Did you meet these learning goals?

  1. I know how to organize my website on my local machine
  2. I know how to transfer files to the knuth server
  3. I know how to change file and directory permissions
  4. I feel confident in my own ability to explore webdev

If you did not meet these goals, or think, "kind of... but..." or interpret them a certain way, I would like to know!

Do you have feedback for this presentation?

What other workshops do you want to see????

W3schools is a really good source to learn HTML

  • <a href="URL" target="_blank">text here</a>
    • _blank will open the link in a new tab

Images

  • <img src="URL" alt="description">
    • Writing alt text to describe the image is good practice for accessibility. It allows screen readers to describe the image

Ideally, your styling is done in style.css. But sometimes you might want to do some text styling as one-off things

  • <b>Bolds the text</b>
  • <i>Italicizes the text</i>
  • <u>Underlines the text</u>
  • <code>Allows you to show code</code>

Creating ordered and unordered lists can be helpful

Unordered List
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

Ordered List
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>