Skip to content

Week 1: Website Design and Fusion Drawing

This week I worked on creatng a website for the rest of Fab. This website will contain all of my documenting throughout the 20 weeks. I created it using my Windows 11.

Downloads

Helpful Documenting of Past Students

Students Who Helped Me

Process

Throughout the proccess I followed the Two AI-created Workflow by ChatGPT. This was extremly helpful except I struggled alot on about every step.

Creating SSH

To create the SSH key I first attempted to create it in the Command Prompt on my computer. I know that this worked for a few people but it didn’t work for me so I recommend just going straight to the VS Code. This worked perfectly the first time I tried it. To set it up I logged into my GitLab repository. I wanted to make sure I could get into that because that’s where I was going to add the SSH Key.

After signing in to GitLab, the next step was to go into the terminal and run the first two commands. That works right away and the first photo is what I got from the Command Prompt that didn’t work and then the second photo of it working in the terminal.

The next thing needed to do was to upload the SSH KEy to the Repository. Through the images below I walk through the steps to do that.

The first step to go to the settings drop down uder your profile. Once you click on your profile, click “Preferences”.

Once your in Preferences, click on the SSH Key tab.

After the Preferences, then go to the edge and click on the add new key button.

Once you click the add new key button, a bunch of boxes pop up. The first box is where you add the key you copied. Then the next box is the title. The title is up to you. I recomend something basic. Then final box in this image is the useage type and I just kept it on Authentication and Signing option.

Finally, the last box is the expiration date. This date you can change later but it automatically sets to one year. I kepts it at one year because if I need to change it later I can. And then just click the “Add Key” and the key would be added to the Git.

The code prompts I used are below:

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

This code is used to create the SSH Key. The only thing that needs to be changed it the email spot. In that spot, you should actually add your email

cat ~/.ssh/id_rsa.pub

This code is used to get the the public Key and to copy. Once you get something that says ““Welcome to GitLab, [your username]!”, then the SSH is working. If not then there is a problem with the SSH Key you added.

ssh -T git@gitlab.fabcloud.org

This code tests to make sure the SSH is working after you add it to your GitLab

Cloning the GitLab Repositor

Cloning the Repository

After the SSH Key was created and added, the next step was to clone your repository into your computer. To do this the code is posted below and you just copy and paste the code below. But you want to make sure that it’s your repository. The other images walk you through how to get the URL to your repository. 

git clone git@gitlab.fabcloud.org:academany/fabacademy/2025/labs/charlotte/site.git

This is the code for the cloning. The only thing you need is the git clone and then after that it’s the link to your page.

On the Gitlab repository home page of yours, you can find the link under the blue code button.

Then the URL is the first link on top to clone with the SSH Key you have added.

Finding the Project Folder

The next part of cloning is to find the Project Folder. To do this the AI workflow says to use the cd site code but that didn’t work for me so instead I used the code below.

cd <file location>

Installing MkDoks for Easy Documenting

Installing Python

You can download Python at this link. This link take you straight to the 3.13.1 version of python. While downloading, make sure the “Add Python to PATH” button is clicked if there is the option to.

Setting Up the MkDocs

To set up MkDocs I first installed it in the VS Code terminal by using the command below.

pip install mkdocs

This code uses pip from the python just into install MkDocs in VS Code.

Then after installing the MkDocs, I need to make sure that it was working and running. In order to do this I used the command below and added that into the terminal.

mkdocs --version

For me the code didn’t work the first time. I kept on getting the error below.

To fix that error, I decided to ask ChatGPT for help. I took a screenshot of the error and then added it to my promt and the promt was “fix my problem”.

Chat told me to: 1. Re-install MkDocs 2. Check if MkDocs was in my PATH 3. Re-verify MkDocs

The full conversatin with chat is in the “Useful Links” tab and it has all my conversations with ChatGPT.

To fix the probelm, I tried to re-install it but that didn’t work so them I did the next step and checked to make sure that the MkDocs was in my PATH.

As seen in the Image it showed that it was in my PATH whish meant that there had to be a different reason for it not to be working.

While working on the website I was woring with one of my classmate. We later realized that the Wifi that we were on was being used by many people because we were working in a public library with free wifi. Therefore, we decided to turn on a hotspot so things would work fast. When we connected onto the hotspot, the MkDocs worked showing the image below.

This is the message that was supposed to be showen when you ask for the version

Setting up Local

To set up my Local Repository, I fist started with the following command.

git branch

When I entered in theis command, I wasn’t on the main. Since I wasn’t on the main and instead I was on master, I used the following command to try to get on it. 

git checkout main

This didn’t work for me for I got this error:

I learned that the error was because my computer didn’t have enough storage on it. My computer is a hand-me-down meaning that there was alot of stuff already on it. All of my apps and images status was not availible. Then I went to go check mthe status on my files and all of them had an X rather a checkmark. Therefore, I deleated a bunch of images that were already saved onto my phone and cleared up all my storage. As soon as I did that and typed in the command again, the files got a checkmark and I connected to the main.

My computer connected to the main branch rather the master branch

Setting Up My Repo

To set up the repo using the template, the first thing needed was the student template repo. I followed the same steps I did for cloning my personal repo but this time with the student repo’s SSH link. Then I opened files two times. I speciffically recomend that because then you can easily click and drag your files. One one screen I had my personal repo open then on the second one I had the student template opened.

The two screen side-by-side eachother

Then once I did that I removed everything in my personal repo. Then, I selected everything in the student template and draged it into my personal repo.

Once I moved everything over to my personal repo, I deleted the student template.

Commiting

Commiting my edits were very easy todo and straight forward.

The first thing that I did was I went ahead and commited the student template. To commit it I went to the side tool bar.

The red highlighter box is the source control tab which is where you commit and the top tab is the explorer where you edit your website template. Those are the only two tabs you need to use while making a website.

Once I went to that tab, the following screen on the side looks like the image below.

The fist box is the message box which is very important. One thing I learned that you need to include a message because if you don’t then VS Code will glitch. For some reason VS Code doesn’t now how to process a blank commit. But also I learned that I shouldn’t want todo that anyway because in the future it would have been hard to tell what I have done, making it harder for me to make edits because I would have to go through ever commit.

After I got to that page I assumed what todo next and I pressed the Commit button. As soon as I commited I got a warning. I read the warning and decided to just press yes. I learned later to just press always becasue then the warning wouldn’t stop popping up everytime I commited but it doesn’t actually mean anything that will cause harm.

Image of the warning I got

The next step was to synce the changes. after I clicked yes on the warning the commit loaded and I got a new button that said “Sync Changes”. I wasn’t very sure what it meant but I went ahead and pressed it. I learned that its syncs the changes just made with the past changes.

The Sync Changes bar that I pressed to connect the changes I made to my Repo

Then I went on to my Repo to find my my website link and it was loading. There was a blue circle that was about 2/3 covered. This meant that is was in th eprocess and pending. I was waiting for the green check that I eventually got.

The following image shows that once I got the checkmark, everything was up to date on my repo.

This is an image of the setup in VS Code of the sidebar to the side.

This is an image of the first time that I entered into my website. After the test worked, to create the website js continue editing everything.

Struggles

SSH Problems:

The first thing I struggled with was my SSH. This part was for some reason extremely challenging to me because I couldn’t get the public key. For some reason I kept on getting an error. And I thought I would get the public one because as you can see in the image it says public key, but that’s actually not the public one. I tried to add that SSH Key to my Gitlab page but then I got a message stating that I was about to add a private key and asked if I wanted to continue.

SSH Solution:

To fix this I went into VS Code, followed the steps and created the SSH in the terminal. For some reason the Command Prompt on my computer wasn’t working for the cat function which we needed to use to get a public one but on VS Code the cat function worked. Then, when I went to upload it to my git, I didn’t get any messages and it worked perfectly.

Final Project Idea

My final project is a touch screen magic mirror. In my drawing the image on the left is an IR Frame. I had a test idea that I created in Electrical Engineering class. The idea is to use IR recievers and IR leds. The leds send a signal to the other side full of recievers. The four sides togeth create a matrix grid that with calculate where ur finger is and when you press down on the screen, it turns it touch screen. I’m still deciding if i want to use a CIA sensor, the sensor inside a printer, or the recievers. In class I used the recievers and it worked but I don’t know how accurate tat will be.

Then for the screen part, just likeany magic mirror, I will us a PC screen behind a double sided mirror. My goal for this project is to make it touch screen and to be able to listen to music and watch movies. If I have extra time, I would like to be able to connect my phone with bluetooth as well. Since I want to beable to have sound, I will be using speakers.

Finally, I’m going to create a frame to cover up the IR Frame that will be CNC out of wood and then painted to look more pretty and to cover the wires that may be hanging out.

Last update: February 6, 2025