Two AI-created Workflow by ChatGPT

1.​ Version 1: Step-by-Step Guide for Setting Up Git, GitLab, VS Code, and MkDocs
for Your Project
Step 1: Install Git..................................................................................................................... 3
Step 2: Install Visual Studio Code (VS Code)..........................................................................3
Step 3: Set Up Your GitLab Account and SSH Key................................................................. 3
Step 4: Clone Your GitLab Repository to Your Computer........................................................ 4
Step 5: Install MkDocs for Documentation...............................................................................5
Step 6: Set Up Your Local Repository..................................................................................... 6
Step 7: Work on Your Project Files.......................................................................................... 6
Step 8: Commit and Push Changes........................................................................................ 6
Step 9: Pull Updates from GitLab............................................................................................ 7
Step 10: Serve MkDocs Locally to Preview Your Documentation............................................7
Step 11: Push Documentation Changes to GitLab.................................................................. 8
2.​ Version 2: Step-by-Step Guide for Setting Up Git, GitLab, VS Code, and MkDocs
for Your Project................................................................................................................ 9
Step 1: Set Up Git on Your Computer......................................................................................9
Step 2: Set Up SSH Keys for GitLab....................................................................................... 9
Step 3: Clone Your GitLab Repository................................................................................... 10
Step 4: Install Markdown Preview in VS Code.......................................................................11
Step 5: Install MkDocs........................................................................................................... 11
Step 6: Create Your MkDocs Documentation Project............................................................ 12
Step 7: Preview Your Documentation Locally........................................................................ 13
Step 8: Push Your Changes to GitLab................................................................................... 13
Step 9: Pull Changes from GitLab (if needed)....................................................................... 14
Step 10: Build and Deploy Your MkDocs Site........................................................................14
Final Notes.............................................................................................................................14
3.​ Fab Academy Repo Template: Step-by-Step Guide for Setting Up and Using Git,
GitLab, a Template Site, HTML, and CSS.....................................................................15
Step 1: Install Git................................................................................................................... 16
Step 2: Install Visual Studio Code (VS Code)........................................................................16
Step 3: Set Up Your GitLab Account and SSH Key............................................................... 17
Step 4: Clone the Repository.................................................................................................18
Step 5: Open Your Project in VS Code.................................................................................. 18
Step 6: Work on Your Project.................................................................................................19
Step 7: Commit and Push Your Changes to GitLab...............................................................19
Step 8: Pull Updates from GitLab.......................................................................................... 20
Step 9: Troubleshooting Common Issues..............................................................................20
Step 10: Optional - Customize the Template......................................................................... 21
Here’s a detailed Step-by-Step Guide for students to
install and use VS Code, set up GitLab, and work with
MkDocs:

Step 1: Install Git

1.​ Download and Install Git:​

○​ Visit the Git official download page.

○​ Choose the version of Git for your operating system (Windows, macOS, or
Linux).
○​ Run the installer and follow the prompts. It’s recommended to leave the
default settings, especially for Git Bash.
2.​ Verify Git Installation:​

○​ Open VS Code’s integrated terminal (Ctrl+~) or use your computer’s

terminal.
○​ Type the following command to verify Git is installed:

Unset
git --version

○​ If it shows the version of Git installed, you’re all set!

Step 2: Install Visual Studio Code (VS Code)

1.​ Download and Install VS Code:

○​ Go to the Visual Studio Code download page.
○​ Select the version for your operating system and run the installer.
○​ Open VS Code after installation.

Step 3: Set Up Your GitLab Account and SSH Key

1.​ Set Up Your GitLab Account:​

 ○​ Fab Academy will provide you with a GitLab repository. Log in to GitLab
using the credentials provided to you by Fab Academy.
2.​ Generate SSH Key (for secure GitLab connection):​

○​ Open VS Code’s integrated terminal or PowerShell.

○​ Run the following command to generate a new SSH key (replace
your_email@[Link] with your email address):

Unset
ssh-keygen -t rsa -b 4096 -C "your_email@[Link]"

○​ When prompted to choose a file location, just press Enter to accept the
default (~/.ssh/id_rsa).
○​ Optionally, set a passphrase for added security or leave it empty and press
Enter.
3.​ Add SSH Key to GitLab:​

○​ Copy the SSH public key by running this command:

Unset
cat ~/.ssh/id_rsa.pub

○​ This will output your SSH public key. Copy the entire output.
○​ Log in to GitLab, navigate to User Settings > SSH Keys, and paste your
SSH key into the provided box. Click Add key.
4.​ Test the SSH Connection:​

○​ To verify the connection, run:

Unset
ssh -T git@[Link]

○​ If you see a message saying “Welcome to GitLab, [your username]!”, your

SSH setup is complete!

Step 4: Clone Your GitLab Repository to Your Computer

 1.​ Clone the Repository:​

○​ In VS Code, open the integrated terminal (Ctrl + ~).

○​ Navigate to the directory where you want to store your project.
○​ Clone your repository using this command (replace the URL with the
repository URL provided by Fab Academy):

Unset
git clone
git@[Link]:academany/fabacademy/2025/labs/charlotte/
[Link]

○​ This will create a folder with your project files.

2.​ Navigate to the Project Folder:​

○​ Once cloned, go into your project folder by running:

Unset
cd site

Step 5: Install MkDocs for Documentation

1.​ Install Python (required for MkDocs):​

○​ Download Python from [Link], and make sure to check the option
“Add Python to PATH” during installation.
2.​ Install MkDocs:​

○​ Open the terminal in VS Code and run the following command to install
MkDocs:

Unset
pip install mkdocs

3.​ ​
Verify MkDocs Installation:​
 ○​ After installation, check if MkDocs is installed by running:

Unset
mkdocs --version

Step 6: Set Up Your Local Repository

1.​ Check Your Branch:

○​ Run the following command to check that you are on the main branch:

Unset
git branch

○​ If you are not on the main branch, switch to it:

Unset
git checkout main

Step 7: Work on Your Project Files

1.​ Edit Files in VS Code:​

○​ Open the files in the site folder using VS Code.

○​ For example, edit docs/[Link] or [Link] for your project.
2.​ Preview Markdown Files:​

○​ In VS Code, you can preview Markdown files (like [Link]) by

right-clicking and selecting Open Preview, or by using Ctrl+Shift+V.

Step 8: Commit and Push Changes

1.​ Stage Changes:​

 ○​ Once you’ve made changes to the files, run the following command to
stage the changes:

Unset
git add .

2.​ ​
Commit Changes:​

○​ Commit the changes with a message that describes what you did:

Unset
git commit -m "Describe your changes"

3.​ ​
Push Changes to GitLab:​

○​ Push the changes to the main branch of your GitLab repository:

Unset
git push origin main

Step 9: Pull Updates from GitLab

1.​ Fetch and Merge Changes:

○​ If you want to get the latest changes from GitLab (especially if other people
are working on the repository), run:

Unset
git pull origin main

Step 10: Serve MkDocs Locally to Preview Your Documentation

 1.​ Preview Your Documentation:
○​ In the VS Code terminal, run the following command to preview your
project:

Unset
mkdocs serve

○​ This will start a local server. Open your browser and go to

[Link] to view your project.

Step 11: Push Documentation Changes to GitLab

1.​ Commit and Push Documentation:

○​ Once you are happy with your changes to the documentation, stage,
commit, and push them as described in Step 8.

By following these detailed steps, you’ll be able to set up Git, GitLab, VS Code, and
MkDocs, as well as sync changes between your local files and GitLab.
General Process for Connecting/Setting-up your
GitLab Repository & VS Code
Sure! Here's a comprehensive, student-friendly guide that combines the setup of Git, GitLab, VS
Code, SSH keys, and MkDocs, all in one process:

Step-by-Step Guide for Setting Up Git, GitLab, VS Code,

and MkDocs for Your Project
Step 1: Set Up Git on Your Computer

1.​ Install Git:​

○​ First, make sure you have Git installed on your computer. If you don’t have it,
download it from the official Git website: [Link]
○​ After installation, open PowerShell or Command Prompt and type the following
to check if Git is installed:

Unset
git --version

○​ If Git is installed, you should see the version number.

2.​ Set Up Your Git Identity:​

○​ Set your name and email in Git so that your commits are properly identified:

Unset
git config --global [Link] "Your Name"

git config --global [Link] "[Link]@[Link]"

Step 2: Set Up SSH Keys for GitLab

1.​ Generate an SSH Key:​

 ○​ In PowerShell or Command Prompt, generate a new SSH key using the following
command:

Unset
ssh-keygen -t rsa -b 4096 -C "[Link]@[Link]"

○​ When prompted to "Enter file in which to save the key," press Enter to use the
default location.
2.​ Add Your SSH Key to the SSH Agent:​

○​ Start the SSH agent in the background by running:

Unset
eval $(ssh-agent -s)

○​ Add your SSH private key to the SSH agent:

Unset
ssh-add ~/.ssh/id_rsa

3.​ ​
Add the SSH Key to GitLab:​

○​ Copy your public SSH key to the clipboard:

Unset
clip < ~/.ssh/id_rsa.pub

○​ Go to GitLab, log in, and navigate to Settings > SSH Keys.

○​ Paste the copied SSH key into the "Key" field and give it a title.
○​ Click Add Key.

Step 3: Clone Your GitLab Repository

1.​ Clone Your Repository:​

 ○​ Fab Academy will provide you with a GitLab repository. In VS Code, open the
Terminal and run the following command to clone your repository (replace
your-repo-url with the URL of your repository):

Unset
git clone
git@[Link]:academany/fabacademy/2025/labs/charlotte/
[Link]

○​ This will create a folder on your computer with the contents of the repository.
2.​ Navigate to Your Project Folder:​

○​ Go into the cloned repository folder:

Unset
cd your-repo

Step 4: Install Markdown Preview in VS Code

1.​ Install the Markdown Preview Extension:​

○​ In VS Code, go to the Extensions view (Ctrl+Shift+X) and search for

Markdown Preview Enhanced (or a similar extension).
○​ Click Install.
2.​ Preview Markdown Files:​

○​ Open any .md file, then press Ctrl+Shift+V to open the Markdown preview.
○​ You will see the rendered version of your Markdown file alongside the raw
Markdown code.

Step 5: Install MkDocs

1.​ Install Python:​

○​ MkDocs is a Python-based tool, so you need to have Python installed. If you

don’t have it, download it from here.
 2.​ Install MkDocs:​

○​ Open PowerShell or Command Prompt and run:

Unset
pip install mkdocs

3.​ ​
Verify MkDocs Installation:​

○​ Check if MkDocs is installed by running:

Unset
mkdocs --version

Step 6: Create Your MkDocs Documentation Project

1.​ Create a New MkDocs Project:​

○​ In the terminal, run the following to create a new MkDocs project:

Unset
mkdocs new my-project

2.​ ​
Navigate to Your Project Folder:​

○​ Go into your new project directory:

Unset
cd my-project

3.​ ​
Edit the [Link] File:​
 ○​ Open the [Link] file and configure your site’s settings (e.g., title,
navigation).
4.​ Edit the Markdown Files:​

○​ Edit the default Markdown file (docs/[Link]) to start writing your

documentation.

Step 7: Preview Your Documentation Locally

1.​ Serve the Site Locally:

○​ To view your documentation in a browser, run:

Unset
mkdocs serve

○​ Open your browser and go to [Link] to view the site.

Step 8: Push Your Changes to GitLab

1.​ Add Changes to Git:​

○​ After editing your project files, add them to Git:

Unset
git add .

2.​ ​
Commit Your Changes:​

○​ Commit the changes with a message:

Unset
git commit -m "Added MkDocs documentation"
 3.​ ​
Push Changes to GitLab:​

○​ Push the changes to GitLab:

Unset
git push origin master

Step 9: Pull Changes from GitLab (if needed)

1.​ Pull Latest Changes:

○​ If you need to download changes from GitLab (e.g., when someone else updates
the repository), run:

Unset
git pull origin master

Step 10: Build and Deploy Your MkDocs Site

1.​ Build the Static Site:​

○​ To generate static files for your documentation, run:

Unset
mkdocs build

2.​ ​
Deploy the Site:​

○​ Upload the contents of the site/ folder to your GitLab Pages or another web
server to make it live.

Final Notes
Now you have everything set up to:

●​ Edit your documentation using Markdown in VS Code.

●​ Build and serve your documentation site with MkDocs.
●​ Push and pull your changes to/from your GitLab repository.
●​ Share your work with others by deploying it.

Make sure to commit and push your changes regularly to keep your project updated!

This guide provides you with a full setup and workflow to manage your Fab Academy project
with GitLab, VS Code, and MkDocs. Happy coding!
General Process for setting-up your GitLab
repository containing a site template built with
HTML and CSS
Here’s a Step-by-Step Guide for students working with a GitLab repository containing a
site template built with HTML and CSS:

Step 1: Install Git

1.​ Download and Install Git:​

○​ Go to the Git website.

○​ Choose the correct version for your operating system (Windows, macOS,
or Linux).
○​ Run the installer and follow the prompts. Leave the default settings,
especially for Git Bash.
2.​ Verify Git Installation:​

○​ Open the terminal in VS Code (Ctrl+~) or use your computer’s terminal.

○​ Run:

Unset
git --version

○​ If it shows the installed Git version, Git is ready to use.

Step 2: Install Visual Studio Code (VS Code)

1.​ Download and Install VS Code:​

○​ Go to VS Code’s download page.

○​ Install the version for your operating system.
2.​ Install Extensions:​

○​ Launch VS Code and install the following extensions for web development:
■​ Live Server (to preview your site in the browser).
 ■​ HTML CSS Support (for better coding assistance with HTML/CSS).

Step 3: Set Up Your GitLab Account and SSH Key

1.​ Log in to GitLab:​

○​ Fab Academy will provide you with a GitLab repository. Log in using the
credentials they provide.
2.​ Generate SSH Key:​

○​ Open the VS Code terminal or your system terminal.

○​ Run:

Unset
ssh-keygen -t rsa -b 4096 -C "your_email@[Link]"

○​ When prompted, press Enter to save the key in the default location
(~/.ssh/id_rsa).
3.​ Add the SSH Key to GitLab:​

○​ Copy your SSH key:

Unset
cat ~/.ssh/id_rsa.pub

○​ Go to GitLab > Profile > SSH Keys and paste the key. Click Add key.
4.​ Test SSH Connection:​

○​ Verify the connection:

Unset
ssh -T git@[Link]

○​ You should see a message like “Welcome to GitLab, [your username]!”

Step 4: Clone the Repository

1.​ Get the Repository URL:​

○​ Navigate to your project on GitLab and click Clone. Copy the SSH URL.
2.​ Clone the Repository Locally:​

○​ Open the terminal in VS Code or your computer.

○​ Navigate to the folder where you want to store your project:

Unset
cd path/to/your/folder

○​ Clone the repository:

Unset
git clone git@[Link]:your-group/[Link]

○​ Replace your-group/[Link] with your repository’s SSH

URL.
3.​ Navigate to the Project Folder:​

○​ Change into the newly created folder:

Unset
cd your-repository

Step 5: Open Your Project in VS Code

1.​ Open the Folder:​

○​ In VS Code, go to File > Open Folder and select your project folder.
2.​ Familiarize Yourself with the Files:​

○​ Your project should include files like:

■​ [Link]
■​ CSS folder (/css)
 ■​ Images folder (/images)
○​ You’ll work mainly in [Link] and the CSS files.

Step 6: Work on Your Project

1.​ Edit HTML and CSS:​

○​ Open and edit files like [Link] or any CSS file in the /css folder.
○​ Save changes using Ctrl+S.
2.​ Preview Your Site Locally:​

○​ Right-click on [Link] in the VS Code explorer and select Open with

Live Server (if you’ve installed the extension).
○​ This will open the site in your browser. You can view changes in real time
as you save edits.

Step 7: Commit and Push Your Changes to GitLab

1.​ Stage Your Changes:​

○​ In the terminal, run:

Unset
git add .

○​ This stages all changes in your project.

2.​ Commit Your Changes:​

○​ Write a message describing your changes:

Unset
git commit -m "Updated HTML structure and CSS styles"

3.​ ​
Push Changes to GitLab:​
 ○​ Push your changes to the repository:

Unset
git push origin main

○​ Your changes are now live in the GitLab repository.

Step 8: Pull Updates from GitLab

1.​ Fetch and Merge Changes:

○​ Before making new edits, ensure you have the latest version of the
repository:

Unset
git pull origin main

Step 9: Troubleshooting Common Issues

1.​ Conflict Resolution:​

○​ If you get a merge conflict when pulling updates, resolve it by opening the
conflicted files in VS Code. Git will mark the conflicting sections.
○​ After resolving, stage the files:

Unset
git add .

○​ Then, commit the resolution:

Unset
git commit -m "Resolved merge conflict"

2.​ ​
Live Server Not Working:​
 ○​ Ensure the Live Server extension is installed and enabled in VS Code.
○​ Restart VS Code if needed.

Step 10: Optional - Customize the Template

1.​ Add New HTML Pages:​

○​ Duplicate the [Link] file, rename it, and edit the content for new
pages.
○​ Link new pages in the [Link] navigation.
2.​ Customize Styles:​

○​ Edit the CSS files in the /css folder to match your desired design.

By following this guide, you’ll be able to edit and manage your HTML and CSS-based site
template from your GitLab repository, push updates, and preview changes effectively!