Web and git set up
This week is dedicated to create our website that we will have to update weekly with the progress and
results from our assignments.
As our website is going to be hosted through GITLAB first I need to activate is my account, understand how gitlab works and start working with my repository.
So, let's do one thing at the time.
Access to GitLab
Activating my account
You should receive an email from the central coordination with the steps to activate your gitlab account, these are the steps to follow up (quite straight forward):
_1 Go to GitLab FabCloud
_2 You have to use the same email that you used when you registered to the FabAcademy, use that one.
_3 To access use the temporary password that is the same as your student ID, after these steps you should change it.
_4 Remeber once you have access to GitLab (your new best friend), set the notifications to GLOBAL
Work through a git tutorial
Intro to prompt commands
Once you have your account set up you have to install in your computer GitBash (if you
are a Windows user like myself). Gitbash is like using Terminal, and what exactly is
Terminal is an interface in which you can type and execute text based commands. And Git Bash works similarly but to run specifically Git commands.
Commands we will use to control, update and check the status of our repository.
This is Gitbash prompt window (if you've never used it before, it looks something like this, similarly to terminal on Windows):
Once you have installed GitBash you have to set up the configuration that you will only do once (for this repository).
_1 Configuration of user name (same as the one provided by GITLAB Academany)
_2 Configuration of your email (same as the one registered in GITLAB)
_3 Just as a checkup run: git config --list, this is jus to check your current settings.
_4 As it is the first time I do this, I should generate something calle SSH KEY, you could have several, one for each repo for instance.
Run command:ssh-keygen -t rsa -C your.email
_5 If you need to retreieve the SSH Key generated run the command: cat ~/.ssh/id_rsa.pub (this is a public key).
_6 You need to copy the key you generated and then open your gitlab account and copy it inside User settings -> SSH KEYS.
After this set up you are ready to clone your repository and start adding information to it from your computer.
But wait... what means a repository or repo?
A repository can be a place where multiple databases or files are located for
distribution over a network, or a repository can be a location that is directly accessible to the user
without having to travel across a network. Also see data warehouse and data mining.
It is basically a virtual warehouse where you store folders with information.
In our case we are going to clone this repository and copied inside our computer, this way this specific folder every time we add or remove information, through GitBash we will control the update of the repository that is online. Pretty cool right?!
So now the next step is to clone the existing repository. I choose to clone it inside my Desktop to have a quick access.
Inside GitBash navigate inside the folder where you want to clone your repo (use "cd" to change directory). And then run the following command:
This will clone your repo to your computer. Now you can start working and update/upload new files.
This is the address to my repository in GitLab:
The following commands will be handy for you along the course:
git add index.html (upload file by file)
git add (upload all the files in one instance)
git pull origin master (downloading the last copy from your repo)
git add -A (means copy all the files from your local server)
git merge (have a working copy)
git commit -m "write the reason"
git push (to commit the changes and upload to your repository)
git rm (remove a file)
git mv (move or rename)
git status (check what has changed)
dir (view the contents of a directory)
ls (view the files as a list)
cd (to change directory)
mkdir (create a new directory)
del (delete files)
*Capital letters matter, use lowcase
If you are still confused how Git works, check out some tutorials, there are many resources online to
understand how it works and how to run it.
This has a useful documentation step by step: https://git-scm.com/
And I also found this website that has some useful resources digital citizen
So, I decided to make my life a bit more complicated than it already is. I am not familiar with HTML and CSS, nevertheless I decided to create my website from scratch using HTML and CSS.
1_BRAINSTORMING WEBSITE LAYOUT
Before you start coding, check out some inspirations out there for the website layout. What I did as well was to check out websites from previous years students from the FabAcademy, this helped me a lot to understand how to layout the content and visualize the way I wanted to document my work.
You can navigate through previous years students through the random generator FabAcademy.org has. Check it out here (maybe you will find my website and hopefully it will help you as well as other student's documentation has helped me this months.)
These are some of the websites from students from previous years that I found interesting. Some of them I like the layout, others the way they present their ideas, the way they organize the content, others the graphics, others the content and documentation information, and others their final projects ideas. There are many more that are really cool.
_Dorota Orlof really nice site, she used
HUGO template and personalized it
_Miriam Choithis is my favorite website from our current year 2019, I love the graphics, the icons and the layout.
_Abdullah Y. Ibrahim built from scratch, clean, organized and nice
_Javier Albo simple website but clear for navigation
_Claus Nicolaisen interesting way he uses gifs to explain his work
_Bertgthora Olof interesting final project
_Juan Felipe Fiallo nice idea for final project
_Zenna Fiscella well documented information
As I stated before I have no experience in web development, I just know the meaning of a few syntax, but aside from that I never did a website from scratch.
The reason why I decided to build my website from scratch is because I wanted to make something simple and learn, although through the months of this course I realized simple is not the word.
First thing you will need is a text editor to write down the code (skeleton) of your website. I am using
BRACKETS, which is an open source code
There are a number of other open source code editors, such as ATOM (which I sometimes use), also Sublime, and more. You can choose the one you prefer the most.
3_TAKE SOME TUTORIALS
Once I had my code editor installed and I navigated into other students websites to have an idea of how
to layout the information, I started taking tutorials online about HTML and CSS.
These are some of the most useful websites I used to develop this website, all from scratch following a lot of tutorials. In fact, since the first month I started my web up until now, I have changed my code a lot to improve my site (hopefully).
Here are some of the useful online and free resources I have been using:
_2 CSS TRICKS Another nice website full of free resources and tutorials.
_3 STACKOVERFLOW Someone already had that problem you are having (probably), in this forum you can find lots of useful (and sometimes not so much) answers to your questions.
_4 STACKOVERFLOW Someone already had that problem you are having (probably), in this forum you can find lots of useful (and sometimes not so much) answers to your questions.
_5 cool icons Nice resource of icons.
When building a website is very important that you have order and organize the folders that contain your images. In my case as I cloned my repo on my desktop, under that same folder I will start adding my photos and update them.
I did folders subdivisions for each week. When writting the code you will have to refer your images links to where you locally have them, therefore is super important to be organized from the beginning.
Is useful to have a unique folder for each week.
4_BUILDING THE SKELETON
As mentioned earlier, I will use HTML and CSS, you could have a website that is entirely coded on HTML without CSS, but the advantage of having CSS is that you can create global variables that you don't need to repeat on each new .html file, that is why is useful to integrate CSS at least on you code.
Inside brakets there is this bolt icon if you click on it you will be able to preview your code, something you will have to do while coding.
Basically the HTML body consists of the following syntax:
You need a head where you will add all the information that relates to the CSS stylesheets, then you have
a body where you write down all the content of the code.
All the syntax you use for HTML coding has to be inside those brackets, and most of the syntax has to be closed, you open a syntax, write your code, and then you close it.
EXTRA INFO -WEB TEMPLATES-
I just wanted to add that there are other ways to build websites, you can use html templates that are available online, you can use Bootstrap templates as well, in fact I first decided to use a Bootstrap template, but then I realized it was more confusing for me as I didn't understand half or more from the code, this is why I abandoned the idea of using Bootstrap. Other ways to create a website is using another language called MkDocs, let's say it is a simplfied version of html language.
COMMIT CHANGES AND PUSH TO YOUR REPO
Once you start building your site you will have to push the changes to your repository to upload them and refresh your site.
Every time you are about to push changes, you have to open GitBash and run the following commands on the same order:
First thing make sure your local copy is up to date with the online repository:
git pull origin master
Then run the following:
git add -A
git commit -m "something explain what you commit"
git push (this will commit the changes and upload to your repository)
Error I had and how I solved it
Once I did the code of this website I commited the changes and pushed to my repo the new files, but... error! when I was trying to load my website it showed this error message:
To solve it, you have to check your .gitlab-ci.ymlfile, which needs to have certain information to
be able to connect your url to your git.
What you need to do is go to your GitLab repo find the file .gitlab-ci.yml delete it, then create a new one following the steps below:
The code of my website will be changing and I will be updating it now and then.