First of all, we looked into just creating a plain HTML document. To do this, we need boilerplate code, which is the bare bones structure.
HTML elements open and close with tags, such as <head> and </head>. We use these to create certain sections on our website.
<head>: Contains the necessary code for the website to run, but it is invisible. Like character set or display width.
<body>: Contains the contents of the website that we are able to see. Menus, paragraphs, media are all under<body>.
Other than these, we have the <title>- which is the title displayed on the browser- language, and the necessary <html> element.
Here is what a boilerplate code looks like:
|
|
Within the body, we can add some additional elements:
<header></header>: Located on the top of the page, can contain the main page title or the navigation bar.
<nav></nav>: We use this to specify that the elements within this tag constitute the navigation bar.
<ul></ul>and<ol></ol>: Unordered and ordered list elements, respectively. Each element under these needs to be contained within<li></li>to be a list.
<table></table>: We use this to create a table.<tr></tr>elements are used to indicate rows, while<td></td>are used to indicate columns.
<section></section>: Can be used to divide the page into certain sections.
<footer></footer>: Located on the bottom of the page. Can contain a copyright symbol for example.
In order to have titles and paragraphs in our page, we use the following:
<h1></h1>: We put the title between these. These should always be in a specific order, from<h1>to<h6>: the former always being the main title of the page. Do not skip any of them, always write them in order.
<p></p>: We put text between these to indicate that it is a paragraph.
The first draft of my homepage is below. I used a table as a navigation bar instead of a list.
|
|
We can add more pages by creating HTML files under the same folder and linking to them. The seperate pages need to have the same head information. Also they need to have the same navigation table if we want to navigate between them.
The code for linking to another HTML page is: <a href="pagename.html">Page Name</a>
For example, here is my “About Me” page:
|
|
To add media, we first need to copy it to our website folder. Then, we can refer to it by name inside our code.
To add images:
<img src="filename.jpg">Control it’s width:
<img src="filename.jpg" width="100%">Add a description:
<img src="filename.jpg alt="desciption">To add videos:
1 2 3<video controls width="250"> <source src="videoname.mp4" type="video/mp4> </video>We can also autoplay videos by:
1 2 3<video controls autoplay width="250"> <source src="videoname.mp4" type="video/mp4> </video>
We have built the basic boilerplate HTML page. Now, we need to start using Git in order to publish it.
Git is a tool for version control. It gives us the ability to access the previous versions of a website. This way, if we make a mistake that breaks the whole thing, we can always revert to a previous version. Amazing.
For Windows, I used Git for Windows. You can download it from here
This tool also comes with GitBASH. It is a terminal that allows us to give Git commands through typing.
Within GitBASH, we first navigate to the website folder by cd [directory URL]. By typing git init, we initalize an empty Git repository in the selected folder.
We can change our global username and e-mail within Git as well. These are the credentials we use to sign our changes.
git config --global user.name "Burak Turkoz": change username
git config --global user.email burak.turkoz@aalto.fi: change e-mail.
After initalizing empty Git repo and deciding our username, we can continue making changes in our HTML code. We can use git status to learn about which documents we have changed.
In order to add these changes we have made, we use git add. Going from Kris’ bookshelf analogy, we can imagine the folder as a room with books on the floor. We can make all the changes to the books we want when they are on the floow. When we use git add, we take the changed books in our hands. This is a temporary space.
In order to put the books in the bookshelf -which is our repository- we use git commit -m "our message here". By using the message, we put a label on the book and put it on the shelf.
Here are the collection of the commands we used during the process:
cd: Navigation to the desired folder.
ls: Lists the files inside the folder.
git init: Initialize empty Git repository.
git status: Learn about which documents were changed.
git diff: See more details on the changes we made.
git add: Apply the changes we made. This is only changes them in a “temporary space”.
git commit -m "message": Commit the changes we made, get them out of the temporary space. We can also add a message to label our change.
git log: See the history of changes with the labels and who did them.
We can go back and continue making changes to our files. We need to repeat the same process again to commit those changes.
In order to publish our website, we need an SSH key. We can generate this through GitBASH by ssh-keygen -t ed25519 -C "Key Name". Then the program asks where we want to save the key, we can enter the directory we want here. We can leave the passphrases blank for now.
If we receive the alert Your identification has been saved in 'directory URL', we have succesfully generated an SSH key. By typing ls we can see the key files have been created.
The command cat id_ed25519.pub gives us the SSH key for us to copy. “id_ed25519” here is only the name of the file we create for the key. This can be changed in the previous step while we are typing the directory URL. In this case, we need to write that changed version instead of “id_ed25519” in the cat command.
We copy the SSH key now, and continue to GitLab.
In order to transfer the repository over to GitLab, we need to create an account first.
Then, we have to copy the SSH key we just generated to our GitLab account. “Settings > SSH Keys” takes us to the page where we add our keys. We give the key a title, no expiration date and add key.
After copying the public key to GitLab, we need to remove it from the local repository which we are going to push. If we leave it there, it may create a potential danger to our website. We can do it with the command rm -id_ed25519.pub and rm -id_ed25519, where “id_ed25519” is the name of the key.
Going back to GitLab, we now have to create a blank project. Name it, and set it to public view. When it is created, GitLab gives you instructions on how to populate the repository.
Since we already initated Git in our local repository, we only need to push it. So we go back to GitBASH to type some commands. It is a good idea to check git status before pushing, to see if there are any uncommitted changes.
Then we just need to follow GitLab’s instructions. We first add an origin by git remote add origin [URL]. (The URL is provided by the GitLab repository).
We can use remote -v to see the names of the origins.
Then we use git push -u origin --all.
If this succeeds, you will know by the text “Branch set up to track remote branch from origin”. We can also check if it succeeded by refreshing the GitLab repo.
If this doesn’t succeed and it says “make sure you have access rights”, try to change to URL in the command remote add origin into the https one.
Now, we create a README.md file for our website. We can use the command touch README.md to create a new file.
“.md” means Markdown, which is a markup language used to format documents. Here is a markdown guide.
After creating the file we can edit it with Visual Studio Code. Here is an example README.md:
|
|
After creating this file, we follow the standart procedure: git status > git add > git commit -m "message" > git push
In order to publish the website, we go back to the GitLab interface. Click the plus icon at the top of the repo, and choose New File.
Write .gitlab-ci.yml as the file name. Apply template for HTML. We can write a commit message and commit changes.
To check if our website is running, we can check the pipeline icon that should appear on the top of the repository.
The link to our website can be found under Pages.
In order to streamline the process of making new HTML pages and copying the necessary code between them, we can use Hugo. It is a static website generator that allows us to automate many parts of maintaining a website.
To install Hugo for Windows, go here. For windows, amd64.zip is the file that I downloaded.
After unzipping, you will find a file called “hugo”. Create a new folder somewhere and put it inside.
Locate to this folder within GitBASH. You can type ls to see that hugo is in fact in the folder. You can also type ./hugo version to see which version you are running.
However, for GitBASH to find and use Hugo it needs to be located in a specific folder. To know where this folder is, we can type which mv.
After learning about this folder, we need to move hugo here by mv hugo /folderURL on Windows.
Now, we can go to any directory in our system by cd and run hugo. Try going into different folder and running hugo version.
After making sure hugo works, we locate to the folder where we want our website to be in. Type hugo new site to start creating the hugo site.
Now if we type ls, we can see which new files hugo has created after it started the site. We don’t need every one of them so we can start removing some.
rm -rf archetypes assets data public themes
After this, we can open the file in Visual Studio Code. Inside “config.toml”, we should change the baseURL with the URL of our existing website.
In here we can also change the title of our website.
We can start populating our website by creating our first HTML file. Create “index.html” under the “layouts” folder. For now, we structured this page like a standart HTML page, like the ones we did before.
To view it locally, type hugo serve in GitBASH. You can access the website by copying the link GitBASH
We can write the content inside the HTML file like we did before. But, there is an easier way with Hugo.
In the content directory, create a new .md file. Name it “_index.md”. This is where the homepage draws content from.
Here is the markdown file for my homepage:
|
|
But this page will not appear until we refer to it in the index.html. The syntax for referencing variables is like this:
{{ .Variablename }}
Below is an example on how to use them in the index.html file. {{ .Site.Title }} is the title variable we established in the previous step. {{ .Content }} refers to the “_index.md” file under the content folder.
|
|
Now we move to making more pages. To add an “About” page for example, we create a folder titled “about” under “content”. Within this folder, we create a markdown file titled “index.md”. There is no “_” is time.
The structure is the same as the previous markdown file we created:
|
|
For this page to work howevever, we need another html file. The HTML file for the homepage (index.html) was under “layouts”. For the single pages, we need to create another one.
Create a folder titled “_default” under “layouts”. Inside this folder, create an HTML file named “single.html”. This will be the HTML file for all of our single pages. We can copy the contents of “index.html” exactly as they are and paste them to “single.html”. Now, if we add /about to the end of the URL, we can go to the about page.
But for normal navigation we need to add a navigation bar. We can add this to the <body></body> section of both “_index.html” and “single.html”. Here is what it looks like:
|
|
In Hugo, we can streamline this process of writing endless HTML code by using partials. They are tools that allow us to write an HTML code one time, and then reference that with a single line of code.
To add partials, we create a folder called “partials” under “layouts”.
We can start by making a navigation partial. We create a file named “nav.html” under “partials”. We then copy the navigation code to this file.
In order to refer to this nav in other HTML files, it is enough to write:
{{ partial "nav.html" . }}
We can repeat the same process for the other components of the website as well:
Head
1 2 3 4 5 6 7 8 9 10 11 12 13 14<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{{ .Title }} : {{ .Site.Title }}</title> <style> img { width: 50% } </style> </head> <body>Foot
1 2</body> </html>Footer
1 2 3<footer> <p>©{{ .Site.Copyright }}</p> </footer>
These partials are referenced as follows in the index.html:
|
|
By repeating all these processes as needed, we can populate our website:
Markdown files inside new folders for new pages. Partials for creating new code blocks to reference elsewhere.
Here is what the final file tree looks like:
To add media, we put the media file inside the folder which has the markdown file containing the content of the page.
Then, we follow the image and video adding convention outlined here and here
After logging into GitLab, we need to clone our existing repository. In the GitLab repository, copy the link under “Clone”.
In GitBASH, locate the folder you want to clone the repository to. Type git clone [clone link]. The repository will be cloned to the desired folder.
Now, we can delete all the folders inside except readme.md
Then we go back to the Hugo folder and copy it’s contents to the clone folder. What we need to copy is “content”, “layouts”, “static” and “config.toml”.
If we type git status now, we can see a lot of files had been changed. The command git add . allows us to add all the changes at once. Then we git commit the changes. Finally, we git push.
When we refresh the GitLab page we can see that the new files are now in the repository.
After git push, we still need to do stuff. Like modifying the ci.yml file. Now it is configured for HTML. We need to change it to Hugo.
In GitLab to “New File”, name it .gitlab-ci.yml and apply the template “Hugo”. We won’t need this file, since we already have a ci.yml file. We only need the text it generates. Copy it.
In the local websiten directory, open “.gitlab-ci.yml” in VSCode. We can see that it is still configured to generate a static HTML page. We will delete all of it and paste the new Hugo code.
After saving the changes, we can go through the usual git status git add git commit git push.
We can now go back to GitLab and see that it has created the pipeline succesfully.
Then BAM, website is online.
Imagemagick is a tool that allows us to optimize media before uploading to our website. I downloaded it from here.
After downloading and installing, we need to make it functional by typing a few commands.
At this point, the usual “which magick” command did not work for me. Here is what we need to do to fix this:
Find where you installed imagemagick (e.g. C:/Program Files/…./).
In GitBASH, locate to this directory with cd.
Type “nano .bashrc”. This will create a new file and open it.
“.bashrc is a configuration file for shell and we create it to instruct the shell to do something for us when we open GitBASH."(Kris, 01.02.23)
You will see a text editor interface. Enter the following code:
export PATH="$PATH:/C/Program Files/…../
Press ctrl+x.
Nano is going to ask to confirm, type y and hit enter.
Restart GitBASH.
Now, typing “which magick” will show us the location of it.
Now that imagemagick is functional, we can start using it. We can type magick -h to see the list of commands.
We can do a number of things, like converting, resizing, identifying etc.
magick identify demoimage.jpg
magick convert demoimage.jpg -resize 800x500 smallimage.jpg
magick convert demoimage.jpg -resize 800x500 -quality 50 smallimage2.jpgwhere quality is in percentages.
In order to put the screenshots I took to the website, I had to resize and convert them in bulk.
To do this, I used imagemagick mogrify tool.
First, we need to copy the folder the images are in, and rename it. Since the mogrify tool works on the original images and changes them, we wouldn’t want to lose those changes.
Then I executed the following command to optimize and convert all of the images in the folder in bulk.
magick mogrify -quality 60 -format jpg *.png
If you want to optimize a single file, you can do so like this:
magick convert sketch.jpg -resize 50% -quality 70 sketchnewname.jpgor if you want to convert it to another format as well:
magick convert img5.png -resize 50% -quality 60 img.jpg
For me, after some experimentation, I decided to use “quality 60”, jpg format and no resizing, on screenshots.
And for pictures taken with phone camera:
magick convert test.jpg -resize 40% -quality 40% test8.jpg
For compressing videos, I used FFMPEG. Here is the code I used for videos shot on my phone:
ffmpeg -i v1.mp4 -c:v libx264 -preset slow -crf 40 -an -vf scale=720:-2 output.mp4
Here, -an means that there is no audio.
To control the size and other attributes of individual images, we can use shortcodes. Create a folder called “shortcodes” under “layouts”. In here, create “image.html”.
The following shortcode allows us to control size for example:
<img style="width:{{ .Getsize}};height:auto;" src="{{ .Getsrc}}" alt="{{ .Getalt}}">Pay attention to the backticks!! (``)
Then, in anywhere in the website we can use the following shortcode to add images:
{ {<image src="imagename.jpg" alt="2d sketch" size="25%" >} }(but with no space between {{ ) (I couldn’t do this because it was being interpreted as real code.)
Here is the video shortcode used:
|
|
And here is what we write in the markdown doc to add a video:
|
|
In order to add CSS, we first create a folder on the main local directory called “static”. Then we create “static/assets/css” and under that, the file “style.css”.
For an example CSS content, we will use:
1 2 3body{ background: yellowgreen }
To refer to this file, we should edit the “head” partial. We add the following line:
<link rel="stylesheet" href="{{ .Site.BaseURL }}assets/css/style.css">
Now, the website will start applying the changes we make to the CSS.
Click here to view the student agreement for Fab Academy 2024