Homepage - Team3128/team3128.github.io GitHub Wiki
In order to edit the website, you need a GitHub account and to be a part of our team's GitHub organization. You can create an account at github.com, and talk to the current Head of Controls to add you to the organization.
The homepage is seen as the "landing page" for our website, team3128.org. It is written in Hypertext Markup Language, so the file will be designated with .html
at the end. But if you browse the files in the primary Github repository, you'll see that the homepage itself isn't located in any folder, and there's no file that's called "home.html" or "homepage.html" either. The homepage file is actually called "index.html." There's an interesting rationale behind this: when a connection is established to a website without specifying a specific file in the URL, most servers return a default page. This page is known as the "landing page" and most servers will redirect to a file named "index.html", "index.htm", or "default.htm." Therefore, a connection made to "http://team3128.org" is actually redirecting to "http://team3128.org/index.html", though the file is not explicitly shown in the URL.
Note: A server can be configured to use a different file file as a landing page if desired, but "index.html" is the most common name used.
The homepage is a singular file (due to the presence of more visually intensive elements) but combines multiple components together; depending on the element of the homepage that you are aiming to edit, you will need varying levels of knowledge regarding HTML, CSS (Cascading Style Sheets), other file types, and the website in general.
Unlike a markdown file where only the information on the page is shown, an HTML file will display all elements shown on the page alongside the code that enables said elements to appear. Thus, actual text or content for the homepage is mixed in alongside the syntax. This can make finding the right part to edit moderately difficult. Thankfully, CTRL+F exists!
If you're not editing any of the HTML, editing an HTML file is very similar to editing a markdown file. However, if you want to format it in a certain way or edit certain blocks of text (e.g. you want to add another line), you will need at least a basic understanding of HTML syntax. The two most common tags you'll be using are:
<br>
Skips to the next line. Adding two in a row will skip two lines, so that there is a blank line between two lines of text. Unlike typical HTML syntax, you do not need to close this element with </br>
.
Turns the text inside the element into a comment. This means that whatever you write in between will not be visible on the actual website, but individuals who view the source code will be able to see your comment. Use this when you want to temporarily hide something (without deleting) or make a note.
W3Schools provides a very comprehensive HTML tutorial which can be accessed here.
Homepage cards are found in the _data
directory of the Github repository as cards.yml
. The YAML format is a human-readable format that can be parsed by computers (or in this case, Jekyll), which in turn applies the text to a template to create the header cards that are being rotated through the header.
The "list" format allows us to easily add, remove, or edit cards and the order of the homepage cards. For example, this is the summer camp card:
This is how it appears on the team website:
Find a more extensive explanation regarding how you can edit in the YAML format here.
Formatting the homepage requires a more complex knowledge of HTML and CSS, as well as a general knowledge of where things are stored in the repository. The homepage is meant to be relatively static; most of the time, all you will need to know is how to edit the content (e.g. text, cards).
A more in-depth explanation of how the homepage is formatted and how to edit the formatting will be added in soon!