First Steps

I have never created a website before and after getting to know the topic a bit I decided to create the website using the bootstrap library and starting from a template. Because in this way I would have good results and understand what I am doing. Bootstrap is a front-end component library that already defines components anyone can use in his HTML code. Bootstrap therefore defines CSS for those components so that the resulting elements look better and also scale on different devices.

After trying to start from nice templates which were not written using bootstrap or defined too much to understand as a beginner I decided to go with the Portfolio Bootstrap template from w3schools. Because it is minimalistic and I understand what it is doing.

With that decided I installed Brackets and decided to use it to develop my web page because it has a live preview window which is super nice to see what you are doing and also to jump into the corresponding code by clicking the text in the preview window. This is definitely better than writing the page in a plain text editor.

Creating the site

Starting from the named template I skimmed through the w3schools Bootstrap Tutorials to get an overview of what I can achieve with Bootstrap. I decided to add a header picture above the navigation bar and make the navbar sticky to the top so that it stays on the screen when scrolling. I also added a footer with license information.

Then I went to define a home page and about page and pages for the final project as well as for the assignments and created the corresponding links. I did not want to define the navbar and footer on each page, so followed a tutorial of w3schools on how to include HTML snippets into a webpage.

Managing the size of my webpage

To get the size of this webpage as small as possible, I compress every image before uploading it to git. I start by writing the website and adding images and in the last step before uploading, I look at which images need to be compressed. I am just opening the windows explorer to look into the folder with all the files for the website and switch to the details pane to see how big all the files are. I try to get the file size to 100-200kb for every picture that spans the whole page, 200-300kb for the header image and everything that is a smaller image even smaller.

Now that I know which images are too big, I am working on the images in Photoshop. I use Photoshop as I am mostly also cropping my images to get a better frame, so it's easier for me to do everything in there and not use ImageMagick. To resize the image, you go to Image -> Image Size... and set the new size of the image there. I use a width of 1200px for an image that spans the complete page. Then I save the image as a jpeg with a quality setting so that I am happy with the file size, usually 8-10.

Version Control

This Website will change throughout the following weeks and therefore I will use git to maintain the different version. Version control helps to maintain different versions and work copies of code or documents. The big advantage is to be able to revert to previous versions if something goes wrong or missing. You can even maintain different working copies with different features at the same time.

Git is one example of a version control system which is widely used. Subversion (SVN) is another one. The main difference here is that SVN is a centralized version control system while git is a decentralized one. That means that there is only one repository in SVN and every change that is committed needs to go there. This makes working offline difficult. In git everybody has a copy of the complete repository and commits changes to this repository, synchronization is done between the local and the main repo and can include several work steps.

I very much prefer working with a graphical git client, namely GitKraken because it is more straightforward than with the command line. You can directly see what you can do, what in your local repo changed, what were the last commits and merges and so on.

Uploading a file

To upload a file in the GitKraken client, you first need to add a new file or change something in a file in the repository. Gitkraken then shows you your changes on the right side under Unstaged Files. You can see that I changed one file (orange icon) and added two files (green icon). To upload all files and changes you can click Stage all changes. Then the files move to the lower part, to Staged Files. This means that they will be added to your next commit. Commit is a "change message". Then you need to say what this commit is about down in the Summary of the Commit Message. Then you can click on the Commit changes to 3 files button at the bottom. Now you have saved your changes locally and to upload them you need to click Push button on the top.

Git commands/concepts

Even when using the gitkraken gui you need to understand a bit of git commands, because the gui is also built around this. First, you need to clone a repository, which just means downloading and tracking changes to upload them again. After you made changes, you need to stage files to say which of the changes you made you want to upload. These staged files are added to a commit, which is one package of changes to be uploaded. You then need to write a commit message to tell everybody what the changes were about. First, your commit is only in your local repository and to upload all the changes you made to the global repo you need to push them. If you want to receive global changes into your local repo, you need to pull them. It is also best to pull before you push your changes, so if another person made changes to the same part you can fix possible conflicts. These are the concepts behind the same-named git commands which are also found in gitkraken.

Continuous delivery/yml file

This gitlab installation by standard generated a website from markdown files, but I prefer to have a static webpage. As my website needs to be copied to the right folder but not generated I needed to change the .gitlab-ci.yml file, which is responsible for this. It is called continuous integration/deployment and automatically helps bigger website setups. I changed my yml file to one for a static webpage. This was from the recitation on version control: yml file

SSH Keys

I don't use ssh keys, instead I just saved my credentials in the gitkraken gui, which is easier and for this application also sufficient from a security standpoint.

Student Agreement

I signed and uploaded the student agreement to this page.