How I Deploy My First Site on Heroku?

tina
2 min readSep 8, 2019

After creating your static page with HTML and CSS, we’d like to publish that so that it can be accessed publicly. Here, I’m going to show the steps to host your domain in id.heroku.com.

What do we get from Heroku?

· Domain or the address of your web with the extension of YOUR-APP-NAME.herokuapp.com

· Free Hosting

So let’s get started!

1. Open id.heroku.com and make an account

2. Create a new app

Now let’s go to Gitlab!

  1. Initiate a repository ( notes: make it public )
  2. Go to settings -> CI/CD -> variables

Set 3 of the columns with the following keys you can copy from your Heroku App ( Go back to your Heroku APP to get your app name, API key, and URL) :

  • Key = HEROKU_APPNAME , Value = Your Heroku App Name
  • Key = HEROKU_APIKEY , Value = Your Heroku API Key (You can find it in Account Settings -> Account -> API Key)
  • Key = HEROKU_APP_HOST , Value = Your Heroku App URL

P.S. Turn on the protected mode

Settings -> CI/CD -> Variables

3. Prepare for files ( HTML, CSS, etc ) you want to deploy

P.S. To make the process easier, please name it index.html

4. Let’s push that to our git using the following command:

a. Go to the folder (directory) you locate your kit

b. Make a file which contains the following line( because we’re gonna deploy a static page):

Name the following file index.php:

Another file you need to add is: .gitlab-ci.yml

https://gitlab.com/fathinah/first-project/blob/master/.gitlab-ci.yml

c. Let’s commit and push our files

>> git init

>> git config — -global user.name “your name”

>> git config — -global user.email “your mail”

>> git status

Note: you’ll most likely to find unusual files/uncommitted changes which we’re going to adopt soon

>> git add .

>> git commit -m “your message”

>> git remote add origin *insert a link to clone your GitLab*

Note: you only need to write this once, for the following changes you can skip this line. (FOR NOW)

>> git push -u origin master

Unlisted

--

--