History: Getting Started

We will install the tools needed for creating, deploying (uploading) and managing websites. We will get everything ready so we don't have to worry about any of this in the next chapters.

Tools and Setup

These are some of the common tools used for developing modern websites. They will be used to create a static (simple) website in the first chapters.

Create a Pro­ject

Just create a folder somewhere that will act as your project base. In­side this fold­er we'll write two files cal­led index.html and style.css. HTML is a struc­ture and con­tent lan­guage. All of the text, links, tit­les, etc are writt­en in html. On the other hand, CSS is a style lan­guage. It sets the col­ors, shapes and some HTML in­terac­tion.

In­stall Atom

First you'll need to in­stall a de­cent the text editor such as Atom. Even though you can use notepad or tex­tedit, a specialized software will give you many more ad­vantages.

http://atom.io/

Once they are created, we add the fold­er to Atom as a new pro­ject. From Atom, File > Add pro­ject fold­er... and find the newly created fold­er. It should be on the left at this point.

Git and Git­hub

Git is a command line tool to handle code versions, collaborations and since recently to deploy websites. Github is the most used online platform for Git projects, and it also allows to publish websites.

First register on Git­hub. Then we'll install git:

sudo apt install git

Lastly we'll setup our computer so Github recognizes it. For that, we'll install our SSH key in Github following these steps. There are few ways of authenticating on Github, but this is the best one long-term speaking.

With Mac and Linux, check that we have a local ssh key:

cd ~/.ssh     # access our ssh folder
ls            # show the files in there

If we see a file called id_rsa.pub or any other file ending in .pub, copy the contents in the SSH section in Github. To show the key you can do from terminal:

cat id_rsa.pub

See the website

Once we have both files created, we can see the web we are mak­ing on our brows­er. Right now it should be empty, but open the file index.html with our pre­fer­red brows­er. Go to your File Manager and right click on the file > open with > Firefox/Chrome.

Now let's go back to Atom, writ­e something in­side index.html and save the file with Ctrl+S. Then go to your brows­er and re­fresh the web­site with F5 or Ctrl+R. You should see the new chan­ges.

This is the com­mon workflow for mak­ing web­sites:

1. Make changes in index.html or in style.css (ex­plained in later chapt­ers).

2. Save chan­ges with Ctrl+S

3. Switch to the browser with Ctrl+Tab

4. Re­fresh the browser window with or Ctrl+R.

5. Pro­fit! GOTO 1.

In­stall the server

What we learned previously is mainly for static websites. These only have HTML, CSS and Javascript, which is normally enough for simple websites: a portfolio, a landing page, a marketing page, etc.

However, when we want the user to register and edit things permanently in the web we will need to create the back-end. This is just the code that is executed in the server and that the user cannot see. For this course we will use Node.js, which is a server written in Javascript. There are many other languages such as PHP, Python, Ruby on Rails, etc.

Install Node.js with Node Vers­ion Man­ag­er

NVM is the recommended tool to install and handle Node.js versions, so we'll install it following the official and recommended installation method:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.2/install.sh | bash

After this, we have to close and open the terminal for it to work properly.

Then we use NVM to install a current Node version. In Node.js' website we can see that the newest one is v6.6.0, so we'll use it:

nvm install 6.6.0
nvm use 6.6.0
node --version    # Should show the right version

Heroku

Github pages are only for uploading static websites, so we'll use Heroku with the free tier to upload our dynamic website. The process is quite similar to Git and Github:

First we will register in Heroku and then install the Heroku Tool­belt:

wget -O- https://toolbelt.heroku.com/install-ubuntu.sh | sh

Then we log in through the terminal to Heroku:

heroku login

In­stalar Mon­goDB

Mon­goDB es la base de datos que usaremos. Si no con­sigues in­stalar­lo, podrás seguir los pasos pero no podrás al­macenar nada en la base de datos. Lo in­stalamos con:

sudo apt install mongodb

Y pro­bamos que func­iona hacien­do:

mongod --version

Instalar nodemon globalmente para facilitar la vida:

npm install nodemon -g