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 Project
Just create a folder somewhere that will act as your project base. Inside this folder we'll write three files called index.html
and style.css
and javascript.js
.
HTML is a structure and content language. All of the text, links, titles, etc are written in html. CSS is a style language. It sets the colors, shapes and some HTML interaction. 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).
Install Atom
First you'll need to install a decent the text editor such as Atom. Even though you can use notepad or textedit, a specialized software will give you many more advantages 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 folder to Atom as a new project. From Atom, File > Add project folder... and find the newly created folder. It should be displayed on the left at this point.
Git and Github
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 Github. 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 preferred browser. 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, write the good ol' "Hello world" inside index.html and save the file with Ctrl+S. Then go to your browser and refresh the website with F5 or Ctrl+R. You should see the new changes.
This is the common workflow for making websites (there are some tools to automate this, but we'll see it later):
1. Make changes in some of the files (explained in later chapters).
2. Save changes with Ctrl+S
3. Switch to the browser with Alt+Tab
4. Refresh the browser window with or Ctrl+R.
5. Profit! 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 Version Manager
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
npm --version # verify this is installed as well
This should display two version numbers in the terminal.
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 Toolbelt:
wget -O- https://toolbelt.heroku.com/install-ubuntu.sh | sh
Then we log in through the terminal to Heroku:
heroku login
Install MongoDB
MongoDB 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