Content-Management-System on Janik von Rotz

Hugo Soundcloud shortcode

Mon, 09 Jul 2018 16:52:17 +0200

The Hugo templating system is very flexible. Even when markdown falls short you can add simple snippets inside the content files. Hugo created shortcodes to circumvent the limitations. For my blog I have create a custom shortcode for embeding Soundcloud playlists into my markdown posts. Creating custom shortcodes is very easy. I will show you how it is done and moreover provide a tool to convert existing Soundcloud set urls into the custom Soundcloud shortcode.

Create a Souncloud shortcode

Creating new shortcodes is as metioned very in easy.

This is an example for the Soundcloud playlist shortcode.

Create a new file /layouts/shortcodes/soundcloud.html with this content:

<iframe 
    width="100%"
    height="450"
    scrolling="no"
    frameborder="no"
    allow="autoplay"
    src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/{{ index .Params 0 }}&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"
></iframe>

If this file exists, you can use it as a shortcode in your posts and pages:

{{< soundcloud 8924360 >}}

The parameter is a Soundcloud set id, which can be extracted from the embed options in the Soundcloud browser UI.

Convert Soundcloud set links to Hugo shortcodes

If you have existing Soundcloud links and would like to convert them into shortcodes, follow these steps:

Login into your Soundcloud account.
Register a new Soundcloud app.
Store the client id of the app.
Replace the variable _CLIENT_ID_ and _SOUNDCLOUD_USERNAME_ in the script below.
Install the json command line tool jq.
Run the script in the posts folder.

selector="*.md"
username="_SOUNDCLOUD_USERNAME_"
clientId="_CLIENT_ID_"

# loop through all files that match the selector
for filename in $selector; do

    echo "Processing: $filename"

    soundcloudUrl=$(grep -oP "^https?://soundcloud.com/$username/sets/[^\s]+" $filename)

    if [[  $soundcloudUrl ]] ; then
    
        echo "Retrieve playlist id for: $soundcloudUrl"
        playlistId=$(curl -L "http://api.soundcloud.com/resolve?url=$soundcloudUrl&client_id=$clientId" | jq -r '.id')

        echo "Got playlist id: $playlistId"

        sed -i "s,${soundcloudUrl},{{< soundcloud ${playlistId} >}},g" $filename
    fi
done

Enjoy your Soundcloud 🎵

Another Wordpress to Hugo migration

Sun, 08 Jul 2018 09:11:28 +0000

Using Wordpress to run this blog has become an overkill. It was time to change. Static site generators, no database content management systems and JavaScript based tools make Wordpress an deprecated blogging platform. I had the idea of moving away from Wordpress for a while and decided to take a chance two weeks ago. This post is about the migration process and the design decisions made in preparation of the migration.

From the title you can tell that I chose Hugo as my next CMS, but why Hugo? First of all, I only have had a look at Jekyll and Hugo. Jekyll is written in ruby and Hugo in go. To make it short and simple, Hugo does whatever Jekyll does, but based on newer technologies and a lot faster. And also remember it doesn’t really matter. Both Hugo and Jekyll use markdown files and have almost the same format to store posts and data. So no big difference except speed.

To be shure it is worth the shot to move away from Wordpress, I came up with a few pro and counter arguments.

Why move a away from Wordpress?

I do not want my markdown blog posts in a database.
My blog was heavy integrated into the wordpress ecosystem. Too heavy in my opinion.
I would like to have the advantages of a static site generator (git, files only, markdown, …).
Running Wordpress has heavy dependencies (php, mysql, nginx, …).

What do I have to consider when ditching Wordpress?

How can I migrate comments?
How does the new platform manage media files?
How can I convert the Wordpress shortcodes?
What am I gonna do with the mail subscriber list, contact form and other Wordpress features?
Is the migration a one-way-ticket to another platform?

In the end, these were only questions that to be answered and they have definitely already been answered by somebody else.

In the next sections I will pretend to do a Wordpress-to-Hugo-migration and guide you through to process.

Export Wordpress Data

Every migration begins with an export of the source data. To export data from Wordpress we will use the jekyll-exporter plugin. As the file format is very similar to Hugos, we can use this exporter to create the Hugo site.

Once the exporter plugin is installed on the Wordpress site, open a shell on the server and navigate to the jekyll-exporter plugin directory. Then run php jekyll-export-cli.php > ~/export.zip.

We run the export command from command line, because if run the export from the Wordpress admin page, you’ll probably receive a timeout error .

Once the file has been exported, download and unzip it.

Setup Hugo

Next we are going to set up the new Hugo site. For this of course you need to install Hugo. IF done open your shell and enter these commands:

hugo new site _SITE_NAME_
git submodule add https://github.com/jrutheiser/hugo-lithium-theme themes/lithium
hugo serve

We now have running a Hugo site with the lithium theme. Easy wasn’t it?

However, as there is nothing to show yet, Hugo will return a blank page.

Update the parameters in the config.toml file to finish the installation. Set the following attributes:

baseURL = "https://janikvonrotz.ch"
languageCode = "en-us"
title = "Janik von Rotz"
description = "Curious, Dedicated, Humble" 
theme = "hugo-lithium-theme"

I recommend to commit every change, when finishing a section from now on.

Migration

In this section we are going through the steps it took to migrate the Wordpress content to Hugo.

Let’s get started with the most important files - the post files.

Posts

From the Jekyll export I copied all them markdown files from the _posts folder to _SITE_NAME_/content/post.

In order to preserve the Wordpress link structure /YYYY/MM/DD/_SLUG_/, you have to define a permalink structure in Hugo. This is a common use case:

config.toml

[permalinks]
  post = "/:year/:month/:day/:title/"
  page = "/:title/"

It is important to preserve the link structure, otherwise it will break referrers links pointing to your site.

Pages

Migrating pages is very simple. Copy the page markdown files to hugo-site/content/page and you are done.

The navigation structure can be configured universally in Hugo.

Use the toml config below to define the navigation menu.

[menu]

  [[menu.main]]
    name = "Home"
    url = "/"
    weight = 1

  [[menu.main]]
    name = "Projects"
    url = "/projects/"
    weight = 2

  [[menu.main]]
    name = "Downloads"
    url = "/downloads/"
    weight = 3

  [[menu.main]]
    name = "Curriculum Vitae"
    url = "/cv/"
    weight = 4

  [[menu.main]]
    name = "Contact"
    url = "/contact/"
    weight = 5

Obviously I expect you to adapt my examples according to your use case.

Encoded Characters

Some character might haven been encoded during the export process. They can be searched and replaced conveniently with the sed command from you shell:

selector="*.md"

# &lt; -> <
sed -i 's/&lt;/</g' $selector
# &gt; -> >
sed -i 's/&gt;/>/g' $selector
# &quot; -> "
sed -i 's/&quot;/"/g' $selector
# &amp; -> &
sed -i 's/\&amp;/\&/g' $selector
# &#8211; -> -
sed -i 's/&#8211;/-/g' $selector
# &#8217; -> ’
sed -i 's/&#8217;/’/g' $selector
# &#039; -> ’ (get rid of ')
sed -i "s/&#039;/’/g" $selector
# &#8230; -> … 
sed -i "s/&#8230;/…/g" $selector
# &#8222; -> „
sed -i "s/&#8222;/„/g" $selector
# &#8220; -> "
sed -i 's/&#8220;/"/g' $selector
# &#038; -> &
sed -i 's/&#038;/\&/g' $selector

2019-06-12 Edit: Add new special characters.

Contact Form

Wordpress shortcodes allow you to embed plugins or enriched content in posts and pages. Some shortcodes have to be removed as Hugo does not understand them.

Below is the shortcode for my contact form:

[contact-form to='contact@janikvonrotz.ch' subject='janikvonrotz.ch - contact form']
[contact-field label='Name' type='text' required='1'/]
[contact-field label='Email Adresse' type='email' required='1'/]
[contact-field label='Betreff' type='text'/]
[contact-field label='Nachricht' type='textarea'/]
[/contact-form]

As there is no Hugo server (only static files) that forward mail messages submitted by a contact form, I have to decided to get rid of the form entirely.

If you really need a contact form, I recommend to opt for Formspree.

Code Fences

Wordpress uses shortcodes to separate code from the post content. With the script below you can search and replace Wordpress code blocks with markdown code fences.

selector="*.md"

# [code] -> ```
sed -i 's;\[code\];```;g' $selector
# [/code] -> ```
sed -i 's;\[\/code\];```;g' $selector
# <pre><code> -> ```
sed -i 's;<pre><code>;```;g' $selector
# </code></pre> -> ```
sed -i 's;</code></pre>;```;g' $selector

# [code lang="text"][code lang=text][code language="bash"][code lang="sql"]
# [code lang="css"][code lang=css][code lang="text"][code lang=text]
# [code lang="php"][code lang="html"][code lang="java"][code lang="xml"]
# [code lang="js"][code lang="powershell"]
# [code language="powershell"] -> ```_LANGUAGE_KEY_
sed -i -r 's;\[code (lang|language)="?([a-z]+)"?\];```\2;g'  $selector

# [code lang="shell"] -> ```bash
sed -i 's;\[code lang="shell"\];```bash;g' $selector
# [code language="shell"] -> ```bash
sed -i 's;\[code language="shell"\];```bash;g' $selector

# [code lang="javascript"] -> ```js
sed -i 's;\[code lang="javascript"\];```js;g' $selector
# [code language="javascript"] -> ```js
sed -i 's;\[code language="javascript"\];```js;g' $selector

# [code lang="ps"] -> ```powershell
sed -i 's;\[code lang="ps"\];```powershell;g' $selector
# [code language="ps"] -> ```powershell
sed -i 's;\[code language="ps"\];```ps;g' $selector
# [code lang="ps" highlight="1,3"] -> ```powershell
sed -i 's;\[code lang="ps"\ .*];```powershell;g' $selector

# <code> -> `
sed -i 's;<code>;`;g' $selector
# </code> -> `
sed -i 's;</code>;`;g' $selector

Syntax highlighting for code fences is disabled by default. Enable it by setting pygmentsCodeFences = "true" in your config.toml file.

Shortcodes

If you want to embed content in markdown, you have to use an iframe. Having html tags in a markdown file is not very cool. That is way Hugo provides its own shortcodes. The bash commands below helps converting Wordpress shortcodes to Hugo shortcodes.

selector="*.md"

# [caption ...]<img src="..." alt="..." ... /> ...[/caption] -> {{< figure src="..." title="..." >}}
sed -i -r 's;\[caption .*\].*<img src="([^"]*)" .* />\s+(.*)\[/caption\];{{< figure src="\1" title="\2" >}};g' $selector

# [caption ...]<a href="..." ...><img src="..." alt="" ... /></a>...[/caption] -> {{< figure src="..." title="..." >}}
sed -i -r 's;\[caption .*\].*<img src="([^"]*)".*<\/a>\s+(.*)\[/caption\];{{< figure src="\1" title="\2" >}};g' $selector

# https://vimeo.com/64762621 -> {{< vimeo _ID9_ >}}
sed -i -r 's;^https?\:\/\/vimeo.com\/(.{9});{{< vimeo \1 >}};g' $selector

# https://vimeo.com/64762621 -> {{< vimeo _ID8_ >}}
sed -i -r 's;^https?\:\/\/vimeo.com\/(.{8});{{< vimeo \1 >}};g' $selector

# http://www.youtube.com/watch?v=_ID_ -> {{< youtube _ID_ >}}
sed -i -r 's;^(https?://)?(www\.youtube\.com)\/watch\?v=(.{11});{{< youtube \3 >}};g' $selector

# [video width="1280" height="716" mp4="..."][/video] -> <video width="1280" height="720" controls><source src="..." type="video/mp4">...</video>
sed -i -r 's;\[video width="(.+)" height="(.+)" (webm|mp4)="([^"]+)"\]\[\/video\];<video width="\1" height="\2" controls><source src="\4" type="video\/\3">Your browser does not support the video tag.</video>;g' $selector

# https://vimeo.com/64762621 -> {{< instagram  _ID8_ >}}
sed -i -r 's;^https?\:\/\/vimeo.com\/(.{8});{{< instagram  \1 >}};g' $selector

# <iframe width="560" height="315" src="https://www.youtube.com/embed/_ID_" frameborder="0" allowfullscreen></iframe> -> {{< youtube _ID_ >}}
sed -i -r 's;<iframe.+youtube.com\/embed\/([^"]+)".+\/iframe>;{{< youtube  \1 >}};g' $selector

2019-06-12 Edit: Add youtube iframe converter.

Media

The Wordpress media manager is probably the biggest loss when switching to Hugo. You have to manage cropped images and other assets manually in Hugo.

Copy the wp-content folder to hugo-site/static/. Files in this folder will be available in the root path.

Optionally you can set a relative base path for the asset urls and convert a and img tags to its markdown syntax:

selector="*.md"

# https://janikvonrotz.ch/wp-content/uploads/ -> /wp-content/uploads/
sed -i 's;https:\/\/janikvonrotz.ch\/wp-content\/uploads\/;\/wp-content\/uploads\/;g' $selector

# <img src="..." alt="..." ... /> -> ![...](...)
sed -i -r 's;<img src="([^"]+)" alt="([^"]+)"[^\/]+\/>;!\[\2\]\(\1\);g' $selector
sed -i -r 's;<img src="([^"]+)" alt=""[^\/]+\/>;!\[Untitled]\(\1\);g' $selector
sed -i -r 's;<img class.+alt="([^"]+)" src="([^"]+)"[^\/]+\/>;!\[\1]\(\2\);g' $selector
sed -i -r 's;<img class.+src="([^"]+)".+alt="([^"]+)"[^\/]+\/>;!\[\2]\(\1\);g' $selector

# <a href="...">...</a> -> [...](...)
sed -i -r 's;^<a href="([^"]+)">(.+)<\/a>;\[\2\]\(\1\);g' $selector
sed -i -r 's;^<a href="([^"]+)" rel=".+">(.+)<\/a>;\[\2\]\(\1\);g' $selector

# http://janikvonrotz.ch to https://janikvonrotz.ch
sed -i -r 's;http:\/\/janikvonrotz.ch;https:\/\/janikvonrotz.ch;g' $selector

Comments

We face the same problem with comments as we do with the mail contact form. There is no server logic available to process comments. Thus we have to use a JavaScipt based solution.

I recommend to use JustComments. If this does not work for you, there is still Disqus.

Both services will provide JavaScript code which can be added to the Hugo footer template file.

I’ve decided to use Disqus. They make it quite it easy to import the comments from Wordpress into their platform.

Hugo provides internal templates for the most common use cases for static websites. There is a Disqus template that can be enabled by setting the disqusShortname = "_DISQUS_ID_" parameter.

Helpers

While exploring the ways of migrating my content, I’ve built and discarded various scripts and commands. In this section you’ll find scripts that could be useful in dealing with other migration problems.

Split-PostFilesByDate.sh

Copies the posts into date separated folders.

selector="*.md"

# loop through all files that match the selector
for filename in $selector; do

    echo "Processing: $filename"

    # split file name into array by the minus delimiter
    IFS='-' read -r -a array <<< "$filename"

    # check if first element of array is a number
    re='^[0-9]+$'
    if [[ ${array[0]} =~ $re ]] ; then
       
        directory=${array[0]}/${array[1]}/${array[2]}

        # create a subfolder for the year, month and date
        echo "Create directory: $directory"
        mkdir -p "$directory"

        # create new filename
        newfilename=$(echo $filename | cut -c12-999)
        
        # move the file
        echo "Move file to new directory and name it: $newfilename"
        mv $filename  "$directory/$newfilename"
    fi
done

Convert-PermalinkToSlug.sh

Create Hugo slug from Jekyll permalink.

selector="*.md"

# permalink: /2017/08/06/js-snippet-set-tallest-height-on-siblings/ -> slug: js-snippet-set-tallest-height-on-siblings
sed -i -r 's;permalink: /[0-9]{4}/[0-9]{2}/[0-9]{2}/([^/]+)/;slug: \1;g' $selector

Metadata Cleanup

The jekyll export posts and pages contain metadata that is not required for hugo. Below are the commands to get rid of the unsupported metadata.

selector="*.md"

# remove id property 
sed -i '/^id: .*/d' $selector

# remove layout property
sed -i '/^layout: .*/d' $selector

# remove guid property
sed -i '/^guid: .*/d' $selector

# remove disqus id property
sed -i '/^dsq_thread_id:/d' $selector
sed -i '/  - \"[0-9]\{10\}\"/d' $selector

Not Covered

To get the site up and running I had to fix quite a lot of stuff. Here is a list of thing I did not cover in this guide:

Rename some page titles equal to their file name
Convert shortcodes that could not be regexed
Delete posts
Fix posts
Copy Wordpress post drafts manually

In addition there are problems for which I have not found a suitable solution yet:

IFTTT migration
Broken link checker
Soundcloud shortcode
Search function
Theme customization
Jetpack mailing lists
Featured post images

But I’m definitely going to tackle them in the near future.

Conclusion

The preparation and execution of this Wordpress migration took me a while. Around 20 hours I assume. Not only I’ve learned about regex and its flavors, but also about about the common use cases for static websites. I’m glad the migration worked out well. There are still a lot things I have to work out, but I assume this is a good start.

Thanks your Wordpress for the good times 👍

Add Piwik tracking code to your Koken site

Wed, 19 Aug 2015 08:38:41 +0000

Sadly there’s no native Piwik plugin for the Koken photography CMS. However you can use another plugin the inject the tracking code to the footer of your site.

Install the HTML Injector plugin (Site > Settings > Plugin > Download Plugins).
Enable the plugin (Site > Settings > Plugin > HTML injector > Enable).
Setup the plugin (Site > Settings > Plugin > HTML injector > Setup).
Copy the tracking code of your Piwik site (Piwik > Administration > Websites > [site] > View Tracking code).
Paste the code into the footer field and save it.

Well done, your visitors are tracked now.

Source

lars-mielke.de - Piwik Integration in Koken

WordPress checklist

Fri, 05 Jun 2015 06:54:03 +0000

Simple todo list for new WordPress websites. I’ll use it whenever I have to setup a new WordPress site. You’re welcome to contribute: https://codeberg.org/janikvonrotz/wordpress-checklist

WordPress installation

Install Wordpess
- Change admin username
- Store password
- Set mail: hostmaster@example.com
Add template and delete unused templates
Disable pingbacks and trackbacks (uncheck Allow link notifications from other blogs)
Update Perma Link Structure to day and anme: /%year%/%monthnum%/%day%/%postname%/
Update site info
- title
- description
Update administrator
- First and lastname
- Disable visual editor
Add customer user
- username: firstnamelastname
- login@example.com
Delete default content
- page
- post
- comments
- default plugins
Add example content (see below)

Plugins

Install and configure plugins
- SyntaxHighlighter Evolved
- Disqus Comment System
  - Enable disqus comments
  - Register the website
  - Enable guest commenting on disqus admin page
- BackUpWordPress
  - Daily 7 times at 9 o’clock
  - Weekly 2 times at 10 o’clock
- WP-Piwik
  - Add Piwik url
  - Add tracking code
- Jetpack by WordPress.com
  - Login with Wordpress.com Account
  - Add Markdown support
  - Enable Website-Symbol and add favicon
  - Enable Monitor
  - Enable Manage
- Image Captcha
  - Enable for add comments
- oEmbed Gist
- Sugar Events Calendar Lite
- oEmbed Instagram
- Enable Media Replace
Install and configure optional plugins
- Widgets on Pages
- qTranslate Plus

Example content

# This is sample content 
 
Lorem ipsum dolor sit amet, mel no prima tation adolescens, at has numquam elaboraret, duo ex detraxit sensibus. Audire albucius corrumpit et per, ea mel nonumy audiam verterem. Nam ad illud movet causae, mel an nostrud efficiantur. No vis tota adolescens adipiscing. Sint eloquentiam reprehendunt quo ut, cu quo feugiat fierent gloriatur. 
 
## Instagram Post 
 
http:///instagram.com/p/vNalF-BKk6/ 
 
http:///instagram.com/p/yohLKDRAxi/ 
 
## GitHub Gist code 
https:///gist.github.com/janikvonrotz/11531335 
 
## Syntax Highlighter 
```javascript
/** 
 * IEMobile responsive fix 
 */ 
 
if (navigator.userAgent.match(/IEMobile/10.0/)) { 
    var msViewportStyle = document.createElement("style"); 
    msViewportStyle.appendChild( 
        document.createTextNode( 
            "@-ms-viewport{width:auto!important}" 
        ) 
    ); 
    document.getElementsByTagName("head")[0]. 
        appendChild(msViewportStyle); 
}

Create WordPress admin user with sql only

Tue, 24 Mar 2015 17:54:28 +0000

If you don’t have access to you WordPress website anymore, but still can update the MySQL database. You can easily add a new admin user with this sql script:

USE <database>;
 
SET @username = '<username>';
SET @password = MD5('<password>');
SET @fullname = '<Firstname Lastname>';
SET @email = '<login@example.com>';
SET @url = '<http://example.com/>';
 
INSERT INTO `wp_users` (`user_login`, `user_pass`, `user_nicename`, `user_email`, `user_url`, `user_registered`, `user_status`, `display_name`) VALUES (@username, @password, @fullname, @email, @url, NOW(), '0', @fullname);
 
SET @userid = LAST_INSERT_ID();
INSERT INTO `wp_usermeta` (`user_id`, `meta_key`, `meta_value`) VALUES (@userid, 'wp_capabilities', 'a:1:{s:13:"administrator";s:1:"1";}');
INSERT INTO `wp_usermeta` (`user_id`, `meta_key`, `meta_value`) VALUES (@userid, 'wp_user_level', '10');

Get the latest version of this snippet here: https://gist.github.com/25d9f243fc20532cb1b5

Manage multiple WordPress sites with Jetpack

Fri, 19 Dec 2014 12:05:02 +0000

Hurray, WordPress 4.1 and the Jetpack Plugin 3.3 has been released. Jetpack is a must have plugin for your WordPress site, it offers tons of new functions and integrates your blog neatly with your Wordpress.com account. If you haven’t already installed it, head right now to your plugin manager! With the last Update the developer have added a great feature. It’s now possible to manage the plugins for multiple Wordpress sites at one location. Here’s a screenshot, which shows the plugins admin panel of Wordpress.com.

Change the settings to autoupdate and you never have to bother about it again.