# How to make this website
## Documentation
### Git and Gitlab
The arch shops website has a [tutorial on how to get started with git](https://archshops.mit.edu/gitstart.php).
The main workflow is:
- `git add -A`
- `git commit -m "my descriptive commit message"`
- `git push`
Some additional helpful git commands:
- `git reset --hard HEAD~1` This removes the last local commit from the git record. It is called a destructive action because the changes of that last local commit will be perminently lost, and do not show up in the git record.
I use this if I have added to much content in one commit and get the error `remote: fatal: pack exceeds maximum allowed size`
#### Command Line
##### Command Line tips & tricks
Press the `up` arrow. You can navigate all the commands you have previously typed using the `up` and `down` arrows, and press enter.
When typing in a path to a directory, press `tab` to have it complete the path for you. It will complete it only if or up to the point that there is no other folder that starts with those same characters.
###### Exiting Tasks
When typing a command, you should always see something that looks like `your-name-user: /my-file-path/documents/etc$`
If you see nothing or a `>` on the first line, it means your computer is in another process, interface, or stuck on a task.
To get out of this, press `Cntrl + C`
##### Using the Command Line on Windows
If you are on Windows, the default terminal PowerShell is not recommended, since the commands are different than Linux (which is used on Mac). The Linux/Mac commands are the standard.
For example, for file navigation, backslashes `/` in Linux are forward slashes `\` in windows! >_<
I use Windows Subsystem for Linux (WSL) to run commands in the terminal and work with Git.
In the windows terminal, you can type `wsl --install` in the Windows PowerShell.
Type `wsl` to start wsl and enter the linux command system whenever you open a new windows terminal:
```
Windows PowerShell
Copyright (C) Microsoft Corporation. All rights reserved.
Install the latest PowerShell for new features and improvements! https://aka.ms/PSWindows
PS C:\Users\myusername> wsl
Welcome to Ubuntu 24.04.3 LTS (GNU/Linux 6.6.87.2-microsoft-standard-WSL2 x86_64)
* Documentation: https://help.ubuntu.com
* Management: https://landscape.canonical.com
* Support: https://ubuntu.com/pro
System information as of Mon Oct 13 14:40:50 EDT 2025
System load: 0.0 Processes: 40
Usage of /: 0.2% of 1006.85GB Users logged in: 1
Memory usage: 5% IPv4 address for eth0: 192.168.64.80
Swap usage: 0%
* Strictly confined Kubernetes makes edge and IoT secure. Learn how MicroK8s
just raised the bar for easy, resilient and secure K8s cluster deployment.
https://ubuntu.com/engage/secure-kubernetes-at-the-edge
This message is shown once a day. To disable it please create the
/home/myusername-unix/.hushlogin file.
```
Once I am in WSL, I navigate to the folder I want using `cd myusername/myfolder` (replace `myusername/myfolder`) with where you want to save your folders.
To exit out of a folder (go back up the folder tree structure) I use `cd ..`
I then clone the repo using `git clone https://gitlab.org/repository-i-want-to-clone.git` (replace `https://gitlab.org/repository-i-want-to-clone.git` with the path of the repo you want to clone).
Once I am in the repo and have made a change I want to push, I use `git add -A` and `git commit -m "my commit message"` to commit any changes. I then push to the source repo using `git push`.
### Website structure
You can see the typical structure for each week by looking at [the week-x template folder structure](week-x).
I used [Favicon.cc](https://www.favicon.cc/?) to make the thumbnail that is shown on the tab of every browser (favicon).
### Images
I compress images down using [ImageMagick](https://imagemagick.org/) software, which can be run from the command line.
Here's a script I asked AI Claude by Anthropic to write, that converts all images to 100 kb using the following command in terminal (Linux):
``` python
mkdir -p converted && for img in *.{png,jpg,jpeg,PNG,JPG,JPEG}; do [ -f "$img" ] && convert "$img" -resize '1200x1200>' -quality 85 -define jpeg:extent=120kb "converted/${img%.*}.jpg"; done
```
I could create an even better script that sizes images proportionally to their original size while still making sure that the largest image in a folder is less than 100 kb.
### Video
I use ffmpeg to compress the video down to a good quality, as explained in the [Barcelona Fab Accademy repository](http://fabacademy.org/2019/labs/barcelona/local/clubs/codeclub/ffmpeg/):
`ffmpeg -i input.mp4 -c:v libx264 -crf 24 -preset slow output.mp4`
I modified this script with the help of [Claude Sonnet 4.5 to work as a batch script for any video file and place it in a compressed folder](https://claude.ai/share/2509d37b-72e6-4899-ad9b-77d8d46100cd)
```
mkdir -p compressed && for f in *.*; do [[ -f "$f" && ! -f "compressed/${f%.*}.mp4" ]] && ffmpeg -i "$f" -c:v libx264 -crf 24 -preset slow "compressed/${f%.*}.mp4"; done
```
It uses ffmpeg to compress in the same way, except has a for loop and uses regex to work on any file & extension. I learned about the && conditional operator, which means it will create a compressed folder, and only if this works it will run the compression `for` loop.
It will not compress files that have already been compressed if they have the same name.
HTML Tag to add a video:
```html
```
Not recommended, but if you want to upload to Youtube, you can embed with the markdown as an html element using the following:
```html
```
### PDFs:
You can embed a pdf using this html template. Replace `http://yoursite.com/the.pdf` with a path like `files/pdf/my-document.pdf` if the pdf is stored in your gitlab website repo.
``` html
```
The code above is from [Display pdf image in markdown stack overflow article](https://stackoverflow.com/questions/39777166/display-pdf-image-in-markdown).
### 3D Models
Please see [Week 4](../week-4/index.html#display3dmodelonwebpage) on how I used ModelViewer to display .glb files.
ModelViewer will not work if you are viewing just the html of a page in a browser. You must have a local surver where the address in your browser starts with something like `localhost:8000/` for examople or view it online on the website once you have published your site (your url will start with something like `https://` for example).
### Markdown
At first, I just edited the source html of the website. However, I found html source code hard to read and edit. It is tedious to have to type in all the html elements.
I wish I could just write in markdown, which is closest to normal text.
[Markdown-Tag](https://github.com/MarketingPipeline/Markdown-Tag?tab=readme-ov-file) is by far the simplest way to add markdown to an html page.
You just need to include the `` element into your html, and add this simple script with the link to the bottom of the page.
I am using the [github flavor of markdown](https://gist.github.com/allysonsilva/85fff14a22bbdf55485be947566cc09e), because I liked its formatting for text. For a refresher on how to write markdown, [this markdown editor](https://markdown-it.github.io/) allows you to play with markdown and how it gets rendered as a webpage.
Some of the basics are:
`## Section Headers`
`[link title](https://myurl.com/mypage)`
``
`- list element`
I used so that I can easily edit my site in markdown and then publish as html.
I also looked at [markserv](https://github.com/markserv/markserv), the system linked at HTMAA, but that I don't understand
exactly how to integrate into my software stack.
### Style guide
Here is a quick style guide for my site:
> All assignments should be indented like so
### Errors:
- " < " character renders as `<` when in inline code.
- Code blocks are not formatted in colorful ways:
``` python
name = input("What is your name? ")
print("Hello, " + name + "!")
```
## Aesthetics
### Background grid lines
[This stack overflow post](https://stackoverflow.com/questions/3540194/how-to-make-a-grid-like-graph-paper-grid-with-just-css) shows how to create vertical lines in the background using css. I changed the grid spacing, line thickness and color from the example shown.
I also referred to [Mozilla's documentation on repeating linear gradients.](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/repeating-linear-gradient)
### Troubleshooting css
I ran into this issue where my online site was not updating even though I had pushed to github.
On closer inspection it looks like it was just the style updates that were not changing. Then I remembered to clear my cookies!
When changing CSS styles, if you don't see any changes on your site, **clear your browser's cookies.**
Cookies will remember the old .css styling and keep that formatting even if you changed and saved the css.