1. Project management¶
Website Setup¶
We kicked off by configuring our project pages, the one you are currently browsing! Here were the steps for that.
Here is how the main page should look like
We first need to run the pipeline to build the site. To the left, select “Build” > “Pipeline”
Next Run and confirm the Pipeline
You can then click on “Pipeline” to the left to see the progress of the build and wait for it to become green.
Done! Now the template is ready to be edited. Next familiarize yourself with the directories, in the main page we have the index page (home page), and the docs folder which has the “images” folder containing all the images for the website.
Let’s add an image to our site, first head over to the directory “docs/images”
Click on the + button and then select “New File” and select the image from your machine.
With that the image has been uploaded, and we now need to make the changes on the page itself to refrence this newly uploaded image. Let’s add our new image to the about page (located in “docs\about”)
On the right side, tap on “Edit” and then select “Edit single file”
here is the markup code to add an image
Next, let’s look at a better way to manage our website using GIT Clone and Visual Studio!
GIT Clone¶
In the second class, we learned how to use the “git clone” command to clone our work, and then opened it in Visual Studios for a cleaner way to edit and manage our files.
We start off by downloading and installing GIT Bash from here. Keep all the default settings.
Next, create a new folder on your desktop (or any location you prefer), and then right click and select “Open GIT Bash Here”
git clone https://url.com
On certain versions of Windows, you may have to first select “Show More Options”, before “Open GIT Bash Here”
You should see a black command terminal, this is where you can enter all your GIT commands. We will start by
If asked for your credentials, enter them. Press Enter to run the command and wait for it to download all your files.
You should now have a new folder with all your files in it. To start editing our pages, we need to open it in Visual Studio next.
Visual Studio (IDE)¶
Open Visual Studio, and then click File > Open Folder, and select the folder that GIT Bash just created.
Open the terminal window in Visual Studio, and then write the following commands, replacing the email and username with your own credentials.
git config --global user.email youremail@gmail.com
git config --global user.name yourusername
We can now proceed to make changes to our website, or add images in our working directory. Visual Studio will keep track of these changes.
When we are done, we can then push these updates and sync them by clicking “Commit” and “Sync Changes”. Be sure to also add in a comment, as it is mandatory in order to keep a track of all the changes we do.
If we want to customize the theme of our site, we can edit the file called “mkdocs.yml”. To make color changes, we can modify this part of the code
theme:
name: material
palette:
# try other colors https://squidfunk.github.io/mkdocs-material/getting-started/#primary-colors
primary: orange
accent: lightblue
We can also change the social media links in the footer of the page by modifying this part of the code
extra:
social:
# For other social icons at https://squidfunk.github.io/mkdocs-material/setup/adding-social-links/
- icon: fontawesome/brands/instagram
link: https://instagram.com/
- icon: fontawesome/brands/linkedin
link: "https://linkedin.com/in/academany"