Migreren van WordPress naar Hugo

Hugo-logo

Hugo is een statische websitegenerator en heeft geen dynamische services zoals comments ingebouwd. Reacties kun je bijvoorbeeld via Disqus laten lopen. Bij een migratie is het ook belangrijk dat alle oude WordPress-URLs blijven werken of netjes worden doorgestuurd. Niet werkende URLs zijn slecht voor bezoekers en voor zoekmachine-ranking.

Hugo installeren

In de Hugo Quickstart staat hoe je Hugo installeert, inclusief een theme en de basisconfiguratie. Die documentatie is duidelijk genoeg, dus ik herhaal die stappen hier niet.

WordPress-comments migreren naar Disqus

Tijdens deze stap moet je oude WordPress-site nog online zijn. Daarna kun je de interne WordPress-comments naar Disqus exporteren:

Maak een gratis account aan op Disqus.com.
Voor Hugo heb je je Disqus shortname nodig.
Installeer in WordPress de plugin Disqus Comment System.
Activeer de plugin.
Exporteer de comments volgens de Disqus-documentatie: Importing comments from WordPress.

Zet daarna in config.toml:

disqusShortname = "examplename"

Niet werkende URLs oplossen

Conversietools zetten meestal ook URLs van posts en pagina’s om. In de Markdown-header kun je bijvoorbeeld hebben:

url: /migration-from-wordpress-to-hugo/

Als een oude URL naar een post of pagina moet doorverwijzen, kun je aliases gebruiken:

aliases:
  - /project/migration-wordpress-to-hugo/

Controleer de sitemap van je oude WordPress-site en vergelijk die met de nieuwe Hugo-site. Let vooral op bekende paden zoals:

/contact/ -> /#about
/about/ -> /#about
/tag/ -> /tags/
/subject/ -> /categories/
/wp-content/uploads/ -> /post-img/

De eerste twee kun je bijvoorbeeld als aliases in about.md opnemen:

aliases:
  - /about/
  - /contact/

WordPress-afbeeldingen kun je verplaatsen naar /post-img/. Voor paden zoals tags, categories en uploads kun je redirects in Nginx of Apache gebruiken:

location /tag/ {
  rewrite ^/tag/(.*)$ https://example.com/tags/$1 permanent;
}
location /subject/ {
  rewrite ^/subject/(.*)$ https://example.com/categories/$1 permanent;
}
location /wp-content/uploads/ {
  rewrite ^/wp-content/uploads/(.*)$ https://example.com/post-img/$1 permanent;
}

Google Analytics

Als je Google Analytics gebruikt, zet dan de tracking ID in config.toml:

googleAnalytics = "UA-XXXXXXXX-X"

Dit was alles wat ik voor mijn eigen website nodig had. Controleer wel altijd welke functionaliteit je oude WordPress-site had en hoe je die in Hugo vervangt.

De volgende posts horen bij deze Hugo-serie: