Skip to content

1. Project Management

This week I worked on defining my final project idea and started to getting used to the documentation process.

Assignments in this week

  • [x] plan and sketch a potential final project
  • [x] read, sign the student/instructor/lab agreements, and commit to your repos
  • [x] work through a git tutorial
  • [x] build a personal site in the class archive describing you and your final project

Crail’s Final Project

Sign the student agreeements

Before class, each student must read the student handbook and sign their name at the end of the student agreement.
- Student Agreement

Commit repos to Gitlab

  1. Install the Visual Studio
    Since I need a local web page editor, I installed Visual Studio as a local web page editor. Otherwise, I can only use gitlab’s online editor.

  2. Update the Python version
    Why use python language compilation environment? Because when we want to compile Mkdoc theme files and VS local editing, we need to use a basic computer programming language to compile.

  3. Setting the SSH

    • What is SSH?
      The Secure Shell (SSH) protocol is a method and protocol for securely sending commands to a computer over an unsecured network. SSH uses cryptography to authenticate and encrypt connections between devices. SSH also enables tunneling or port forwarding, which is when packets can traverse networks that would otherwise be impenetrable. SSH is commonly used to remotely control servers, manage infrastructure, and transfer files. In our courses, SSH is mainly used to synchronize updates to the server after editing web page content locally to realize the function of updating information on remote websites.

    • How to set SSH？
      First, I need to add the ssh key obtained in the local termianl to the background of gitlab. This key will be used as the local communication key to link and enable the content transmission function of gitlab. By copying and pasting the settings, you can link gitlab’s ssh key to your local computer.

  4. Clone with SSH to local repo

Learn the Git tutorials

Git commands and basic explanation

  git status //Get the latest git file status and check if there are any parts that have not been updated successfully.
  git add. //Add git files. Generally, adding new files will have a size limit, otherwise the upload will fail.
  git commit -m “message ” //This information is used to note the naming notes for each update. For example, if I added a new picture in this update, I can make notes in the message.
  git push //This is the last step and the most important step, which is to synchronize the locally updated git files to the server.
  1. Create an foleder in local.
  2. Find the clone address with SSH or HTTPS.
  3. Clone the git format to local folder.
  4. Open the local repo via Visual Studio, then open a terminal use git.add to repo the image updates. I will also need to add the comments with git. commit.
  5. Finaly, I will use git.push to update my repo change to my git server.

Build the personal site

First attempt on webpage development

At the beginning, I directly used the original HTML template to modify and edit. However, as the content of the subsequent lessons increased, I found that the current page did not have an indexing function for relatively long content, which resulted in information reading and difficulty in obtaining. When I modify the HTML parameter file, I can simply modify the font size, icons and other copywriting displayed on the web page. Since I have no technical background in web programming, I used ChatGPT3.0 to write an HTML web program for me. When I used this program to make modifications, I found that there was no way to achieve the effect of dividing the web page into left and right columns that I wanted, so I gave up modifying the HTML template and looked for a better web page template for web page editing.

At first, I tried to use Hugo as a theme, but when I followed the steps to install a series of plug-ins, I found that it couldn’t be driven at all, so I gave up.

When I saw that many people were using Mkdocs as a theme, I asked my mentor Salman for help, and made step-by-step modifications to complete the current layout of the web page.

By directly copying the Mkdoc theme, I can directly copy my local text content to the theme for adaptation, completing the construction of the basic framework of the web page. 1. Install Mkdocs

 sudo pip3 install mkdocs
 sudo pip3 install mkdocs-material
 sudo pip3 install mkdocs-git-revision-date-localized-plugin

2. Squeeze the image size. 3. Push the local git then get the website.