This explains how to create a website using node.js and express on MacOS. By the end of this tutorial, you should have a website hosted on a local machine. Credits to Ben Gourley for the original code.
- Clone this project from github here.
git clone https://github.com/vladov3000/web_base
- Install node.js using homebrew
brew install npm
- Install express and a logger(morgan) using npm
npm i --save express morgan
- Install pug(html template language) and stylus(css template language) for our front end of the website
npm i --save pug stylus
- Install nodemon so we can see our changes to the website live
npm install -g nodemon
Making the Website
npm initto initialize your website. Enter all the information it asks for. If you need to change it later, edit the package.json file.
- Build the website by running
npm run build
npm run watchand open http://localhost:3000 to watch your website update live (you have to save your files for it to update).
- Edit homepage.pug or any other template ending in -page.pug to change the html of that page. Edit defualt.pug to change the the taskbar or other elements present on every page.
- Edit index.style to edit the css classes of the website. Do NOT edit the index.css file, because the file regenerates, discarding all changes, everytime the css is built.
Changing the Website
- I used digital ocean to host my website, because it only costs $5 per month for one CPU, 1 GB of RAM, and 25 GB of SSD.
- Click on this and sign up for digital ocean.
- Create a new droplet by clicking the green button in the top right corner.
- Select Ubuntu and the $5/mo option. Choose a datacenter closest to you. DO NOT SUBMIT THE FORM YET!
- Go to the terminal and input
ssh-keygen -t rsa -b 4096and accept all defaults (just keep pressing enter).
cat .ssh/id_rsa.pubfor your public key and
cat .ssh/id_rsafor your private key.
- Go back to the create a droplet page and add a new ssh key. Copy your public key into that field and save it.
- Press Create
- Now go to your dashboard and copy the ip adress of the droplet you just created
ssh root@ipAdressin your command prompt.
Hosting the website
- Instead of writing a script, we're gonna use docker to install everything we installed in "Making the Website". Docker allows us to package multiple components in a single container. See the Dockerfile for more details.
- Set up the droplet for our docker:
sudo apt-get update sudo apt-get upgrade sudo apt-get install docker.io sudo apt-get install git sudo gpasswd -a $USER docker exit ssh root@ipAdress
- Now we clone the project by running
git clone https://github.com/vladov3000/web_base(replace the link to my repo with the link to your repo if you forked my repo).
- Go to the docker folder by running
- First we need to make a docker container by running
- To start the container, run
- Type in your browser the ip address of your website
Setting Up the Website on a Droplet
- I am using godaddy.com for this tutorial. This section will require some form of electronic payment(credit card, paypal, etc).
- Create an account on godaddy.
- Go to the home page and select a domain.
- Add it to your cart and continue to your cart.
- Press continue with these options.
- Pay and confirm the order.
- Navigate to the My Products page.
- Press the DNS button next to your domain's name.
- Edit the line with type "A". Change the "points to" to the ip adress of your droplet.
- Type in your domain name and you should see your website. If it doesn't work, wait a bit, and try to access it again.