1. Project management¶
This week’s tasks:
a) Build a personal site and document your learnings
b) Upload media to the archive
c) Work through a git and visual studios tutorial and cloning our website locally.
For the first day, we were introduced to gitlab which is essentially a software development process we use to edit and update our personal website in markdown format. For someone who has no experience personalizing a website and anything to do with coding, i found Gitlab to be very starightforward and simple.
Markdown¶
Markdown is a lightweight markup language using simple symbols for text formatting. It allows creating headings with hash symbols, formatting text with asterisks or underscores for italic and bold, making lists with numbers or bullets, adding links and images, inserting code blocks, and quoting text. Markdown is easy to write in plain text and can be converted into HTML or other formats using various tools and editors. It’s widely used on platforms like GitHub and Reddit for writing and formatting documents quickly and efficiently.
Navigating Gitlab¶
First we go to build > pipeline
Here, you can see the pipelines, its status and which stage it has reached.
In order to access our site in viewer mode, we go to deploy>pages where you’ll find a direct link to it
Next we learned about commits which is a section in the left tab where you can view all the changes you’ve made and whether or not it has been processed by looking at its status on the right.
To edit, we go to our about page> choose which panel to edit> click on the blue edit button then edit single file and do your respective edits on the ready-made template provided to us.
Changing and adding images¶
To add an image, we have to make sure that all the images we want to include are uploaded to the archive. After that step is done, we follow the same procedure as above, this time in the images folder. Here, we see in red the image file name, all we have to do is change the existing name to the exact name of the image we want to replace it with.
Make sure to input the exact name of the file including spaces.
Another thing we learned about is that we can keep track of our tasks/assignments by going to plan>issues.
Red means task not done and green means task completed.
Cloning our website¶
Another thing we learned is how to clone our git website in order to edit and update offline. There are many advantages to this including: - You get to preview your changes before it getting pushed.
-
Adding images or other types of media is easier.
-
You don’t have to be connected to a network to save your changes.
-
Its collaboration made easier since multiple people can make changes at the same time.
The way to do this is by first, going to your gitlab and in the main repository, you will find “code”. You will have to copy the URL in https format since that’s what we’re working with
Create a folder where you want your clone to be in and in that folder, right click and open in git bash
We were instructed to follow the steps in this website: Cloning
Then, in gitbash, we type in git clone and paste the url we copied earlier and click enter. You will be prompted to log in to your account and once all the steps are successful, open the Visual Studios app.
Load your clone into visual studios and make the changes you want.
Here, it is simpler to add new images unlike in gitlab where you manually have to add a file one by one.
All you have to do is copy the image and paste it in your clone website under ‘images’.
Save changes¶
For the first time, you have to enter the terminal and configure our username and email.
Now, in order to save changes, simply ctrl+S and you can push the changes to the website by clicking on commit on the left hand side but not after you put in a short description of your change.
Once you input the ‘message’, enter commit then you can synchronize the changes.
One thing to note is that if you are working on gitlab and visualstudios simultaneously then you try to save the changes, a pop up will appear asking you to either merge the changes or pick one change.
You can do this on either gitlab or visual studios itself to resolve the issue.
You’ll be presented with 2 windows side-by-side to show you the difference in both servers then you get to choose which to commit.
Customizing your website using MkDocs¶
So far, we have learned to make and edit a website using markdown. But with that, comes some restrictions due to how simple the langugage is. So there are limits to how much you can customize your website.
MkDocs is a static site generator that transforms Markdown files into documentation websites. It offers simplicity in content creation with Markdown, where you can customize themes for your site, automatic navigation generation, a command-line interface for project management, support for extensions, and makes it easy in deployment. MkDocs is widely used by developers and organizations to create and maintain clear and structured documentation sites efficiently.
You are able to change the logo, color, font etc. through editing your mkdocs.yml located in your main folder. Then use this link to see what changes you can make from the default options.
So we were introduced with an alternative which is an HTML format. We simply find a free html template online using this link Free-css or Free-html. Download your desired template and edit it.