History: Getting started

Revision made 7 years ago by Francisco Presencia. Go to the last revision.

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.

Note: Feel free to contact me for any question or tip: [email protected]

The steps are the same for all computers, however here it is explained for Linux,  while for Mac the procedures are similar and for Windows you'll have to search how to install the same tools as it's more difficult.

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 three files cal­led index.html and style.css and javascript.js.

HTML is a struc­ture and con­tent lan­guage. All of the text, links, tit­les, etc are writt­en in html. CSS is a style lan­guage. It sets the col­ors, shapes and some HTML in­terac­tion. Javascript is the real interaction language, though recently there are some projects that are making it become a templating and styling language (they will be mentioned but not reviewed).

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 such as auto-completion, syntax highlighting, etc. Those make a big difference when working on the hundreds or thousands of lines of code. Install it:

http://atom.io/

 

Once Atom is installed 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 displayed on the left at this point.

Git and Git­hub

Git is a terminal (command line) tool to handle code versions, collaborations and to deploy (upload) websites. Github is the most used online web for Git projects, and it also allows to publish websites. Git and Github are totally different things.

First register on Git­hub. Then we'll install git (for Ubuntu, Linux):

sudo apt install git

This means open the terminal, write that command and press enter.

For macOS follow these instructions and for Windows these instructions.

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 this folder

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

cat id_rsa.pub

Remember to go to your folder afterwards from the terminal:

cat /path/to/your/folder
ls       # You should see index.html, style.css and javascript.js

See the website

Let's see the web we are making in the browser. Right now it should be empty, but open the file index.html with our pre­fer­red brows­er. Go to your File Manager  (Finder/Nautilus), right click on the file > open with > Firefox/Chrome. An empty tab should open on the browser you chose.

Now let's go back to Atom, writ­e the good ol' "Hello world" 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 (there are some tools to automate this, but we'll see it later):

1. Make changes in some of the files (ex­plained in later chapt­ers).

2. Save chan­ges with Ctrl+S

3. Switch to the browser with Alt+Tab

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

5. Pro­fit! GOTO 1.

Install the server

What we learned previously is mainly for static websites. With just this you can do a lot; static sites only have HTML, CSS and Javascript which is good for simple pages: a portfolio, a presentation page, a marketing page, etc. This is called the front-end.

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.

Make sure to first master the basics of HTML, CSS and specially Javascript before creating a server.

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.33.0/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.js' version:

nvm install node
nvm use node
node --version    # Should show the version number

When you do this, Node Package Manager should also be installed. Verify it with the command:

npm --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

Install Mon­goDB

Mon­goDB is the database that we will use. If you cannot install it, you'll be able to follow along most of the course but not able to store things in the databse. We install it in Ubuntu with:

sudo apt install mongodb

And we check that it works by doing:

mongod --version

Small tools

We will also install nodemon to manage launching the server locally:

npm install nodemon -g