Please see 01. Concept Page
I began the process of developing my website by installing Git, GitHub, and Atom. Atom is a free open-source text and code editor developed by GitHub. I chose it because a number of "newbie" users and experienced coders alike give it positive reviews and with dozens of packages, it is extremely customizable. I especially liked that I would be able to easily view real-time changes to my page. I planned to write my html code directly into Atom and then push my new pages to GitLab.
I read through some basic tutorials on GitHub and GitLab including the following:
Once I had a better understanding of Git, I went back to Fiore's lecture and was able to understand much more of it. Even though we are using GitLab instead of GitHub, the two repository managers are so similar that I did also find the GitHub Help page useful for answering specific questions like: "How do I generate a new SSH key and add it to the ssh-agent?", "How do I revert to a previous version of my repository?" and "How do I rename a file using the command line?" At the outset I referred to this git cheat sheet often for commands.
With the help of fellow studio participants and JM I initialized my identity, saved my public key to my page, and experimented with different commands both on my terminal and on GitLab.
I've used website builders like Wix and Wordpress in the past, but never coded a website so this is a first! I was interested in starting with something aesthetically pleasing but which also gave me support to build upon and found a Bootstrap template. I downloaded the .zip file from StartBootrap, unzipped it on my computer's git repo, added and committed the add, and then pushed these files to the GitLab remote repo. I was able to make a few changes but ultimately, I found this to be a bit too challenging to work from and opted instead to use Massimo Menichinelli's Fab Academy Template.
Once I decided on a template, it was time to learn some HTML- w3schools.com as recommended in the Fab Academy tutorial and code.org based on my previous experiences teaching from it, were my starting points.
Some basic code to building my website:
Formatting for starting versus ending code:
<body> </body>
Adding an image
<img alt="title to appear if image doesn't appear" src="image file name">
Adding a file or link
Adding a file or a link are both quite similar.
<a href="full link">text for link</a><a href="file pathway">text for file</a>
Formatting text
As I work in Atom, I periodically save code. All of these files and more exist on my desktop in the folder emily-stgermain. When I am ready to push content I open my terminal and move to the folder emily-stgermain. Good practices dictates you first pull the conent currently on your repository in case anyone else has made changes with the command "git pull". Then I type the following commands:
git add . (directs git to add all my new updates)
git commit -m "(identifying message here)" (commits my changes with commentary telling me what they are)
git push (pushes all of my updates to the remote GitLab repository)
Every time I do a git pull or git push I am prompted to provide my self-genereated passkey for security.
I encountered some challenges along the way with perhaps the biggest being some code I typed in the terminal as I was trying to push web updates onto GitLab in the first few weeks. An error kept appearing indicating that I was linked to a file in the trash, and without fully understanding the consequences I typed "git clean -fd"! I lost an entire day while my computer uploaded backup files. Even prior to this SNAFU I was able to see the beauty of the gitlab issue system. I was unable to push content to the website and assumed the error was on my end. Fiore and Jean Michel stepped in and came to find that the entry of my name with extra hyphens was causing the problem. I'm coming to learn that GitLub has incredible capabilities for collaboration, and this is just one contributing element.
Space on our remote repositories is finite. In order to make efficient use of the space allotted to me it was essential to compress files. At the outset I used Gimp to resize photograph and screenshot images per the instructions in the tutorial. However, since the bulk of my images were taken on my phone, I found another method that was quicker. Once my images were in the Apple "Photos" application I clicked on multiple images I wanted to use for an exercise and exported them to another file. When the export menu popped up, I was able to specify size and could reduce their size this way. For especially large images or screenshots, I opened them in bulk in "Preview" and in the "Tools" menu went into "Adjust Size" where I was able to change the image size and resolution. As I became more adept at using Atom, once in Preview before exporting images I made sure that the file names were all lower case, without spaces, and .jpg files.
Design and scan files can be quite large. When unable to put these on the cloud, I compressed them and linked my webpage to the compressed files. Videos also need special care. I used iMovie to upload video clips to Youtube. From Youtube I was able to get the video links and embedding codes to add to my website.
After letting myself fall far behind on documenting, I decided I needed to come up with a way to get up to snuff quickly. Neil had mentioned markdown as a quick lightweight text editor and I saw that it was used to create much of the Fab Academy pages. This seemed like a good bet. I downloaded the Markdown Editor and Markdown Preview packages in Atom and got to work. Although markdown is much more barebones than HTML, I still needed to learn new some new syntax. These two cheat sheets helped me keep track of the basics.
At first I was surprised to see that my Markdown pages didn't magically appear as my HTML ones did once I pushed them. Once I understood that I had to convert these files to HTML first, I had much better luck viewing my updates. In order to convert the files to HTML I had to save the Markdown preview in Atom as a .html file. Then I added the beginning code from my previously created HTML pages to the top:
<!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"><meta name="description" content=""><meta name="author" content="Name Surname"><link rel="icon" href="../media/favicon.ico"><title>Fab Academy 2018 - Emily St. Germain</title><!-- Bootstrap core CSS --><link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet"><!-- Custom styles for this template --><link href="../media/fabacademy.css" rel="stylesheet"><!-- 3D files viewer --><script type="text/javascript" src="../media/jsc3d_ie.min.js"></script><script type="text/javascript" src="../media/jsc3d.min.js"></script><script type="text/javascript" src="../media/jsc3d.webgl.js"></script><script type="text/javascript" src="../media/jsc3d.touch.js"></script><!-- Just for debugging purposes. Don't actually copy these 2 lines! --><!--[if lt IE 9]><script src="bootstrap/js/ie8-responsive-file-warning.js"></script><![endif]--><script src="../bootstrap/js/ie-emulation-modes-warning.js"></script><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><!-- Load the menu file --><script>function menu() {$('#exercises').load("exercises-menu.html");$('#project').load("project-menu.html");$('#cclicense').load("license.html");}</script></head><body onload="menu()"><!-- Static navbar --><nav class="navbar navbar-default navbar-static-top"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="../index.html">Emily St. Germain</a></div><div id="navbar" class="navbar-collapse collapse"><ul class="nav navbar-nav"><li><a href="../about.html">About</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Exercises <span class="caret"></span></a><ul id="exercises" class="dropdown-menu" role="menu"></ul></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Final Project <span class="caret"></span></a><ul id="project" class="dropdown-menu" role="menu"></ul></li><li><a href="../contact.html">Contact</a></li></ul></div><!--/.nav-collapse --></div></nav><div class="container"><!-- Insert your content here below! -->
and the ending code to the bottom:
<!-- Do not touch this! --><!-- Bootstrap core JavaScript================================================== --><!-- Placed at the end of the document so the pages load faster --><script src="../media/jquery-1.9.1.min.js"></script><!-- Syntax Highlighter --><script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script><!-- From https://github.com/jmblog/color-themes-for-google-code-prettify --><link href="../media/github.css" type="text/css" rel="stylesheet"><script type="text/javascript">!(window.jQuery)</script><script src="../bootstrap/js/bootstrap.min.js"></script><!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
Even after converting my .md files to .html files, I discovered I still had to do some tweaking to the code. The pathways for embedded images and videos reverted to a full pathways rather than abbreviated ones (ex: Users/emily/Desktop/emily-stgermain/5_3dprint/images/presentation.png instead of ./images/presentation.png). Likely because of the complexity of these pathways, I could no longer see images until I changed them one by one back to what I'd written in the .md file.
Other things like spacing, image sizing, and links to other pages or parts of pages were easier to edit in my HTML files than Markdown. Conveniently, I did find that I can also insert HTML code into Markdown. Although this isn't always sucessful, I did use it to embed my youtube videos on my website using the HTML code provided on the youtube developer site, for example:
<iframe width="560" height="315" src="https://www.youtube.com/embed/p2REYAatjTs" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
This code tells you how big the video should appear on your page, the link, and allows the user to expand it to full screen when clicked on.
As I continue to update my website it will make more sense to work from my new HTML files rather than the Markdown files.