Pernah gak sih kalian curhat ke Tuhan tapi dengan perasaan malu-malu?

Di satu sisi, kita sadar banget kalau dosa kita tuh gak sedikit—ada aja yang kita lakuin tiap hari, entah sengaja atau gak. Tapi di sisi lain… ke siapa lagi kita bisa memohon pertolongan kalau bukan ke Tuhan?

Aku pernah ngalamin momen di mana aku berdoa sambil minta tolong, tapi rasanya kayak canggung sendiri. Malu. Karena sadar, “Ya ampun, dosa gue banyak banget.” Tapi entah kenapa, di saat itu juga aku ngerasa deket banget sama Tuhan. Rasanya kayak lagi ngobrol pelan-pelan, penuh harap, penuh pengakuan, tapi juga penuh cinta.

Kayak,

“Ya Allah… hamba sadar, hamba banyak dosa. Tapi kepada siapa lagi hamba bisa meminta pertolongan, Ya Allah… 😭

sambil tersenyum kecil, “hehe…”

Di sanalah aku merasa… Tuhan itu benar-benar Maha Pengampun. Maha Penyayang. Bahkan saat aku datang dengan tangan penuh luka dan hati penuh malu, Dia tetap memelukku dalam tenangnya. Bercengkerama dalam diam, tapi terasa hangat sekali.

Kamu mungkin bukan malas olahraga, tapi kamu mungkin tidak punya teman olahraga, coba cari atau ajak teman yang mau diajak olahraga bareng-bareng.

Kamu mungkin bukan malas olahraga, tapi kamu mungkin tidak suka keramaian, coba olahraga di tempat atau di waktu yang tidak terlalu ramai.

Kamu mungkin bukan malas olahraga, tapi kamu mungkin …silahkan diisi

Untuk siapapun,

Selamat atas pencapaian besarmu! Kalau belum terwujud, selamat atas pencapaian-pencapaian kecilmu.

Pencapaian kecil yang sering tidak diperhatikan, padahal cukup patut dirayakan, dirayakan dengan segelas kopi, makanan favorit, atau setidaknya mendapatkan kepuasan batin dan rasa syukur :)

Ketika membuka feed sosial media, entah itu facebook, instagram, tiktok, dll. Bayangkan kalo itu seperti kita membuka kulkas, itulah hal-hal yang akan kita “makan” hari itu, itulah yang akan kita konsumsi, dan itu akan mempengaruhi kita.

Kita tidak pasif, kita aktif dalam mengkonsumsi hal-hal tersebut, kita tidak “hanya melihatnya”, ini seperti kita memakannya.

Karena mata adalah jendela hati, kita tidak bisa melihat sesuatu tanpa mempengaruhi hati kita.

Sumber: instagram.com/elitereminders

The Guest House

This being human is a guest house.
Every morning a new arrival.

A joy, a depression, a meanness,
some momentary awareness comes
as an unexpected visitor.

Welcome and entertain them all!
Even if they’re a crowd of sorrows,
who violently sweep your house
empty of its furniture,
still, treat each guest honorably.
He may be clearing you out
for some new delight.

The dark thought, the shame, the malice,
meet them at the door laughing,
and invite them in.

Be grateful for whoever comes,
because each has been sent
as a guide from beyond.

~ RUMI ~

• Source: scottishpoetrylibrary.org.uk
• Image source: pngtree.com

Dengan bahasa apa kita berdoa? Jawaban utamanya adalah dengan bahasa hati. Karena apa yang keluar dari hati, pasti indah dan Tuhan menyukai keindahan. Sedangkan mengenai bahasa hati itu akan diterjemahkan dalam bentuk bahasa Arab, Indonesia, atau lainnya, bebas.

Kita bisa belajar dari Abu Nawas dalam berdoa, yang begitu romantis.

Wahai Tuhanku, hamba tak pantas menjadi penghuni surga.

Namun, hamba pun tak sanggup menjadi penghuni neraka.

Terimalah tobat-tobat hamba dan ampunilah dosa-dosa hamba.

Sesungguhnya Engkaulah Maha Pengampun atas segala dosa yang hamba perbuat.

Dosa-dosa hamba bagaikan tumpukan pasir.

Terimalah tobat hamba, wahai yang Mahamulia.

Sementara umur hamba kian hari kian berkurang.

Dan dosa hamba kian bertambah, bagaimana mungkin hamba mampu memikulnya.

Wahai Tuhanku, hamba-Mu yang penuh dosa ini, kini menghadap-Mu memohon ampunan.

Jika Engkau mengampuni, pantaslah karena Engkau Maha Pengampun.

Namun, jika Engkau menolak permohonan hamba, kepada siapa hamba berharap selain Engkau.

Sumber: Buku “Seni Merayu Tuhan”, Husein Ja’far Al-Hadar

Imam Abu Hanifah pernah didatangi seseorang yang lupa menaruh barang berharganya. Dia minta petunjuk kepada Abu Hanifah.

Lalu, Abu Hanifah bilang, “Nanti malam, kamu shalat sampai pagi!” Kemudian, malamnya orang itu pun shalat.

Namun, di tengah-tengah shalat, belum berkunjung pagi, dia ingat dimana meletakkan barang yang hilang itu. Dia pun kembali kepada Abu Hanifah, menyampaikan kabar bahwa barangnya sudah ditemukan.

Lalu, Abu Hanifah berkata, “Aku tahu setan takkan membiarkanmu khusyuk. Maka, setanlah yang membantu kamu menemukan barangmu.”

Cerita ini plot twist banget ga sih 😆

Tapi ada pelajaran yang bisa diambil dari cerita ini, bisa dibaca di bukunya Habib Jafar yang judulnya “Seni Merayu Tuhan”, cerita ini pun diambil dari buku tersebut.

Custom Domains - Netlify Site

More detail from Netlify’s docs

I got some part of my site showing not fully secure as shown in the image above. After tracking the issue, I found this is because of Disqus. If you face the same issue, you can try this solution

1. Go to your Disqus account
2. Click Setting Gear -> Admin
3. Click Edit Settings -> Choose your site
4. Click Advanced -> Disable Tracking

You can see detail information of the challenge on the official website.

See my progress on my git log or my twitter :)

A few days ago I’ve created a single page web application about coronavirus COVID-19 info, it’s created with Vue.js and apply skeleton loading. The data are fetched from Rest API I created before :)

• Web App: covid19.budidev.com
• Repo: github.com/budimanfajarf/covid19

Restful API

Before I build the web app, I build this Rest API first with Node.js. It’s consume data from another API, I calculate source data then add new data like percent, total data, etc, the goal is to create a simple API :)

• Documentation: documenter.getpostman.com/view/11864120/T17DgUSe
• Repo: github.com/budimanfajarf/covid19-api

See all my dev/project 💻 :)

Earlier before, if you’re following a post about install nginx on AWS EC2, you’ll have a server configuration file called like example.com, for me is api.budidev.com, it’s configured to listen default port 80, which is default port for HTTP connection.

And then if you’re following another post about secure HTTPS connection on nginx, the configuration file will be edited automatically by Certbot to configure HTTPS connection that listen on port 443, and it’s configured to redirect all HTTP traffic to secure HTTPS.

The end result of configuration file api.budidev.com look like this:

server {
  root /var/www/api.budidev.com/html;
  index index.html index.htm index.nginx-debian.html;

  server_name api.budidev.com;

  location / {
    try_files $uri $uri/ =404;
  }

  listen [::]:443 ssl ipv6only=on; # managed by Certbot
  listen 443 ssl; # managed by Certbot
  ssl_certificate /etc/letsencrypt/live/api.budidev.com/fullchain.pem; # managed by Certbot
  ssl_certificate_key /etc/letsencrypt/live/api.budidev.com/privkey.pem; # managed by Certbot
  include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
  ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

server {
  if ($host = api.budidev.com) {
    return 301 https://$host$request_uri;
  } # managed by Certbot

  listen 80;
  listen [::]:80;

  server_name api.budidev.com;
  return 404; # managed by Certbot
}

One more for prerequisite, if you’re following previous post about install node.js and make node.js app keep running, you’ll have a node.js app that running on some port, for me is port 3000.

Update api.budidev.com

Before we begin to talk about run multiple node.js app, I’ll update the configuration file to route HTTP and HTTPS connection to the Node.js app that running on port 3000, so I can access Node.js app by navigating to https‎://api.budidev.com, and no needed to specify the port again, like https‎://api.budidev.com:3000.

Connect to your instance first, then open the configuration file:

sudo nano /etc/nginx/sites-available/api.budidev.com

Update the file with the content below

server {
  root /var/www/api.budidev.com/html;
  index index.html index.htm index.nginx-debian.html;

  server_name api.budidev.com;

  # --- UPDATE CONFIGURATION HERE ---
  location / {
    # try_files $uri $uri/ =404;
    proxy_pass http://127.0.0.1:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }
  # ----------------------------------  

  listen [::]:443 ssl ipv6only=on; # managed by Certbot
  listen 443 ssl; # managed by Certbot
  ssl_certificate /etc/letsencrypt/live/api.budidev.com/fullchain.pem; # managed by Certbot
  ssl_certificate_key /etc/letsencrypt/live/api.budidev.com/privkey.pem; # managed by Certbot
  include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
  ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

server {
  if ($host = api.budidev.com) {
    return 301 https://$host$request_uri;
  } # managed by Certbot

  listen 80;
  listen [::]:80;

  server_name api.budidev.com;
  return 404; # managed by Certbot
}

Notice here that my configuration file name and my server_name is api.budidev.com, you should replace with your own like example.com, and notice too that I run node.js app on port 3000, replace this with your own port that run node.js app, close and save after editing.

Test nginx configuration

sudo nginx -t

If there aren’t any problems, restart nginx to enable changes

sudo service nginx restart

Now if you’re going to your domain or subdomain name, for me is https://‎api.budidev.com without adding specific port like 3000, you should see node.js app show up:

Run Multiple Node.js App

I found 2 approach to run multiple node.js app in one server, you can choose which one you’re preferred.

First Approuch

The first approach is, you can update and add a new location on your configuration file before, for example, I’ll edit my configuration file api.budidev.com

1. Create and run a new node.js app on some port, for example port 3001, look at a post about install node.js and make node.js app keep running for detail

2. Update api.budidev.com

server {
  root /var/www/api.budidev.com/html;
  index index.html index.htm index.nginx-debian.html;

  server_name api.budidev.com;

  location / {
    proxy_pass http://127.0.0.1:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }

  # --- ANOTHER NODE.JS APP HERE ---
  location /app2/ {
    proxy_pass http://127.0.0.1:3001/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }  
  # ---------------------------------

  listen [::]:443 ssl ipv6only=on; # managed by Certbot
  listen 443 ssl; # managed by Certbot
  ssl_certificate /etc/letsencrypt/live/api.budidev.com/fullchain.pem; # managed by Certbot
  ssl_certificate_key /etc/letsencrypt/live/api.budidev.com/privkey.pem; # managed by Certbot
  include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
  ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

server {
  if ($host = api.budidev.com) {
    return 301 https://$host$request_uri;
  } # managed by Certbot

  listen 80;
  listen [::]:80;

  server_name api.budidev.com;
  return 404; # managed by Certbot
}

In this approuch, the second node.js app will run on route /app2, for me is https://‎api.budidev.com/app2

Second Approuch

The second approach is, you can run another your node.js app on new domain or subdomain, for example:

1. Create domain or subdomain called sub.example.com using A Record and pointing this to IP Address of your AWS EC2 instance
2. Create and run a new node.js app on some port, for example port 3001, look at a post about install node.js and make node.js app keep running for detail
3. Create new nginx server block configuration file called sub.example.com, and use proxy_pass to route to your node.js app on port 3001, like the example above
4. Secure your domain or subdomain using Let’s Encrypt, look at a post about secure https connection in nginx for detail

If you use an AWS EC2 instance to follow this post, you have to connect to instance first and add Custom TCP at port 3000 in inbound rules, this port is used for test to run node.js app.

Install Node.js using NVM

Install NVM

If you’ve connected to your instance or use your local computer, now time to install node.js. In this post I’ll install node.js using nvm, nvm is a version manager for node.js.

The reasons I install node.js using nvm are that I can easily switch node.js version that currently running to another version, and I can install global packages npm i -g without doing sudo.

Run the following commands in a terminal to install or update nvm

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

The command above will download a script and runs it. The script clones the nvm repository to ~/.nvm, and attempts to add the source lines to the correct profile file (~/.bash_profile, ~/.zshrc, ~/.profile, or ~/.bashrc).

You can find the updated version of nvm here

Run the command below to check that nvm was successfully installed

nvm --version

The terminal will show Command ’nvm’ not found as the code has been added to your profile but hasn’t run yet

Just close the currently opened terminal and launch a new terminal and run nvm –version again

Install Node.js

To install node.js using nvm, you can use nvm install node to install the latest version of node, or use nvm install 6.14.4 to install a specific version of node, or use nvm install –lts to install the latest LTS version of node.

NVM will install Node.js include with NPM (Node Package Manager), see the complete guide to use nvm here.

Install the latest LTS version of Node.js

nvm install --lts

Check the installed version of Node.js

node --version

Check the installed version of NPM

npm --version

Run Example Node.js App

Node.js has successfully installed in your system, now time to run some node.js application. I’ll run an application that cloning from my github repository, the app is quite simple, it just a ‘Hello World’ app, it use just for test that node.js running correctly.

The main code app.js of this repository looks like this:

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => res.send('Hello World!'))
app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`))

Clone the repository

git clone https://github.com/budimanfajarf/node-hello-world.git

Change directory to node-hello-world

cd node-hello-world

Install packages using npm

npm install

Run Node.js app

node app.js

Open a browser and navigate to localhost:3000 if you’re using a local computer, or navigate to public-dns-or-ip-address:3000 if you’re using an AWS EC2 Instance.

Make Node.js App Keep Running

Install PM2

The app will run as long as you open the terminal, but when you close the terminal or press Ctrl-C, the app will stop running. To make node.js app keep running, we can use a process manager called PM2, find more information about PM2 here.

First, stop the app.js running before by press Ctrl-C

Install PM2 globally using npm

npm install pm2 -g

Start Node.js app using PM2

pm2 start ~/node-hello-world/app.js

Now even if you close the terminal, the app will keep running and can access using a browser on a url like localhost:3000 if you use a local computer, or public-dns-or-ip-address:3000 if you use an AWS EC2 instance.

Configure Startup

When you reboot your server, the app won’t automatically be running, we can set up startup configuration by generating startup script using pm2.

To generate the startup script, use the following command:

pm2 startup

Copy the generated script and hit enter to run it

Save the configuration

pm2 save

Now when you reboot your server, the pm2 will automatically running and start node.js app! :)

If you want to remove the startup configuration, the steps are similar, generate unstartup script with the command below

pm2 unstartup

Copy and run the generated script, then save the configuration with pm2 save.

Useful PM2 Commands

List all running apps:

pm2 list

Managing apps:

pm2 stop <app_name|namespace|id|'all'|json_conf>

pm2 restart <app_name|namespace|id|'all'|json_conf>

pm2 delete <app_name|namespace|id|'all'|json_conf>

Details on a specific app:

pm2 describe <id|app_name>

Monitor logs, custom metrics, apps information:

pm2 monit

Find more info about PM2 on npmjs or keymetrics

If you following preview post about How to Install Nginx and Setting Up Server Block, you’ll have an nginx configuration file called like example.com, for me is api.budidev.com. The file should be saved in directory /etc/nginx/sites-available and linking to /etc/nginx/sites-enabled.

In this post, I’ll show you how to enable HTTPS (SSL/TLS) connection for domain or subdomain in nginx server block configuration file. The configuration will automatically generated using Certbot by Let’s Encrypt.

You can see the official instruction by Let’s Encrypt to using Certbot here.

First of all, you have to connect to the server, if you use AWS EC2 instance as a web server, you can follow this post to connect to EC2 instance

Add Certbot PPA and Install Certbot

Add the Certbot PPA to list of repositories with the commands below

sudo apt-get install software-properties-common

sudo add-apt-repository universe

sudo add-apt-repository ppa:certbot/certbot

sudo apt-get update

Install Certbot with the command below

sudo apt-get install certbot python3-certbot-nginx

Get an SSL Certificate and Automatically Configure

Run the command below to get a certificate and let Certbot edit Nginx configuration automatically

sudo certbot --nginx

If this is the first time running certbot, you’ll be prompted to enter an email address and agree to the terms of service

Choose the domain or subdomain you want to activate HTTPS

Choose the options you preffer, choose option 1 so you can access web server via HTTP and HTTPS, choose option 2 to redirecting HTTP to HTTPS

If everything works fine, certbot will print a success message with the important notes like the example below

Now the certificates are installed, try to access web server in a browser using https connection, for me is https://‎api.budidev.com

Test automatic renewal

The Certbot packages on your system come with a cron job or systemd timer that will renew your certificates automatically before they expire. You will not need to run Certbot again unless you change your configuration [ref].

You can test automatic renewal for your certificates by running this command:

sudo certbot renew --dry-run

In this post, I use EC2 Instance of Ubuntu Server 18.04, and access the instance using SSH connection in a terminal of my Ubuntu Desktop, follow this post to connect to EC2 instance.

Configure security group of your instance to add HTTP & HTTPS connection in inbound traffic, you can follow this post to configure security group.

Prepare a domain or subdomain, added using A Record that pointing to public IP4 address of your instance, either default IP4 address or Elastic IP4 address.

Install Nginx

Update Packages

sudo apt update

Install Nginx

sudo apt install nginx

Check Nginx Status

sudo service nginx status

Open your instance detail and copy public DNS or public IP Address

Open a browser and paste it to check that Nginx successfully installed

Setting Up Nginx Server Block

When using the Nginx web server, server blocks (similar to virtual hosts in Apache) can be used to encapsulate configuration details and host more than one domain from a single server [ref].

In this post, I will set up my subdomain called api.budidev.com, but you should replace this with your own domain or subdomain name.

Create Directory and index.html Sample File

Create directory for api.budidev.com

sudo mkdir -p /var/www/api.budidev.com/html

Assign ownership of the directory to current login user

sudo chown -R $USER:$USER /var/www/api.budidev.com/html

Create a sample index.html using nano

nano /var/www/api.budidev.com/html/index.html

Fill the index.html like the example below

<html>
    <head>
        <title>Welcome to api.budidev.com</title>
    </head>
    <body>
        <h1>Success!  The api.budidev.com server block is working!</h1>
    </body>
</html>

Create New Nginx Server Block

Create new configuration server block file called api.budidev.com

sudo nano /etc/nginx/sites-available/api.budidev.com

Fill the content like the example below

server {
  listen 80;
  listen [::]:80;

  root /var/www/api.budidev.com/html;
  index index.html index.htm index.nginx-debian.html;

  server_name api.budidev.com;

  location / {
          try_files $uri $uri/ =404;
  }
}

Enable the api.budidev.com configuration file by creating a link from it to the sites-enabled directory

sudo ln -s /etc/nginx/sites-available/api.budidev.com /etc/nginx/sites-enabled/

Configure Nginx

To avoid a possible hash bucket memory problem that can arise from adding additional server names, it is necessary to adjust a single value in the /etc/nginx/nginx.conf file [ref].

Open nginx.conf file

sudo nano /etc/nginx/nginx.conf

Find the server_names_hash_bucket_size and remove the # symbol to uncomment the line

http {
    server_names_hash_bucket_size 64;
}

Test Nginx configuration

sudo nginx -t

If there aren’t any problems, restart Nginx to enable changes

sudo service nginx restart

Nginx should now serve your domain or subdomain. You can test this using browser by navigating to http:‎//your-domain-subdomain.com, for me is http://‎api.budidev.com

You can easily configure security group of your instance via EC2 Dashboard.

Select an instance, then look at Description tab, click the link like example below to navigate to security group

Click the Security group ID link like example below to see detail inbound and outbond traffic of your instance

When you launch an instance and don’t configure the security group, the default rules will look like this

To edit rules of inbound or outbound traffic, click Edit button like example below

In the example above, I added new rules HTTP (port 80), HTTPS (port 443) and Custom TCP (port 3000) to inbound rules.

The following inbound rules allow HTTP and HTTPS access from any IP address. This is for setup my instance to be a web server, so I can access like this:

• http://aws-public-dns-or-example-domain.com
• https://aws-public-dns-or-example-domain.com

Then I added custom TCP (port 3000), so I can access web server like this:

• http://aws-public-dns-or-example-domain.com:3000
• https://aws-public-dns-or-example-domain.com:3000

The custom TCP above is not for production, I use this to test Node.js application running on Port 3000.

Save new added rules by click orange button Save rules

Select the instance then click Connect button

A window pops up will show up with a few info about how to connect to an instance

NOTE: The key-pair example-key.pem is generated when you first time launch an instance

Command to apply chmod 400 to key-pair

chmod 400 /path/to/example-key.pem

Command to connect to instance via SSH

ssh -i "/path/to/example-key.pem" user@public-dns-example.com

In this example, I use terminal ubuntu desktop to connect to EC2 instance

Successfully connect to instance

Amazon Elastic Compute Cloud (Amazon EC2) is a web service that provides secure, resizable compute capacity in the cloud. It is designed to make web-scale cloud computing easier for developers. Amazon EC2’s simple web service interface allows you to obtain and configure capacity with minimal friction. It provides you with complete control of your computing resources and lets you run on Amazon’s proven computing environment [ref].

In short, Amazon EC2 is a Virtual Server in the Cloud.

Launch Amazon EC2 Instance

First of all, you must have an AWS account, you can follow this post to create an AWS account.

Go and Sign In to AWS Management Console

Find services then choose EC2

Now you should be redirected to EC2 Dashboard.

To launch a new EC2 Instance, Click orange button Launch Instance

Step 1: Choose an Amazon Machine Image (AMI)

Choose AMI you preferred, check Free tier only to show only AMI that covered around Free Tier Offers by AWS. I’ll select Ubuntu Server 18.04 that I preferred.

Click Select button to continue

Step 2: Choose an Instance Type

Leave to default settings then click Next: Configure Instance Detail

Step 3: Configure Instance Detail

Leave to default settings then click Next: Add Storage

Step 4: Add Storage

Leave to default settings or you can adjust the size (Max of Free Tier is 30GB), then click Next: Add Tags

Step 5: Add Tags

Leave to default settings then click Next: Configure Security Group

Step 6: Configure Security Group

Leave to default settings then click Review and Launch

I’ve created a post about configure security group in EC2.

Step 7: Review Instance Launch

Verify the whole settings you set up before then click Launch

A window pops up will asking you to select an existing key-pair or create a new key-pair. If you haven’t created a key pair before then create a new one, then download it to your local computer. The key-pair is using to connect the Instance via SSH Client.

After you download the key-pair, then click Launch Instances

Congrats! You are successfully launching an EC2 Instance :)

Click View Instances to see detail instance you launched

You may have to wait a few minutes until the status of the instance change from pending to running, just wait :)

First, go to AWS Sign Up Portal, fill the required fields, then click Continue

After that you will be asked for contact information, fill the required fields, then click Create Account and Continue

The next step is payment information, you can use Debit or Credit Card which accepted by AWS like Visa, Master Card, etc.

Noted here you will be charged $1 USD/EUR by AWS as verification to ensure the card is valid.

Fill the payment information, then click Verify and Add

Next, before you can use your AWS account, you must add a phone number and verify it using verification code that will send via SMS.

Fill the phone number and the security check, then click Send SMS

Check your phone, enter the verification code, then click Verify Code

Select a Support Plan you preferred, you can choose Basic Plan for this

Congrats! now you have an AWS account :)

You may have to wait a few minutes until you can sign in to AWS Management Console.

Find more information about AWS Free Tier Offers here.

Log all commit history

git log

Then copy the previous hash commit you want to reset to it, commit <hash>.

Hard Reset

Once you have the hash, do hard reset

git reset --hard <hash>

Example:

git reset --hard 7e9c66afa4e45a3cc0bc6d56e67e0faea7aa3b72

Update: Use –soft instead –hard so you can get the staged changes :)

Example:

git reset --soft 7e9c66afa4e45a3cc0bc6d56e67e0faea7aa3b72

Push it

Then force push to remote branch

git push -f <remote> <branch>

Example:

git push -f origin master

In this post I will show you how to install LEMP Stack on AWS EC2 Instance

• L = Linux (Ubuntu 18.04)

• E = Engine X / Nginx (1.14)

• M = MySQL (5.7)

• P = PHP (7.2)

Creating AWS EC2 Instance

First of all, you must have an AWS account, you can register here and get 12 months of Free Tier access from Amazon Web Service (AWS).

After registering an AWS account, sign in to AWS Console then choose EC2 Service, Launch new Instance then follow the steps with this options:

• Amazon Machine Image (AMI): Ubuntu Server 18.04 LTS

• Instance Type: General purpose | t2.micro

• Instance Details: Leave to default settings

• Storage: Leave to default settings or you can adjust the size (Max of Free Tier is 30GB)

• Tags: Add your tags or you can skip this step

• Security Group: Create a new security group with the rules below

• Review Instance Launch: Verify the settings then click Launch

• • A window pops up will asking you to select an existing key-pair or create a new key-pair. If you haven’t created a key pair before then create a new one, then download it to your local computer. The key-pair is using to connect the Instance via SSH Client.

Connecting to AWS EC2 Instance

To see how to connect to your Instance, go to AWS EC2 Dashboard, navigate to Running Instances, select the Instance of Ubuntu 18.04 that launched before, then click Connect button. You will see a few info about how to connect to AWS EC2 Instance.

In this example, I use terminal on Ubuntu desktop as SSH Client to connect to AWS EC2 Instance.

• Move the key-pair file you download before to ~/.ssh directory

• Open a terminal then apply chmod 400 to the file

chmod 400 ~/.ssh/your-key.pem

• In a terminal, connect to your instance using Public DNS with the key-pair as identify file, Example:

ssh -i "~/.ssh/your-key.pem" ubuntu@ec2-13-229-132-71.ap-southeast-1.compute.amazonaws.com

To see your Public DNS or Public IP Address, go to AWS EC2 Dashboard, select your instance then see in Description Section.

Installing Nginx Server

After you successfully connect to your instance, now you can managing the instance as you want. To Setup the LEMP Stack, first update your instance packages

sudo apt update

Then install the Nginx Server

sudo apt install nginx

Open a browser then go to your Public DNS or Public IP Address of your instance to check that Nginx successfully installed.

htpps://your-public-DNS-or-IP-address

Installing MySQL

The next thing to do is installing MySQL, use this command to install it

sudo apt install mysql-server

Configure MySQL with this command

sudo mysql_secure_installation

Installing PHP

Install php-fpm, a stands for “fastCGI process manager” to tell Nginx to pass PHP requests to this software for processing

sudo apt install php-fpm

Install php-mysql to allow PHP communicate with database backend

sudo apt install php-mysql

Configuring Nginx to Use PHP

Now the LEMP Stack are installed, but we have to configure Nginx to use PHP processor for dynamic content.

In this example, I will edit the default configuration server block of Nginx

First, backup the default configuration file

sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/default.bak

Open default configuration file using nano

sudo nano /etc/nginx/sites-available/default

Fill with the content bellow

server {
        listen 80;
        root /var/www/html;
        index index.php index.html index.nginx-debian.html;
        server_name _;

        location / {
                try_files $uri $uri/ =404;
        }

        location ~ \.php{
                include snippets/fastcgi-php.conf;
                fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
        }

        location ~ /\.ht {
                deny all;
        }
}

Create info.php file to test PHP

sudo nano /var/www/html/info.php

Fill with the content bellow

<?php
phpinfo();

Restart Nginx

sudo service nginx restart

Open a browser then go to htpps://your-public-DNS-or-IP-address/info.php

If everything works fine you should see PHP info page like this

Format:

ssh -i "/directory/your-key.pem" user@your-domain.com

Example:

ssh -i "~/.ssh/budi.pem" ubuntu@ec2-13-229-132-71.ap-southeast-1.compute.amazonaws.com

Copy File from Remote Server to Local

Format:

scp -i "/directory/your-key.pem" user@your-domain.com:/directory/server/example.txt /directory/local

Example:

scp -i "~/.ssh/budi.pem" ubuntu@ec2-13-229-132-71.ap-southeast-1.compute.amazonaws.com:/etc/nginx/nginx.conf ~/Downloads

Copy Folder from Remote Server to Local

Format:

scp -r -i "/directory/your-key.pem" user@your-domain.com:/directory/server/example /directory/local

Example:

scp -r -i "~/.ssh/budi.pem" ubuntu@ec2-13-229-132-71.ap-southeast-1.compute.amazonaws.com:/etc/nginx ~/Downloads

VSCode Configuration File

Format:

Host <your-domain.com> or <name>
    User <user-name>
    HostName <your-domain.com>
    IdentityFile <your-key.pem>

Example:

Host aws-ubuntu
    User ubuntu
    HostName ec2-13-229-132-71.ap-southeast-1.compute.amazonaws.com
    IdentityFile ~/.ssh/budi.pem

Detail Project: /dev/apis-microservices/

window.addEventListener('scroll', function (event) {
  if (document.documentElement.scrollHeight <= window.pageYOffset + window.innerHeight)  {
    alert('You are at the bottom of page!');
  }
});

For live example, scroll to the bottom of this page then you will see the header of this website slide up.

To redirect default netlify subdomain to your custom domain, add new file _redirects and save to the root of your website, then fill the _redirects file with the code below.

# Redirect default Netlify subdomain to primary domain

https://[your].netlify.app/* https://[your-domain].com/:splat 301!

# Example: https://budi.netlify.app/* https://budidev.com/:splat 301!

In Hugo, save _redirects file to static folder.

Netlify has feature to see your preview website before publishing, you can get the link of your preview website after you successfully deploy your website to Netlify, like this:


If you click the link preview deploy, you will be redirected to the preview site that automatically generated by Netlify. The link will be like: https://5eb160f537052400067fc948–budi.netlify.app/


See the example my preview site above, It looks like some CSS file not rendering correctly, but when I publish my deployed site, the CSS is rendering correctly. So, what’s the problem?

After I debug my codes and doing trying errors for a few times, I got the problem. The problem is about to generate a URL in Hugo template.

Here’s the code to get and genate resource some SCSS file in Hugo.

{{ $custom := resources.Get "scss/custom.scss" | resources.ExecuteAsTemplate "css/custom.css" . | toCSS | minify | fingerprint -}}
<link rel="stylesheet" href="{{ $custom.Permalink | absURL  }}" {{ printf "integrity=%q" $custom.Data.Integrity | safeHTMLAttr }} crossorigin="anonymous">

The absURL(absolute URL) will generate url with format: baseURL+url, example like: https://budidev.com/css/custom.css.

That’s why the CSS not rendering correctly because the baseURL of preview site is not the same with baseURL that configure in config.toml file.

So, instead using absURL, change this to relURL(relative URL), it’s will generate url with format /+url, example like: /css/custom.css

Here’s the code after changed:

{{ $custom := resources.Get "scss/custom.scss" | resources.ExecuteAsTemplate "css/custom.css" . | toCSS | minify | fingerprint -}}
<link rel="stylesheet" href="{{ $custom.Permalink | relURL  }}" {{ printf "integrity=%q" $custom.Data.Integrity | safeHTMLAttr }} crossorigin="anonymous">

Then if everything going well, the preview site should looks good now.


You can try the same thing when failed to generate some JavaScript file, for example:

Before edited:

{{ $myTypeit := resources.Get "js/my-typeit.js" | resources.ExecuteAsTemplate "js/my-typeit.js" . | minify | fingerprint -}}
<script src="{{ $myTypeit.Permalink }}" {{ printf "integrity=%q" $myTypeit.Data.Integrity | safeHTMLAttr }} crossorigin="anonymous"></script>

After edited:

{{ $myTypeit := resources.Get "js/my-typeit.js" | minify | fingerprint -}}
<script src="{{ $myTypeit.Permalink | relURL }}" {{ printf "integrity=%q" $myTypeit.Data.Integrity | safeHTMLAttr }} crossorigin="anonymous"></script>

Errors

Here’s the pieces of errors:

...
...
8:41:49 AM: ERROR 2020/05/03 01:41:49 render of "taxonomyTerm" failed: "/opt/build/repo/layouts/tags/terms.html:15:25": execute of template failed: template: tags/terms.html:15:25: executing "main" at <.Page.Permalink>: can't evaluate field Page in type hugolib.OrderedTaxonomyEntry
8:41:49 AM: Total in 179 ms
8:41:49 AM: Error: Error building site: failed to render pages: render of "taxonomyTerm" failed: "/opt/build/repo/layouts/_default/terms.html:15:20": execute of template failed: template: _default/terms.html:15:20: executing "main" at <.Page.Permalink>: can't evaluate field Page in type hugolib.OrderedTaxonomyEntry
...
...
8:41:49 AM: Error running command: Build script returned non-zero exit code: 255
8:41:49 AM: Failing build: Failed to build site
8:41:49 AM: failed during stage 'building site': Build script returned non-zero exit code: 255
8:41:49 AM: Finished processing build request in 14.990296865s

So, as usual, I open a new tab in the browser to find solutions on the internet, and then after a while, I found an article from the official Hugo website, here’s the link: Hugo taxonomy templates.

Reason Errors

After reading the article, I found the reason why I got errors when I deploy my site to Netlify, code below the reason why I getting the errors:

<ul>
    {{ range .Data.Terms.Alphabetical }}
        <li><a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a> {{ .Count }}</li>
    {{ end }}
</ul>

Order Taxonomies with the approach above is only available in Hugo 0.55 and later.

Before the version 0.55 you would have to do something like:

<ul>
    {{ $type := .Type }}
    {{ range $key, $value := .Data.Terms.Alphabetical }}
        {{ $name := .Name }}
        {{ $count := .Count }}
        {{ with $.Site.GetPage (printf "/%s/%s" $type $name) }}
            <li><a href="{{ .Permalink }}">{{ $name }}</a> {{ $count }}</li>
        {{ end }}
    {{ end }}
</ul>

So, my conclusion is that the Hugo version on Netlify less than 0.55, while my local version is 0.69.2, and the first code approach above only available in Hugo 0.55 and later. That’s why I got the errors.

Solutions

Then what’s the solutions? If you have the same errors or similar like I got, you can try 2 options.

First you can change the code like second code approach above, so that can runs on Hugo version you running on Netlify.

Or you can do like what I do

Instead change the code, I prefer to add a new file to my site, the file is netlify.toml. This file can set Hugo version and other settings for your environments in Netlify.

When I deploy my Hugo site to Netlify on the first time I don’t create netlify.toml, but everything works fine until I customize the layouts theme site to add a list of terms taxonomies tags and then got the errors.

Because that errors, I decided to add netlify.toml to ensure Hugo version in Netlify has the same version with my local machine, so that can reduce similar errors in the future because different Hugo version.

Here’s code in my netlify.toml file:

[build]
publish = "public"
command = "hugo --gc --minify"

[context.production.environment]
HUGO_VERSION = "0.69.2"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"

[context.split1]
command = "hugo --gc --minify --enableGitInfo"

[context.split1.environment]
HUGO_VERSION = "0.69.2"
HUGO_ENV = "production"

[context.deploy-preview]
command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"

[context.deploy-preview.environment]
HUGO_VERSION = "0.69.2"

[context.branch-deploy]
command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"

[context.branch-deploy.environment]
HUGO_VERSION = "0.69.2"

[context.next.environment]
HUGO_ENABLEGITINFO = "true"

Save netlify.toml file into your root directory Hugo site, and then push + re-deploy into Netlify, if everything works fine the errors should be gone and you can preview your site before publishing.

You can see the newest example netlify.tomlon official Hugo website: Configure Hugo version in Netlify.

That’s all, hope this helps you :)

Attachment

Deploy log before add netlify.toml

8:41:32 AM: Build ready to start
8:41:34 AM: build-image version: 2dbd444fcdce00cf06325060a8238d5ae3e86774
8:41:34 AM: build-image tag: v3.3.7
8:41:34 AM: buildbot version: d305548225ac57bb00eb5a596b0b8674e76a4681
8:41:34 AM: Fetching cached dependencies
8:41:34 AM: Starting to download cache of 119.6MB
8:41:35 AM: Finished downloading cache in 604.32311ms
8:41:35 AM: Starting to extract cache
8:41:39 AM: Finished extracting cache in 4.285960043s
8:41:39 AM: Finished fetching cache in 4.930258489s
8:41:39 AM: Starting to prepare the repo for build
8:41:40 AM: Preparing Git Reference refs/heads/master
8:41:40 AM: Starting build script
8:41:40 AM: Installing dependencies
8:41:41 AM: Started restoring cached node version
8:41:45 AM: Finished restoring cached node version
8:41:46 AM: v10.20.1 is already installed.
8:41:47 AM: Now using node v10.20.1 (npm v6.14.4)
8:41:47 AM: Attempting ruby version 2.6.2, read from environment
8:41:48 AM: Using ruby version 2.6.2
8:41:48 AM: Using PHP version 5.6
8:41:48 AM: Started restoring cached go cache
8:41:48 AM: Finished restoring cached go cache
8:41:48 AM: unset GOOS;
8:41:48 AM: unset GOARCH;
8:41:48 AM: export GOROOT='/opt/buildhome/.gimme/versions/go1.12.linux.amd64';
8:41:48 AM: export PATH="/opt/buildhome/.gimme/versions/go1.12.linux.amd64/bin:${PATH}";
8:41:48 AM: go version >&2;
8:41:48 AM: export GIMME_ENV='/opt/buildhome/.gimme/env/go1.12.linux.amd64.env';
8:41:48 AM: go version go1.12 linux/amd64
8:41:48 AM: Installing missing commands
8:41:48 AM: Verify run directory
8:41:48 AM: Executing user command: hugo
8:41:49 AM: Building sites …
8:41:49 AM: ERROR 2020/05/03 01:41:49 render of "taxonomyTerm" failed: "/opt/build/repo/layouts/tags/terms.html:15:25": execute of template failed: template: tags/terms.html:15:25: executing "main" at <.Page.Permalink>: can't evaluate field Page in type hugolib.OrderedTaxonomyEntry
8:41:49 AM: Total in 179 ms
8:41:49 AM: Error: Error building site: failed to render pages: render of "taxonomyTerm" failed: "/opt/build/repo/layouts/_default/terms.html:15:20": execute of template failed: template: _default/terms.html:15:20: executing "main" at <.Page.Permalink>: can't evaluate field Page in type hugolib.OrderedTaxonomyEntry
8:41:49 AM: Skipping functions preparation step: no functions directory set
8:41:49 AM: Caching artifacts
8:41:49 AM: Started saving pip cache
8:41:49 AM: Finished saving pip cache
8:41:49 AM: Started saving emacs cask dependencies
8:41:49 AM: Finished saving emacs cask dependencies
8:41:49 AM: Started saving maven dependencies
8:41:49 AM: Finished saving maven dependencies
8:41:49 AM: Started saving boot dependencies
8:41:49 AM: Finished saving boot dependencies
8:41:49 AM: Started saving go dependencies
8:41:49 AM: Finished saving go dependencies
8:41:49 AM: Error running command: Build script returned non-zero exit code: 255
8:41:49 AM: Failing build: Failed to build site
8:41:49 AM: failed during stage 'building site': Build script returned non-zero exit code: 255
8:41:49 AM: Finished processing build request in 14.990296865s

Deploy log after add netlify.toml

9:04:41 AM: Build ready to start
9:04:47 AM: build-image version: 2dbd444fcdce00cf06325060a8238d5ae3e86774
9:04:47 AM: build-image tag: v3.3.7
9:04:47 AM: buildbot version: d305548225ac57bb00eb5a596b0b8674e76a4681
9:04:47 AM: Fetching cached dependencies
9:04:47 AM: Starting to download cache of 119.5MB
9:04:48 AM: Finished downloading cache in 1.447053178s
9:04:48 AM: Starting to extract cache
9:04:53 AM: Finished extracting cache in 4.635581249s
9:04:53 AM: Finished fetching cache in 6.108181019s
9:04:53 AM: Starting to prepare the repo for build
9:04:53 AM: Preparing Git Reference refs/heads/master
9:04:54 AM: Found Netlify configuration file netlify.toml in site root
9:04:54 AM: Found Netlify configuration file(s). Overriding site configuration
9:04:54 AM: Different build command detected, going to use the one specified in the Netlify configuration file: 'hugo --gc --minify' versus 'hugo' in the Netlify UI
9:04:54 AM: Starting build script
9:04:54 AM: Installing dependencies
9:04:55 AM: Started restoring cached node version
9:04:59 AM: Finished restoring cached node version
9:04:59 AM: v10.20.1 is already installed.
9:05:00 AM: Now using node v10.20.1 (npm v6.14.4)
9:05:00 AM: Attempting ruby version 2.6.2, read from environment
9:05:01 AM: Using ruby version 2.6.2
9:05:02 AM: Using PHP version 5.6
9:05:02 AM: Installing Hugo 0.69.2
9:05:03 AM: Hugo Static Site Generator v0.69.2-EC9DCF30/extended linux/amd64 BuildDate: 2020-04-24T07:57:53Z
9:05:03 AM: Started restoring cached go cache
9:05:03 AM: Finished restoring cached go cache
9:05:03 AM: unset GOOS;
9:05:03 AM: unset GOARCH;
9:05:03 AM: export GOROOT='/opt/buildhome/.gimme/versions/go1.12.linux.amd64';
9:05:03 AM: export PATH="/opt/buildhome/.gimme/versions/go1.12.linux.amd64/bin:${PATH}";
9:05:03 AM: go version >&2;
9:05:03 AM: export GIMME_ENV='/opt/buildhome/.gimme/env/go1.12.linux.amd64.env';
9:05:03 AM: go version go1.12 linux/amd64
9:05:03 AM: Installing missing commands
9:05:03 AM: Verify run directory
9:05:03 AM: Executing user command: hugo --gc --minify
9:05:03 AM: Building sites …
9:05:03 AM:                   |
9:05:03 AM:  EN
9:05:03 AM: -
9:05:03 AM: ------------------+-----
9:05:03 AM: Pages            | 43
9:05:03 AM: Paginator pages  |  0
9:05:03 AM:   Non-page files   |
9:05:03 AM:  0
9:05:03 AM:   Static files     | 16
9:05:03 AM:   Processed images |
9:05:03 AM:  0
9:05:03 AM:   Aliases          |  1
9:05:03 AM:   Sitemaps         |  1
9:05:03 AM:   Cleaned          |  0
9:05:03 AM: Total in 244 ms
9:05:03 AM: Skipping functions preparation step: no functions directory set
9:05:03 AM: Caching artifacts
9:05:03 AM: Started saving pip cache
9:05:03 AM: Finished saving pip cache
9:05:03 AM: Started saving emacs cask dependencies
9:05:03 AM: Finished saving emacs cask dependencies
9:05:03 AM: Started saving maven dependencies
9:05:03 AM: Finished saving maven dependencies
9:05:03 AM: Started saving boot dependencies
9:05:03 AM: Finished saving boot dependencies
9:05:03 AM: Started saving go dependencies
9:05:03 AM: Finished saving go dependencies
9:05:03 AM: Build script success
9:05:03 AM: Starting to deploy site from 'public'
9:05:03 AM: Creating deploy tree 
9:05:04 AM: Creating deploy upload records
9:05:04 AM: 44 new files to upload
9:05:04 AM: 0 new functions to upload
9:05:05 AM: Starting post processing
9:05:09 AM: Post processing done
9:05:09 AM: Site is live
9:05:26 AM: Finished processing build request in 39.584859143s