Git Website Tutorial - Introduction

Written by: Antonius Torode - 1/9/2021

Introduction And General Information

Before beginning: Make sure you don't get too much screen time before bed. It's much easier to stay productive and focused if you are well rested and it has been shown that it's easier to get a restful night of sleep without a lot of screen time the night before! I would also recommend some non-distracting music to play in the background. One of my favorites for things like this can be found at this link: super cool relaxing music (the music changes for each article!).

The purpose of this website

The purpose of this website is to go through the step by step process of creating a website while utilizing the free hosting service of Github (A github.io static web page). It will discuss the various steps to setting up and modifying web pages using git to control your workflow. This website and the articles here will continually evolve in format, look and feel as more articles come out. At the start, they may seem very basic, but that is only because I have limited time to dedicate to writing them, let alone making them fancy.

This introduction page will occasionally be updated to contain relevant acronyms and definitions used throughout the articles.

Acronyms and definitions

HTML (Hyper Text Markup Language) is a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages. This is the main language that websites are written in and tells a web browser what to display.
CSS (Cascading Style Sheets) is a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work by controlling the layout of multiple web pages simultaneously.
Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. This is used to manage edits for your webpage and supply version controlling for all your files. Git is an industry standard version control system and experience with it looks great on a resume!
Github is used by millions of developers and companies to build, ship, and maintain their software. It is the largest and most advanced development platform in the world. This is used to store all of our project files and host our github.io page for free!

Useful programs

Here's a list and brief discussion of some programs I find useful when developing websites and graphics for websites.

Notepad++ - FREE - https://notepad-plus-plus.org/
This program is essentially notepad on windows except with a vast amount of added functionality. It supports code completion and other features that make editing files much simpler. This is something I install on every windows machine that I have because it is a great improvement on the normal notepad and great for editing any files that can be viewed as basic text.

CLion - FREE - https://www.jetbrains.com/clion/
CLion is a cross-platform IDE for C and C++. It also has support for Python, Javascript, CSS, and HTML files (all of which are used by website designers). This program is free for all open source projects (which a github.io website generally is) and provides easy integration with git.

Adobe Photoshop - PAID - https://www.adobe.com/products/photoshop.html
Adobe Photoshop is one of the most well known among photo and graphic editing software. The biggest downfall is that it is not free. They do offer a free trial. If you have access to this program, it provides many easy to use features for graphic and photo manipulation that can greatly enhance your website. A free alternative can be seen below!

GIMP (GNU Image Manipulation Program) - FREE - https://www.gimp.org/
GIMP is a cross-platform image editor available for GNU/Linux, OS X, Windows and more operating systems. It is free software, you can change its source code and distribute your changes. It is a great free alternative to Adobe Photoshop and allows for graphic editing that can greatly enhance your websites look and feel!

These are just a few of many programs that can aid in the process of website creation. I have used all the programs above and have found them very useful and reliable.