Git Website Tutorial - Templates!
Written by: Antonius Torode - 1/9/2021
Creating A Website From A Template
Before beginning: Make sure you get up and stretch every now and then. It's not good to sit all day long as so many of us do now a day. Perhaps do a hundred jumping jacks before and after beginning this article! I would also recommend some non-distracting music to play in the background while reading. One of my favorites for things like this can be found at this link: super cool synthwave music (the music changes for each article!).
Sometimes you can find a really nice template that you like and start with that as a base for your new website. Other times you can find nice elements of a template or website and want to recreate them. This article will cover how to find and set up a template for use with your website.
Finding the right template
The first step is to find a template that you want to use. There are some templates that are only available after purchasing all of the code and elements, but there are also many free templates. When I first started making websites in high school, free templates were everywhere and easy to find. Now, a quick google search shows that the majority of templates or template sites are hidden or placed behind paywalls. I will discuss and list a few places that I think are good to look for free templates.
These are just three examples of websites where you can find some nice templates to use for your website creation. Once you find one or a few templates you like, go ahead and download the code for them. With these free templates, you can always download multiple and combine the elements into a new creation.
Adding a template to your website
Once you download the elements for your website, you simple have to place them in your git repository and push them to the server using the methods outlined in the previous article. Depending on the format of the template (whether it's simple an HTML page, a collection of files, or a compressed collection of files), you may need to uncompress your files before placing them into your repository. Occasionally the templates come in plain HTML code. In these cases, you would need to paste it into a text file and save it as a ".html" (or whatever the file type is) file. It's as simple as that to add a template!
Modifying a template for your use
On a basic level, modifying a template to be your own is as simple as opening the files and replacing the text with what you want it to be. You can use any preferred programs to open and edit the files. My preferences are CLion or Notepad++. You can replace all the images with images you want, and then your website will have your own content!
On a more advanced note, modifying the template to be different than it appears other than the simple context requires modifying either the HTML or CSS code that goes along with it. This can take time and requires knowledge of both HTML and CSS, which will be covered in later articles.
Congratulations, that's all it takes to add a template to your github.io website!