Migrate wordpress to hugo

May 31, 2020 (Last Modified: June 01, 2020)

Page content

Wordpress 에서 hugo로 이사한 후 첫번째 시도. Hugo theme은 harbor를 사용하고, site 호스팅 방법은 nginx docker를 사용. (이상하게 nginx를 helm으로 띄우는 게 간단하지 않네)

Clone repogistry for raw blog data

cychong15:migration_to_hugo cychong$ git clone https://github.com/cychong47/sosa0sa.git
Cloning into 'sosa0sa'...
warning: You appear to have cloned an empty repository.

Setup hugo inside of the git repository

cychong15:migration_to_hugo cychong$ hugo new site sosa0sa
Error: /Users/cychong/workspace/migration_to_hugo/sosa0sa already exists and is not empty. See --force.

cychong15:migration_to_hugo cychong$ hugo new site sosa0sa --force
Congratulations! Your new Hugo site is created in /Users/cychong/workspace/migration_to_hugo/sosa0sa.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

Maybe not good to enforce to do something.

cychong15:sosa0sa cychong$ tree -f
.
├── ./archetypes
│   └── ./archetypes/default.md
├── ./config.toml
├── ./content
├── ./data
├── ./layouts
├── ./static
└── ./themes

6 directories, 2 files

Add Theme

cychong15:sosa0sa cychong$ cd themes/
cychong15:themes cychong$ ls
cychong15:themes cychong$ git submodule add https://github.com/matsuyoshi30/harbor.git harbor
Cloning into '/Users/cychong/workspace/migration_to_hugo/sosa0sa/themes/harbor'...
remote: Enumerating objects: 213, done.
remote: Counting objects: 100% (213/213), done.
remote: Compressing objects: 100% (142/142), done.
remote: Total 739 (delta 111), reused 134 (delta 55), pack-reused 526
Receiving objects: 100% (739/739), 7.90 MiB | 4.50 MiB/s, done.
Resolving deltas: 100% (349/349), done.

Copy example config.toml

Default config.toml from harbor theme git repo which is a little bit different from that of the exampleSite directory of theme (themes/harbor/exampleSite/config.toml)

theme = "harbor"
baseurl = "https://example.com/"
title = "Hugo Themes"
paginate = 3
languageCode = "en"
DefaultContentLanguage = "en"
enableInlineShortcodes = true
footnoteReturnLinkContents = "^"

# Optional
# If you use googleAnalytics, you set top-level options in config.toml to the beginning of the config file like other top-level options.
googleAnalytics = "UA-XXXXXXXX-XX"
# and disqus too.
disqusShortName = "yourdisqusshortname"

[Author]
  name = "Hugo Author"

[outputs]
  section = ["JSON", "HTML"]

[[params.nav]]
  identifier = "about"
  name = "About"
  icon = "fas fa-user fa-lg"
  url = "/about/"
  weight = 3

[[params.nav]]
  identifier = "tags"
  name = "Tags"
  icon = "fas fa-tag fa-lg"
  url = "tags"
  weight = 3

[[params.nav]]
  identifier = "categories"
  name = "Category"
  icon = "fas fa-folder-open fa-lg"
  url = "categories"
  weight = 3

[[params.nav]]
  identifier = "search"
  name = "Search"
  icon = "fas fa-search fa-lg"
  url = "search"
  weight = 3

[[params.nav]]
  identifier = "archives"
  name = "Archives"
  icon = "fas fa-archive fa-lg"
  url = "archives"
  weight = 3

[params.logo]
  url = "icon.png" # static/images/icon.png
  width = 50
  height = 50
  alt = "Logo"

Update a few things

baseurl = "https://sosa0sa.com/"
title = " sosa0sa.com"
paginate = 5

Put markdown files under the `content` directory

(venv) cychong15:sosa0sa cychong$ tree -d content/ -L 2
content/
└── post
    ├── 2003
    ├── 2004
    ├── 2005
    ├── 2006
    ├── 2007
    ├── 2008
    ├── 2009
    ├── 2010
    ├── 2011
    ├── 2012
    ├── 2013
    ├── 2014
    ├── 2015
    ├── 2016
    ├── 2017
    ├── 2018
    ├── 2019
    └── 2020

19 directories

Put image files under the static files

cychong15:static cychong$ tree -d -L 2
.
└── images
    ├── 2002
    ├── 2003
    ├── 2004
    ├── 2005
    ├── 2006
    ├── 2007
    ├── 2008
    ├── 2009
    ├── 2010
    ├── 2011
    ├── 2012
    ├── 2013
    ├── 2014
    ├── 2015
    ├── 2016
    ├── 2017
    ├── 2018
    ├── 2019
    └── 2020

20 directories

Customize theme

`head.html`

Copy themes/harbor/layouts/partials/head.htmlto layouts/partials/head.html

And change the css filename to use from dark.css to main.css

(venv) cychong15:sosa0sa cychong$ diff  themes/harbor/layouts/partials/head.html layouts/partials/head.html
14c14
< <link id="dark-mode-theme" rel="stylesheet" href="{{ .Site.BaseURL }}css/dark.css" />
---
> <link id="dark-mode-theme" rel="stylesheet" href="{{ .Site.BaseURL }}css/main.css" />

Create HTML files

(venv) cychong15:sosa0sa cychong$ hugo

                   |  EN
-------------------+-------
  Pages            | 3706
  Paginator pages  | 1096
  Non-page files   |    0
  Static files     | 6354
  Processed images |    0
  Aliases          |  550
  Sitemaps         |    1
  Cleaned          |    0

Total in 5964 ms

(venv) cychong15:sosa0sa cychong$ tree -d -L 1 public/
public/
├── archives
├── categories
├── css
├── fontawesome
├── fonts
├── images
├── js
├── page
├── post
├── src
└── tags

11 directories

(venv) cychong15:sosa0sa cychong$ du -hs public/
1.8G	public/

Setup nginx docker - To Go

cychong@mini1:~$ helm repo add nginx-stable https://helm.nginx.com/stable
"nginx-stable" has been added to your repositories
cychong@mini1:~$ helm repo update
Hang tight while we grab the latest from your chart repositories...
...Successfully got an update from the "nginx-stable" chart repository
Update Complete. ⎈ Happy Helming!⎈

cychong@mini1:~/work$ helm install  nginx nginx-stable/nginx-ingress
NAME: nginx
LAST DEPLOYED: Sun May 31 08:58:59 2020
NAMESPACE: default
STATUS: deployed
REVISION: 1
TEST SUITE: None
NOTES:
The NGINX Ingress Controller has been installed.

Deploy nginx with customized values.yaml

https://raw.githubusercontent.com/kubernetes/ingress-nginx/master/charts/ingress-nginx/values.yaml

파일을 받아 필요한 내용을 수정한 후 사용

Try with docker

Copy the default nginx configuration file and change to listen 0.0.0.0 rather than 127.0.0.1

root@e364ef9bb706:/etc/nginx# cat conf.d/default.conf
server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

cychong@mini1:~$ docker run --name nginx -p80:80 -v /home/cychong/work/nginx/default.conf:/etc/nginx/conf.d/default.conf:ro -v /home/cychong/Documents/hugo/:/usr/share/nginx/html -d nginx
ce4d05fb3895a825ac8fee1723c3b7417c281e035b9bebeff91aa73e3749d317

cychong@mini1:~$ docker ps -a |grep nginx
ce4d05fb3895        nginx                     "nginx -g 'daemon of…"   35 seconds ago      Up 33 seconds                 0.0.0.0:80->80/tcp     nginx

Stop the wordpress and mysql dockers

cychong@mini1:~$ docker ps -a |grep wordpress
18203ecb1459        wordpress                 "docker-entrypoint.s…"   3 months ago        Up 5 days                   0.0.0.0:80->80/tcp     wordpress
cychong@mini1:~$ docker stop  wordpress
wordpress
cychong@mini1:~$ docker stop mysql
mysql

Setup Hugo docker for hosting generated Static files

cychong@mini1:~$ docker pull tarampampam/hugo:latest
latest: Pulling from tarampampam/hugo
df20fa9351a1: Pull complete
6da297b993f4: Pull complete
ec2cc2aeaf82: Pull complete
Digest: sha256:878b09a81c0594482a2c8291ea587b3b4b262069b64b0af0838d50438711926c
Status: Downloaded newer image for tarampampam/hugo:latest
docker.io/tarampampam/hugo:latest