Dari wordpress ke Hexo web statik

Setelah berbulan menggunakan Sublime Text, saya rasa begitu selesa. Terasa produktiviti meningkat. Jadi, saya pun berpindah ke Hexo web statik.

Apa itu web statik (static website)? Itu cerita di hari lain. Artikel kali ini, saya nak cerita bagaimana saya berpindah dari wordpress ke Hexo. Hexo ialah sebuah pemproses web statik (static blog generator) yang menggunakan nodejs.

Saya pilih Hexo sebab sedapnya guna nodejs. Saya cadangkan semua programmer belajar nodejs dan anda takkan menyesal.

Disclaimer : artikel ini bukanlah tutorial ikut satu persatu, tapi cerita bagaimana saya berpindah dari wordpress ke web statik. Semoga idea, gaya pemikiran dan cara saya menyelesaikan masalah ini, boleh membantu anda.

Pindah fajarhac.com dari Hostgator ke Namecheap

Sebelum pindah wordpress, saya pindah domain dulu. Dulu, masa ilmu sengket di dada, saya beli perkhidmatan shared hosting dari hostgator. Masa tu, tak pandai sangat. Beli domain pun kat hostgator, pastu oneclick siap wordpress.

Tapi sekarang dah pandai. Saya guna Namecheap untuk domain, Digital Ocean untuk hosting dan Zoho untuk emel. Tak mudah, tak murah tapi tak mahal juga dan yang penting amat berbaloi.

Cara-cara pindahkan (transfer) domain dari Host gator ke Namecheap

Pergi ke Hostgator, unlock domain dan pastikan whois guard di buang. Buang whois ini penting, sebab emel akan dihantar kepada anda berdasarkan whois pada domain yang nak dipindahkan.

Contoh : emel whois pada fajarhac.com ialah [email protected]. Jadi semua proses di bawah akan sampai pada emel [email protected]

Macammana nak tengok whois? Guna web who.is
Pergi ke Namecheap Domain > Transfer, masukkan nama domain, klik transfer. Kemudian masukkan dalam troli untuk beli. Jangan lupa, dapatkan diskaun untuk pemindahan domain dari namecheap.

Anda akan dapat emel dari Namecheap yang memastikan anda dah perkhidmatan domain transfer ni. Tajuk emelnya : Namecheap Order Summary. Ini emel biasa dilihat kalau anda dah selalu beli.
Tak berapa lama kemudian (2-3 jam), satu lagi emel akan sampai bertajuk (Subject) : Domain Transfer Request for ******.COM

Baca emel tu elok-elok dan anda akan faham apa tindakan seterusnya. Iaitu, klik dekat pautan (link) yang diberikan.
- You must agree to enter into a new Registration Agreement with us. You can review the full terms and conditions of the Agreement at
< https://******pautan****** >
Klik pautan tu, kemudian ikut apa yang disuruh dalam halaman yang muncul selepas di klik link di atas. Ingat ini penting, kalau anda tak buat, maka pemindahan tidak akan berlaku.
Kemudian tunggulah emel yang bertajuk: Transfer Domain: Complete: *******.com. Yang ni kena SABAR.

Saya sendiri dapat emel ini, selepas 7 hari. Jadi kalau lambat, jangan risau, biarkan selama 5 hari. Kalau anda tak sabar atau tak pasti anda buat dengan betul atau tidak, saya cadangkan tunggu selepas 8 hari, kemudian emel pemilik asal domain anda. Tanya dan minta bantuan mereka.

Kita bayar, jadi jangan malu-malu nak minta bantuan (support), tapi jangan lupa adab dan sopan, sebab kita berhubung dengan manusia. Tanya mereka elok-elok.
Alhamdulillah segala pemindahan fajarhac.com berjalan secara automatik, saya tak perlu tanya support di Hostgator. Tu pun mungkin sebab saya seorang penyabar ATAU malas nak emel support. Jawapannya yang kedua. =D

Pindah dari wordpress ke Hexo

Sebelum pindahkan ke web statik, saya cadangkan anda baca banyak2 dulu kebaikan dan keburukannya. Jangan ikut trend, fikir yang terbaik ikut keselesaan diri sendiri.
Dah baca-baca? Nak guna hexo jugak? Jom!!
Keperluan:

perlu tahu guna command line di terminal. Saya guna git bash dekat windows 7.
dah install nodejs dan npm. Kalau guna Ubuntu atau linux, boleh guna package manager je senang. Untuk Windows, pergi ke laman web nodejs, download dan install.
dah install hexo dan tahu guna hexo. Saya cadangkan baca dokumen Hexo.
```
npm install hexo-cli
```

Buat direktori hexo untuk blog kita di PC dulu.

Saya simpan semua project nodejs dalam direktori khas saya namakan nodejs_projects/.

terminal atau console
```
cd nodejs_projects
hexo init fajarhachexo
cd fajarhachexo
```
Pergi blog wordpress asal, ekspot data. Dashboard > Tools > Export pilih All Content, klik Download Export File.

Dalam hal saya, saya dapat fail fajarhac.wordpress.2016-03-19.xml.

Seterusnya, kita nak masukkan data dari wordpress yang diekspot tadi ke dalam hexo. Untuk itu, kita kena pemalam pemindahan (migrator plugin), pastu baru ekspot.

# ~/nodejs_projects/fajarhachexo

$ npm install hexo-migrator-wordpress --save
$ hexo migrate wordpress ~/Downloads/fajarhac.wordpress.2016-03-19.xml
INFO  Analyzing D:/dropbox/backup hostgator/fajarhac.wordpress.2016-03-19.xml...
INFO  Page found: About
INFO  Page found: More
INFO  Page found: webs
INFO  Post found: Html Asas 1
INFO  Post found: Projek Baru
INFO  Post found: Gsce + dropbox + tinyurl
....
INFO 134 posts migrated.

Sekarang kita akan dapat banyak fail dalam source/_posts, source/_draft dan beberapa direktori yang asalnya halaman (page) masa di wordpress. Selesai bahagian ikut arahan tanpa fikir banyak.
Rehat dulu. Rileks kejap.
Seterusnya, kita nak pindahkan gambar dari wordpress asal direktori ke Hexo (fajarhachexo) direktori. Guna FileZilla (atau aa saja yang boleh muatturun fail-fail dari server anda) muatturun direktori wp-content/uploads/ dari laman web asal kita.

Direktori ini, menyimpan semua gambar yang kita upload sebelum ini. Kemudian, masukkan direktori wp-content/uploads/ ke dalam fajarhachexo/source jadi fajarhachexo/source/wp-content/uploads/.

Waaaa.... internet ku slow.

Saya cadangkan anda salin (backup) direktori dari server lama awal-awal. Sebelum buat pemindahan ini.
Kemaskan _config.yml dalam direktori fajarhachexo/. Tukar permalink. Di wordpress lama, saya guna domain/tahun/bulan/tajuk, jadi di sini, saya tetapkan permalink kepada permalink: :year/:month/:title/.
Kat sini saya wat kelainan sikit. Saya nak blog saya berada di http://blog.fajarhac.com subdomain. Kalau kita tengok balik artikel yang diimpot dari wordpress tadi :

Tapi, bila difikir balik mungkin ramai yang nak belajar android ni tapi tak tahu cara yang terbaik. Macam saya sendiri awal-awal dulu. Sebab itu saya tulis artikel ini sebagai panduan kepada orang-orang yang berminat membuat aplikasi android sendiri.

Photo from mammella at PixabBay

Gambar-gambar saya berada di http://fajarhac.com/.... Jadi saya kena ubah semua pautan dalam _post/ dan _draft/ jadi http://blog.fajarhac.com/... iaitu pautan mutlak (absolute link) atau guna pautan relatif (relative link) jadi /.

Kalau guna pautan relatif, semua pautan dan gambar apabila kita jalankan hexo server pun tak perlukan internet, sebab semuanya relatif merujuk kepada dalam folder ni.

Kalau saya guna pautan mutlak, sekiranya pada suatu hari nanti, saya nak ubah lagi pautan ini, mudah nak cari guna skrip.

Setelah fikir panjang, saya nak guna pautan relatif. Masa depan? Biarlah dulu, fikir masa sekarang je dulu. Lagipun, artikel lepas-lepas ini, semua akan guna pautan relatif.
Tukar pautan http://fajarhac.com/ kepada /. Caranya senang je bila guna Sublime Text. Atau anda tulis skrip kalau anda rajin. Tapi, lebih cepat dan senang kalau guna fungsi find and replace dekat Sublime Text.

Klik butang kanan tetikus pada direktori fajarhachexo/source, kemudian klik Find in Folder....
```
Find: ](http://fajarhac.com/
Where: C:\Users\fakhrullah\nodejs_projects\fajarhachexo\source
Replace: ]/
```
Klik replace, pada dialog Confirm Replace > Yes.

ps : saya cadangkan anda buat revision git sebelum replace semua ni. Tapi saya tak buat, sebab malaslah, dan yakin dengan ilmu di dada. InsyaAllah tak de problem

aaaaaaaaaa!!!! aku tersilap replace !!!

Sepatutnya dekat Replace tu ](\, saya tersilap. Jap, cuba tukar find and replace :
```
Find: ]/
Where: C:\Users\fakhrullah\nodejs_projects\fajarhachexo\source
Replace: ](/
```
Alhamdulillah menjadi. Yakin punya pasal. =)
Blog saya asal guna fajarhac.com, bila tukar ke blog.fajarhac.com, SEO dan Google search mungkin akan keliru. Yang paling penting, pautan dari blog lain ke blog saya sebelum ini, akan jadi 404 je kalau kita tak handle.

Jadi macammana nak buat? Saya guna NGINX. Kita boleh tulis peraturan (rule) untuk pautan lama ke pautan baru.

Pautan asal blog ialah fajarhac.com/<year>/<month>/<title>/, saya perlu halakan (redirect) ke blog.fajarhac.com/<year>/<month>/<title>/.

Saya nak jadikan fajarhac.com sebagai halaman macam digital card, ada profil dan tunjuk link2. Tapi semua tu tak buat lagi. Jadi buat masa ni, redirect semua link fajarhac.com ke blog.fajarhac.com dulu.
```
server {
  listen 80;
#  listen 443 ssl;
  server_name fajarhac.com;
  return 301 $scheme://blog.fajarhac.com$request_uri;
}
```

Yes. Deploy! Jangan lupa tetapkan repo untuk deploy di _config.yml.

hexo generate
npm install hexo-deployer-git --save
hexo deploy

Kemudian baru saya tukar DNS di Namecheap dari hostgator ke Digital Ocean. Masalah akan timbul, saya pasti. Tapi sebab DNS baru tukar, jadi kena tunggu 2-3 hari dulu sebelum boleh tengok, apa masalahnya.

Saya akan kemas kini artikel ini, bila ada masalah yang muncul. InsyaAllah.

Kemaskini

Kemaskini 2016-03-21

Dalam wordpress, pautan ke kategori ialah domain/category/gambar tapi di Hexo domain/categories/Gambar. Ada 2 masalah:
1. perkataan category dan categories
  
  penyelesaian
  
  Ada 2 penyelesaian, yang boleh saya fikir. Satu rewrite pada nginx server block, manakala satu lagi ialah tukar tetapan _config.yml. Perkataan mana lebih tepat? category atau categories?
  
  category lagi tepat, sebab kita cerita pasal satu kategori sahaja iaitu gambar. Saya pilih untuk tukar _config.yml.
```
// asal
category_dir: categories

// tukar kepada
category_dir: category
```
  Pastu, jalankan hexo generate.
  
  Sikit lagi masalah, saya nampak, Hexo tak delete categories/ dalam public/. Kita xguna dah, direktori ni. Kalau tak delete, kita akan dapat 2 direktori untuk pautan berbeza untuk benda yang sama. Ini tak bagus untuk SEO. Saya ambik jalan paling senang, delete direktori public/categories/ secara manual. Jangan buat, mungkin hexo lebih bijak dari yang saya sangka
2. huruf kecil dan huruf besar nama kategori
  
  Sebab kat 1 di atas, kita guna perkataan category, jadi kat sini pun kita akan jadikan huruf besar pada nama kategori tu huruf kecil semuanya. Maknanya, kita kekalkan pautan asal dari wordpress.
  
  Nak sedapkan hati lagi, saya cakap kat diri sendiri, pautan akan kelihatan lagi lawa jika semuanya huruf kecil.
  
  ATAU kita boleh guna Windows Server sebab Windows xpandai beza huruf besar dan kecil =D
  
  penyelesaian
  
  Masalah ni terjadi masa kita impot dari wordpress. Siapa yang buat impot skrip tu tak cukup kemas. Saya cuma boleh fikir tentang tulis balik semua kategori pada semua artikel kita kepada semua huruf kecil.
```
// asal
categories:
  - uncategorized

// tukar kepada
categories:
  - uncategorized
```
  Caranya ialah, guna fungsi find and replace dalam Sublime Text. Jangan lupa tanda pada case sensitive.
Satu lagi, masalah, asal wordpress tag tapi dekat Hexo tags, cara penyelesaian sama macam kategori di atas.
Saya da masalah sikit dengan hexo deploy, salah pemalam hexo-deployer-git kot. Jadi, saya salin public, dalam satu direktori lain, pastu guna git dan setup auto deploy guna git di server.