This is a tutorial on building a website, it’s going to be freakin’ great! We are going to build a super basic site to host some static files that will allow you to express yourself as an individual on the web. It will also teach you some basics about Javascript, HTML, and CSS (SASS in specific). We are not only going to build the frontend, but also the backend that serves it all up!
Before you start, we will be installing and using the following list of programs during this tutorial:
- Nodejs & npm
- Atom (https://atom.io/)
- Git
We are going to begin this tutorial with installation of stuff, pretty much the most fun you are going to have this entire tutorial! (I hope you know that was a joke :p) First, we have to get you familiar with your working environment so that maintaining your fancy pantsy website is as easy as pie. Let’s start by heading over to https://github.com to create a git repository (you will need to register if you are not already a member, don’t worry its free). Click the New repository button as shown below.
Since the people at Github are so nice, they offer free hosting, so you can have your website available on the internet all for free! If you want to do that name your repository
<your-username>.github.io
It will look something like this
Once you have created your repository you will want to clone it onto your computer. You will need to install git first, once installed open the git terminal and navigate into the location you want to store your repository and clone it.
> cd to/the/location/you/want/to> git clone https://github.com/<your-username>/<your-username>.github.io.git
Now you will have a local copy of the files on your computer. Git is a repository management system that keeps your files safe in the cloud and synced up with the ones on your computer.
Throughout this tutorial I am going to be using git flow commands to create an organized branch structure (folder structure) for our project so that I can keep track of where everythings is. You can choose to follow these instructions or do it manually, I have included the instructions for both.
Next switch to your first development branch
With git flow:
> git flow init (hit enter a bunch of times)> git checkout develop; git flow feature start nodejs-server
Without git flow:
> git checkout -b develop> git checkout -b feature/nodejs-server
Now pop over to https://atom.io/ and install the latest version of the atom text editor. Once it is installed go open your git terminal again, make sure you are in the same location where you just did all that git nonsense and type
> atom .Note: you may need to open atom first and in the menu select
install shell commands
This should open up the atom text editor with your files (which will be nothing for now) It should look something like this:
You are almost ready to start coding! We need to finish installing the packages we will need to build our website.
Go and download NodeJS (https://nodejs.org/). You can check to make sure it is working by typing node -v in your terminal, if it pops up with some numbers you are good (after installing you may have to restart the terminal). NPM or Node Package Manager should be installed along side NodeJS if it is not go ahead and install that as well, a quick google for ‘download npm’ should do the trick.
Now that you have all that setup you are ready to go!
In the next part we will build the server which will host all our static files. Or skip all the way to Part 3 if your that good.
If you got stuck somewhere please leave a comment below so I can quickly add some notes so others can get through!
