-
Ahmad Fares authoredAhmad Fares authored
linux.html 10.22 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="generator" content="pandoc" />
<title></title>
<style type="text/css">code{white-space: pre;}</style>
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body>
<h1 id="linux">Linux</h1>
<h2 id="introduction">Introduction</h2>
<p>The second day was a change for us, we have been surprised that we will use Linux for the course. I have tried Linux before, but for a few days only and then returned back to windows. I had three options, the first one is to install it using a virtual machine, the second option is to run Linux live from a USB flash drive and the last option is to download it as the second operating system beside my windows.</p>
<h4 id="installing-ubuntu">Installing Ubuntu</h4>
<p>I have tried the first option, but I have not got that feeling of using Linux. I have not thought about the second option since that any work will be lost after shutting down the computer so I have downloaded it as my second operating system. After the first boot I got a boot problem, I could not boot into windows. The error was "can not find fwsetup", but I have repaired it using boot-repair in Linux terminal.</p>
<h4 id="basic-commands">Basic commands</h4>
<p>During this day, I have learned few Linux commands like <code>cd</code> to change directory, <code>mkdir</code> to make a directoy, <code>touch</code> to make a file, <code>nano</code> to edit the file. I have also learned how to download a software using the command <code>sudo apt install softwarename</code>, and have downloaded atom.</p>
<p>Another useful commands are <code>head filename</code> to show the first 10 lines of the file content, <code>tail filename</code> to show the last 10 lines, <code>grep -rin "text"</code> to look for a text and <code>man command</code> to see the manual of a specific command.</p>
<h2 id="markdown-to-html">markdown to html</h2>
<p>Writing the documentation using <strong>nano</strong> and <strong>atom</strong> is easier and faster than <strong>html</strong>. html has a lot of tags to remember whereas markdown allowed me to focus more on the content rather than the code, but web pages don't support markdown format so I had to learn how to convert <code>.md</code> to <code>.html</code> which is very easy to do using <code>pandoc</code> command in the terminal.</p>
<p>In the terminal, I have wrote those two command <code>sudo apt-get install haskell-platform</code> then <code>sudo apt-get install pandoc</code>. Fortunatly, I have not countered any issues.</p>
<p><strong>pandoc</strong> is not a GUI program, instead it can be used in the terminal using the command which converts the markdown file to html file <code>pandoc -s -t html filename.md -o newfilename.html</code></p>
<h4 id="css">CSS</h4>
<p>HTML does not includes tags for the web page format. markdown solved the problem of html tags for writing the content, but it can not be used to format the web page so I have used CSS to make the documentation looks more organized.</p>
<p>It is easy to include CSS in the html file, first thing I did is creating the styles.css file using <code>touch styles.css</code> in the terminal then I have copied the CSS code from <a href="http://git.fabcloud.io/francisco/beach-lab-htgaa-2015/raw/master/students/sanchez.francisco/base.css">this link</a> to the styles.css using atom. The file is now ready, to include it in the html file, pandoc comman is changed to <code>pandoc -s -t html -c styles.css filename.md -o newfilename.html</code>.</p>
<p>The name <strong>styles.css</strong> it's self can be set to any other names, but the <strong>.css</strong> is a must.</p>
<p><strong>Document CSS file / website </strong> http://markdowncss.github.io/modest/</p>
<h2 id="git-repository">Git repository</h2>
<p>I have heard about github, but never used it or read about how does it works. Prefab academy has introduced the concept of repository to me, and allowed me to learn the technology behind git.</p>
<h4 id="signing-up">signing up</h4>
<p>First I did to start a git repository is sign up at <a href="http://fablabs.io">fablabs.io</a> then I have logged in using my FabLab account at <a href="https://gitlab.fabcloud.org/">gitlab.fabcloud.org</a>. My instructor Mr.Fran has already created a project for the prefab course so he added me as a developer to the project. This repository allows me to upload my updates and contribution to the course website and to download my classmates updates.</p>
<h4 id="setting-up-my-computer">setting up my computer</h4>
<p>After signing up and being added to the course repository, I have cloned the repository address using <strong>https</strong> method by the command <code>git clone address</code>, the address can be found in <a href="https://gitlab.fabcloud.org/">gitlab.fabcloud</a> then I have configure my computer using the following commands:</p>
<p><code>cd ~/folder_name # replace this with your repository folder</code></p>
<p><code>git config --global user.name "yourname" #set name for commits</code></p>
<p><code>git config --global user.email "youremail" #set email for commits</code></p>
<h4 id="uploading-and-downloading">Uploading and Downloading</h4>
<p>now that I have downloaded the repository folder and configured my computer, it is time to start adding and updating my section in the course website. To do it there are three steps. First one is to staging which is done using the command <code>git add --all</code>, then the next step is commit by the command <code>git commit -m "message"</code> and the last step is to push which is the step of uploading the files into the internet using the command <code>git push</code>. Since I have cloned using the https method, the push process requires my FabLab username and password. The password for the FabLab account can't be used, instead I have set up a new password as the gitlabs.fabcloud asked me to do the first time I have logged in.</p>
<p>The first time I have pushed, I got an error which states that I am not able to upload to protected content, the problem was solved by the admin Mr.Fran by changing my account from developer to master.</p>
<p>To download update the command <code>git pull</code> is used. It is important to pull before any push. <code>git status</code> is a very useful command. It is used to get the current status whether it is staging, commit or none of them.</p>
<h4 id="push-using-ssh">push using SSH</h4>
<p>I found it unpractical to keep writing my username and password each time I want to push, so I have changed my push method to <strong>SSH</strong>. To do it, first thing I did is creating a hidden file in the home directory by the command <code>touch .ssh</code> then I have opened the file by the command <code>cd .ssh</code>. Now that my file is ready, I have generated the ssh key by the command <code>ssh-keygen -t rsa</code>, when it asks for the file, I have gave it the name prefab as shown in the image below</p>
<div class="figure">
<img src="images/1.jpg" />
</div>
<p>Then I have pressed Enter two time to not set up a password for the keys. Finally I got my key in two files, one contains the public key and the other contains the private key. I have opened the file prefab.pub and copied the public key and paste it in the ssh set up page in the gitlabs.fabclouds and filled up the empty fields. Never share the private key, if the private key is compromised delete the the public key and generate a new key pair.</p>
<p>Last step I did is to change the push method to ssh . I have changed the directory and opened the git repository by the command <code>cd "directory"</code>. Next thing I did, then I have changed the push method by the following command <code>git remote set-url origin "SSH Address"</code>, SSH Address can be found in the gitlabs.fabcloud website. the ssh key by the following commands.</p>
<h4 id="more-git-commands">More git commands</h4>
<p>push can not be revised, once the files are uploaded to the repository any one can pull and download them, but the add and commit steps can be revised. add step can be revised by the command <code>git reset</code> and the commit step can be revised by the command <code>git --soft HEAD~</code>.</p>
<p>Another git commands:</p>
<ul>
<li><code>git remote -v</code> used to know push method</li>
<li><code>ssh-add -l</code> used to list ssh identities.</li>
<li><code>git log</code> history of the repository</li>
<li><code>git init</code> Make file a repository</li>
<li><code>git --version</code> Check git version</li>
<li><code>touvh .gitignore</code> set up files to be ignored</li>
</ul>
<h4 id="constraints">Constraints</h4>
<h2 id="automating-the-commands">Automating the commands</h2>
<p>It is unpractical to convert each markdown file to html in a separate command and then make the add, commit and push commands again and agian, so I have automated the whole process by just one command. First thing I did was creating a <strong>.sh</strong> file called auto using the command <code>touch auto.ssh</code>, then I have opened the file using atom and wrote all the commands I need as shown in the following image</p>
<div class="figure">
<img src="images/auto.jpg" />
</div>
<p>To run the file, I have just to type <code>sh auto.sh "message"</code>.</p>
<h2 id="manipulate-images">Manipulate images</h2>
<p>All the images have a big size and high resolution, this is a problem when it comes to the documentation because the image should be less than 100KB in size so I have to edit the images before uploading them. To solve I have downloaded a tool called graphicsmagick using the following commands: <code>sudo add-apt-repository ppa:rwky/graphicsmagick</code><br /><code>sudo apt-get update</code><br />
<code>sudo apt-get install graphicsmagick</code></p>
<p>graphicsmagick can be used in the terminal, I have used this tool to put 3 images beside each other in one imge. This allowed me to resize the images and get the resolution I need. The following command can be used <code>gm convert +append -geometry x400 imagename.format newimagename.format</code></p>
</body>
</html>