Markdown with Elementor in WordPress

Markdown with Elementor in WordPress

Is it possible?

I’m studying if its possible to use markdown with WordPress pagebuilder Elementor. I got the idea when our Teacher Tero Karvinen was explaining the benefits of markdown. I’m using Elementor pagebuilder on this website and don’t want to change it. So this was a good time to try to mix both Elementor and markdown and at the same time learn to use Markdown in general. I’m writing this in Brackets 1.13 with the plugin Brackets Markdown Preview. I have live preview with html output.
Live preview
It works nicely.

WordPress plugins

Elementor is probably most powerful WordPress pagebuilder so I would like to be able to write my blogs with Markdown but use Elementor for page design. I’m starting my tests with plugin called WP Editor.md. It works great. It replaces the WordPress default text editor, you can easily paste pictures etc with it and it also has a live preview feature.
Wpmd editor preview
If you have ElementorPro it seems to work flawlessly. The page is generated with right elements, even the code blocks work but sadly, without code highlight.

/* CSS! */
.ninja {
 visibility: hidden;
}

It should look like this
I will write Elementor a feature request about it. Hopefully we get it soon.

Caveats

If you press the “Edit with Elementor” button you will get the dreaded Preview Could Not Be Loaded message. You need to go back to to the default editor and your whole file will be destroyed. All the text will be scrambled in the right side.

Markdown editor destroyed

Update: I found out with playing around that you don’t need to return the last revision. The markdown will be fixed if you just return to the normal text editor and press “save draft”. The Markdown will return as it was. So there is no risk to it. You just cant edit your post in Elementor afterwards.

Closing thoughts

I’m pretty impressed with Markdown and will be using it for foreseeable future. The only thing that bugs me right now is that what ever I do I didn’t get the reference links to work. Not in Brackets or in WordPress.

Update 2: There should be a line break after this. But Elementor dosent show it. Sadly thats a second missing piece.


Sources

Teachers Website and the Linux server course I’m on at the moment.http://terokarvinen.com/2018/aikataulu-%e2%80%93-linux-palvelimet-ict4tn021-3003-to-8-14-alkusyksy-2018p1-%e2%80%93-5-op#comment-24183
Other idea source for this blog. Did not use this plugin.https://www.youtube.com/watch?v=dRMow19g0VU

Most of my blogs will be released under GPLv3 including this one.

How to install LAMP STACK

LAMP stack is Linux Apache MariaDB PHP. (mariadb or mysql same thing) Everything needed to run a fully working website, a operating system, a server, a database and PHP. This will be a detailed tutorial how to get build your own LAMP stack securely. The first part LINUX we already have setup with the Digital Ocean droplet.

Setup: Digital Ocean droplet 1core, 1GB ram, Ubuntu 18.04

First things first when you install a new Linux distro is to run.

$ sudo apt update && sudo apt upgrade -y

It will update all your preinstalled apps etc. to the latest version. Now we have a clean state to start with. After that we install Apache2 and test its working. We are going to test every piece one by one so the errors are easy to manage and don’t pile up.

$ sudo apt install apache2 -y

Then we go to the ip and look if our server is already running. And yes, yes it is.

We are going to replace the default apache page because even when we are not using it many attackers will look specifically for it because it’s a sign of a brand-new webpage with potential vulnerability’s. With the command

$ echo "Default"|sudo tee /var/www/html/index.html

This will replace the default index.html content with just the world “Default”.

Next, we need to allow normal users to make websites and make a public_html

$ sudo a2enmod userdir

$ sudo systemctl restart apache2

$ cd; mkdir public_html; cd public_html

$ echo 'User created Apache works!'> index.php

Test it. Great! Apache works!

PHP

In production use you should never install more stuff than needed. The more stuff you install the more options you give to the attackers. So, we don’t install the whole PHP just the Apache and MariaDB dependencies. And again, normal users are not allowed to run PHP on their side, so we need to allow php run on user directory’s. Never run your server only as root.

$ sudo apt install libapache2-mod-php php-mysql -y

$ sudoedit /etc/apache2/mods-available/php7.2.conf # Choose the right php version and comment out ifmodule stanza to allow PHP in userdir

Now restart apache again
sudo systemctl restart apache2

Let’s create some php to test it out

cd; cd public_html; echo 'Php works if it says four > <?php print(2+2+"\n\n"); ?>'> index.php

Well done! Let’s go straight to last part MariaDB

MariaDB database

The database should never be allowed to access from the outside. So its best to turn on the firewall UFW on with minimal ports open. For LAMP only http, https and most likely SSH are the only ports needed to keep open. And only the TCP version we don’t need UDP

$ sudo ufw allow 22/tcp && sudo ufw allow 80/tcp && sudo ufw allow 443/tcp

Now turn on the UFW and check that its running.

$ sudo ufw enable && sudo ufw status

Sidenote UFW

I checked the command sudo ufw allow ssh && sudo ufw allow http && sudo ufw allow https makes also them only as TCP connections as show here

But if you put just the port number without the /tcp ending you will get both UDP and TCP allowed wich is bad.

Next, we install the actual mariadb

$ sudo apt install mariadb-client mariadb-server -y

and login straight away with

$ sudo mariadb -u root

Then we create a new Mariadb user and a database with the same name. Make a super strong password you don’t need to remember it. We will setup an autologin. Don’t just smash the keyboard with both hands that is not a random password.

$ CREATE DATABASE plants CHARACTER SET utf8;

$ GRANT ALL ON plants.* TO plants@localhost IDENTIFIED BY 'zxvj010jdg75z.-b!%G/&u';

Now exit Mariadb with

$ exit

And make the autologin with. The second command will restrict the use of the autologin file only to the current user and the third command will check it. It should look like this

$ cd; touch .my.cnf

$ chmod og-rwx .my.cnf

$ nano .my.cnf

$ nano .my.cnf

Add the following

[client]

user=”plants”

database=”plants”

password=”zxvj010jdg75z.-b!%G/&u”

Now try to login without your password as the newly created user

$ mariadb -u plants

Nice you get in! Let’s create some tables for our plants database.

$ USE plants;
$ CREATE TABLE plants (id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(1024), price FLOAT);

$ SHOW TABLES;

After that we should fill the table with something. For example

INSERT INTO plants(name, price) VALUES ("Willow", 1504.3);

INSERT INTO plants(name, price) VALUES ("Blueberry", 1153);

Check it with

SELECT * FROM plants;

Nice! Seems to be working.

Putting everything together

We grab the code from this and edit the “hats” to “plants” and put our own password in.

http://terokarvinen.com/2018/php-database-select-and-insert-example-php-pdo

“;

$pdoStatement=$pdo->prepare(“INSERT INTO plants (name) VALUES (:name)”);

$pdoStatement->bindParam(‘:name’, $name);

$pdoStatement->execute();

}

// list

$pdoStatement=$pdo->prepare(‘SELECT * FROM plants;’);

$pdoStatement->execute();

$hits=$pdoStatement->fetchAll();

foreach($hits as $row) {

echo “

“.$row[‘id’].” “.htmlentities($row[‘name’]).” price “.$row[‘price’].” rupees

\n”;

}

?>

Paste it in to the index.php with

$ cd; cd public_html; nano index.php

We See that it works almost. It will show the prices of the items we added manually but strangely it will not list prices of the items added with the form. I don’t know enough PHP and SQL so I could fix the problem.

But we now have a working LAMP stack with each part correctly talking to each other securely.

Sources:

This was also a school assignment, but I think this time the information is so useful I publish it also in my other section. Here is the assignment its “h5”.

http://terokarvinen.com/2018/aikataulu-%E2%80%93-linux-palvelimet-ict4tn021-3003-to-8-14-alkusyksy-2018p1-%E2%80%93-5-op

PHP test form: http://terokarvinen.com/2018/php-database-select-and-insert-example-php-pdo

NextcloudPi Samba vs Webdav speed

So this is a quick story for those who are interested about webdav vs samba in nextcloudPI (NCP).

Setup: Raspberrypi 3 with 32gb samsung evo microsdcard running NextcloudPi 13.0.6

I wanted to see all files on my nextcloud even if I have not synced them up in the windows client. I dont know why they have not implemented samba like feature in the client yet. First I tried webdav it worked wonderully when you first find out that you just need to copy the link in your nextcloud files screen settings. And at a windows network folder with that link.

 

My second problem was that apparently windows 10 has  webdav file limit of 50MB really… microsoft really… so I couldnt stream videos over it. I did get it to work with some regedits. But then I tried to move files to my Nextcloud. This happened.

 

My webdav connection speed was 2MBps I was in shock thats unaccepatble so I tried te samba share option in NCP extras. I dont know if there are any other ways to add samba on windows but i just wrote in the file expolrer adressbar “\\raspberry_local_ip. Logged in with samba password and look at that! transferspeed maxedout the 100mbps in my router and raspberrypi.

It was no different to use than any other folder.

Problems with samba

Samba seems to have some limitations. Its not encrypted so its only safe to use in an secure home network. At the moment it dosent pose any risk for my setup because I have turned wifi off in my router and use it more as a switch.  ou can log in only as one user and you dont see your shared items. I use an admin group folder nextcloud app. to share pictures and movies with the whole family but if Im logged in with that I cant use my own files. But after pondering around I only need to have remote access to our pictures those I dont care to have on my pc :P. My own workfiles are allowed to reside on my PC localy.

Yes the pictures are small it was an afterthoguth to make this blog so I grabbed the pictures from my whatsapp messages. Sorry about that.

Is the webdav so slow because of its encryption? Or is it just a bad protocol for this? Or is it not running the connection localy? I dont know. Let me know if you know more.

Own server on DigitalOcean

15.9.2018 10.59

Make an account on https://www.digitalocean.com/ (or use google account). Sign in and go straight to “Droplets” in the sidebar.

Here choose the newest LTS version of Ubunutu. Which is at the time of writing 18.04. Take the smallest packet with 1GB of ram and 5$/month.

If you are not doing a real server for use just skip backups and block storage. They will cost extra. Take the closest server to you or your customers. We don’t need additional options for this one. You can add them later if you need.

SSH keys should be created for maximum security. You can make them on windows with Puttygen https://putty.org/. When generating keys move your mouse around to make a cryptographic key. Save the public and private key with a password. Paste the publickey string to Digitalocean SSH keys. After that just choose a host name if you like and click create

Then open the actual putty program (not puttygen). In putty put your droplet IP in the first screen.

Putting login as root in putty connections/data

And give the private SSH key. In connections/ssh/auth

Then just clicked open and were in! (or give the ssh decryption password if needed). After logging in you should make a new sudo user and lock the root user.

$ sudo adduser Akseli

$ sudo adduser Akseli sudo

$ sudo adduser Akseli admin

$ sudo adduser Akseli adm

And to disable the root user put like told in https://help.ubuntu.com/14.04/serverguide/user-management.html

$ sudo passwd -l root

 

Side note ssh user?

16.9.2018 12.16

Now that the root password is locked I tried to go in with newly created “Akseli” user but putty said that ssh key refused. So I tried root again and it let me in. I guess that you can still sign in with root with ssh key? I’m not sure how to sign in now with Akseli using only ssh. So in this blog we will just change the user to Akseli with “$ su Akseli”

Installing firewall and update

To update everything to the latest version run and enable firewall

$ sudo apt update && sudo apt upgrade -y

$ sudo ufw enable

Then we need to open ports for SSH and apache webserver with sudo ufw allow (you can also use “ssh”, “http” instead of numbers.

$ sudo ufw allow 22

$ sudo ufw allow 80

$ sudo ufw enable

Installing Apache

Just

$ sudo apt install apache2 -y

Make public_html folder in your home folder. (not in root user)

$ mkdir public_html

Enable user folders in Apache

$ sudo a2enmod userdir

Change the default website folder to your own folder you just created with

$ sudoedit /etc/apache2/sites-available 000-defaut____ (press tab to to choose the right file)

And restart apache with

$ systemctl restart apache2

Side note 2 users?

I wrote systemctl restart apache2 and this happened

Adding domain to your server

We use free subdomains on https://freedns.afraid.org. just log in go to subdomains section add the name you want and paste your server Ip in it. Easy as that.

Now our server answers from http://firstwebsite.chickenkiller.com/ And also on http://copy.chickenkiller.com/

ATTACKS ATTACKS ATTACKS!

If you go in to syslogs in var/log/syslog you see your precious little apache server gets attacked almost immediately. You can checkout where the originate from with https://www.geoiptool.com/

Adding letsencrypt SSL to the website

17.9.2018 14.11

I’m following the tutorial on https://certbot.eff.org/lets-encrypt/ubuntubionic-apache for the certbot letsencrypt automation and renewal.

$ sudo apt-get update

$ sudo apt-get install software-properties-common

$ sudo add-apt-repository ppa:certbot/certbot

$ sudo apt-get update

$ sudo apt-get install python-certbot-apache

$ sudo certbot --apache

After the last command it will ask you questions like your email and what is your domain you want to put the ssl certificate on.

After that we need to go back to the firewall to open the https port 443 with

$ sudo ufw allow https

$ sudo ufw enable

For automatic letsencrypt renewals you should run

$ sudo certbot renew --dry-run

Now we have domains pointing to the same website and the https://copy.chickenkiller.com/ has forced encryption enabled and http://firstwebsite.chickenkiller.com/ doesn’t have HTTPS support at all.

 

Sources:

Assignment: http://terokarvinen.com/2017/aikataulu-%e2%80%93-linux-palvelimet-ict4tn021-7-ti-ja-6-to-alkukevat-2018-5-op I did assignment parts a)-i) and N)

Hosting site: https://www.digitalocean.com/

Putty: https://putty.org/

Lock root user: https://help.ubuntu.com/14.04/serverguide/user-management.html

Free (sub)domain: https://freedns.afraid.org

GeoIP: https://www.geoiptool.com/

Letsencrypt: https://certbot.eff.org/lets-encrypt/ubuntubionic-apache

Installing Apache and getting logs

Installing Apache and getting logs

9.9.2018 11.20

Setup: Ryzen 1600, Gtx 1060, Xubuntu 18.04

First run

$ sudo apt update && sudo apt upgrade

then

$ sudo apt install apache2

After that write “localhost” in your web browser

Lets make a website that the user can edit. First we need to make a directory “public_html” in your home folder.

$ mkdir public_html

Then we grab a bootstrap skeleton for our website https://getbootstrap.com/docs/4.1/getting-started/introduction/ copy paste the starter templateto your public_html directory nano file in

$ nano index.php

you can not see anything in your browser yet. You need to activate user public_html in apache2 first. with

$ sudo a2enmod userdir

restart of apache is needed with

$ sudo service apache2 restart

Tadaa! Your website is up

Getting some logs

lets try to get some logs in the var/log/apache2   Tail the error.log

$ tail -F access.log

write something random after your normal website for example

And you will get an error log   404 means “Not Found”  503 is “Service Unavailable”

A code 200 “OK” you get easily with just opening your own website.   I don’t know what that 1492 means.

Simple PHP form

Let’s copy the form from https://secure.php.net/manual/en/tutorial.forms.php

to your index.php with

$ nano index.php

Then copy the

in to a new php file called action.php

$ sudo nano action.php

It will ask your name and age and tell them back to you. Pretty simple right?

Changing the DocumentRoot

9.9.2018 18.23 

Edit the 000-default.config file with

$ sudo nano /etc/apache2/sites-available/000-default.config

Change he DocumentRoot to your liking. and restart the apache service

$ sudo service apache2 restart

Now your localhost points to your home public_html

Sources

http status codes https://en.wikipedia.org/wiki/List_of_HTTP_status_codes

bootsrap skeleton https://getbootstrap.com/docs/4.1/getting-started/introduction/

PHP form https://secure.php.net/manual/en/tutorial.forms.php

apache restart https://www.youtube.com/watch?v=qw95e7eWZEw

Logging Basics

9/2/2018 11:03 AM

Linux Mint 19 Tara Cinnamon edition

Ryzen 1600

Gtx 1060

Here we do one successful thing that is logged and one unsuccessful log.

I have 2 Terminal windows open with one in /var/log and the other in whatever I need to do.

I installed drawing app named scribus with command.

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
$ apt install scribus

In /var/log/apt/history.log I wrote

In the log file was stored all the info what dependencies etc was installed. For example “python.tk:amd64” was installed and a many more. I Guess that the “automatic” means that it was installed because I installed Scribus.

Becoming ROOT

I was now tailing the /var/log/auth.log with command.

$ tail -f auth.log

Wrote in the other Terminal su

and it asked me for password and I wrote it wrong.

And the auth.log saved this

It tells that the used Akseli tried to become root with “su” command. It called the function pam_authenticate that is used in linux to authenticate users. But it ended up in failure as expected.

https://linux.die.net/man/3/pam_authenticate

/dev/pts/1 akseli:root

Seems to be a log that tells the su request came from terminal window 1.

https://www.unix.com/unix-for-dummies-questions-and-answers/8223-what-dev-pts-1-a.html

Making your dream apt command

9/2/2018 11:20 AM

Fish is and very good Bash alternative what I like to use so my dream apt command will be

$ apt install fish

Try out 3 new Linux programs

By installing them with command line 9/2/2018 11:24 AM

I already installed Scribus its somekind of publishing program, but I didn’t find it very intuitive. But seems to work. Not much else to report.

$ apt install cowsay

A talking terminal cow. Funny toy

The last one I searched out with the apt search command

$ apt install gnome-mahjongg
 
and installed gnome-mahjongg

It Works!

All the time the tail -f auth.log was running and I became root many times it showed also why I became root showing the command.

9/2/2018 11:53 AM

Sources:

featured image http://pngimg.com/download/27022

pam_authenticate: https://linux.die.net/man/3/pam_authenticate

/dev/pts/1:

https://www.unix.com/unix-for-dummies-questions-and-answers/8223-what-dev-pts-1-a.html

a) Aiheuta lokiin kaksi eri tapahtumaa: yksi esimerkki onnistuneesta ja yksi esimerkki epäonnistuneesta tai kielletystä toimenpiteestä. Analysoi rivit yksityiskohtaisesti.

b) Vapaaehtoinen kohta, ei ole opetettu vielä: Asenna SSH-demoni. Kokeile omalla ssh-palvelimellasi jotain seuraavista: ssh-copy-id, sshfs, scp tai git. (Helpoin lienee scp: ‘scp foo.txt tero@example.com:’)

c) Tee unelmien apt-get -komento: yksi komentorivi, joka asentaa suosikkiohjelmasi.

d) Asenna komentokehotteen paketinhallinnasta kolme itsellesi uutta komentorivillä toimivaa ohjelmaa. Kokeile kutakin ohjelmaa sen pääasiallisessa käyttötarkoituksessa.

e) Opettele ulkoa ja harjoittele tärkeimmät komennot (tätä “opettele ulkoa” alakohtaa ei tarvitse raportoida):

http://terokarvinen.com/2009/command-line-basics-4

http://terokarvinen.com/2008/commands-for-admin-4