# 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
Windows PowerShell is really confusing and tricky, since the commands are different than Linux (which is used on Mac as well), which is much more of a 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):
`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.
I used to upload my videos to Youtube and then add them in with the markdown as an html element using the following:
``
### 3D Models
Please see [Week 4](../week-4/index.html#display3dmodelonwebpage) on how I used ModelViewer to display .glb files
### 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!
**Clear your browser's cookies** since it will remember the old .css styling