Build Your Private Markdown Note by Vagrant + Docker + HackMd in Just A Few Minutes

I always think about how to blog efficiently, quickly and easily. Even if I just started a new blog. WordPress is the greatest blogging software and do have many features I like, but it's too slow while uploading images and posting article for me.

Real-time preview is the feature I concern the most, and HackMd is doing a good job for that. So I decide to use HackMd to write my blog articles, then copy-paste to my WordPress blog (with some useful Markdown plugins installed).

HackMd Screenshot:

The images in my articles will be uploaded to imgur automatically so I don't worry about the backup anymore. For example, this image is hosted on imgur, not hosted on my Web Server.

Prerequisites

• Basic linux command line knowledge.
• Install VirtualBox on your machine.
• Install Vagrant on your machine.

Steps

Assume you already have VirtualBox and Vagrant installed on your machine.

1. Start Vagrant machine

Change the current working directory to where the vagrantfile is located. In this tutorial, the directory is /terryl-example/vagrant.

terryl-example/
├── data/             - Synced folder on the host machine to the guest machine.
└── vagrant/          - Vargrant working folder.
    └── Vagrantfile

Vargrantfile example:

Vagrant.configure("2") do |config|
  config.vm.box = "ubuntu/bionic64"
  config.vm.box_check_update = false
  config.vm.hostname = "example.terryl.in"
  config.vm.network "private_network", ip: "192.168.12.34"
  config.vm.synced_folder "../data", "/data"
  config.vm.provider "virtualbox" do |vb|
     vb.memory = "1024"
     vb.name = "terryl.in - example"
  end
end

This example uses 192.168.12.34 for the primary address.
Start the Vagrant machine by the following command.

vagrant up

2. Login to Vagrant machine

Log in to Vagrant machine.

vagrant ssh

Change user from vagrant to root.

sudo su

3. Install Docker and Docker-compose

apt-get update
apt-get install docker
apt-get install docker-compose -y

4. Clone HackMd repository

HackMD team provides a Docker image here.

cd /home
git clone https://github.com/hackmdio/codimd-container.git

This command will create an folder codimd-container inside /home folder.

5. Start HackMd docker container

cd codimd-container
docker-compose up

Once the docker container is running, you will see the screen such as below.

Now you can start using HackMd by accessing 192.168.12.34:30000.

Backup

If you would like to backup your data, open a new terminal while the Docker container is running, use the commands below :

Backup database

docker-compose exec database pg_dump hackmd -U hackmd  > backup.sql

Restore database

Restore data from a backup file:

cat backup.sql | docker exec -i $(docker-compose ps -q database) psql -U hackmd

Video

https://youtu.be/n20tiqqBxOU

Timeline

1. Start Vagrant machine
   • 0:23 - vagrant up
2. Login to Vagrant machine
   • 2:21 - vagrant ssh
   • 2:23 - sudo su
3. Install Docker and Docker-compose
   • 2:42 - apt-get update
   • 5:03 - apt-get install docker
   • 5:17 - apt-get install docker-compose
4. Clone HackMd repository
   • 9:08 - cd /home
   • 9:20 - git clone https://github.com/hackmdio/codimd-container.git
5. Start HackMd docker container
   • 9:31 - cd codimd-container
   • 9:34 - docker-compose up

Cheers.

Conclusion

After I wrote this article a few days, I still thought this way is still not so comfortable also a bit wasting time. I ended up to create a Markdown Editor plugin on WordPress for myself. But not just for myself. I released it as an open source project under GNU license, anyone can use it for free forever.

If you are using WordPress, search Githuber MD to find it. I hope you will like it.