1. Building the project

The first thing to do is to build the project. We use npm for during this, and we should have a script in the package.json file that will handle the actual build of the project.

{
  "name": "forkify",
  "version": "1.0.0",
  "description": "Recipe application",
	"default": "index.html",
	"scripts": {
		"start": "parcel index.html",
		"build": "parcel build index.html --dist-dir ./dist"
	},
  "author": "Damian Demasi",
  "license": "ISC",
  "devDependencies": {
    "parcel": "^2.0.0-beta.1",
    "sass": "^1.26.10"
  },
  "dependencies": {
    "core-js": "^3.15.2",
    "fractional": "^1.0.0",
    "regenerator-runtime": "^0.13.9"
  }
}

Before building the project, it's advisable to delete the .parcel-cahce and dist folders.

Now we can run the build:

npm run build

...

✨ Built in 17.25s

dist/index.html                  3.77 KB    878ms
dist/favicon.f1877f87.png        13.3 KB    555ms
dist/main.791002db.css           9.96 KB    5.13s
dist/controller.29741e2d.js    142.34 KB    8.10s
dist/icons.c781f215.svg         12.96 KB    553ms
dist/logo.09084f39.png          92.31 KB    553ms

2. Deploying the project manually

We can use any of these services to deploy our project (static projects with no databases):

• Surge (easy to use)
• Netlify (allows continuos integration using Git, offers free SSL certificate, CDN network spread all around the world for faster access, Collect form submissions, Split traffic to multiple branches) ⭐

We are going to use Netlify. We need to create an account, and simply drag and drop our project's dist folder to the Netlify page. Our project is now deployed.

3. Using a custom domain

When using Netlify, we can set up a custom domain. For example, for our recently deployed Forkify project, we can set up a forkify.damiandemasi.com domain. We should add a new CNAME entry in our DNS administration control panel (the place where we have our domain registered in). It should look something like:

By doing this we are creating an alias for the original URL (elastic-swanson-152625.netlify.app in this case), that will be accessible through the new URL (forkify.damiandemasi.com).

4. Continuous deployment

Continuos deployments means that whenever we commit a new change to our repository, a new deployment is automatically triggered as well.