Setelah Hugo terinstall di PC atau laptop, maka yang perlu dilakukan adalah browsing untuk mencari themes yang tepat untuk Hugo. Biasanya bisa ditemukan disini. Saya memilih untuk menggunakan themes yang bernama Sustain sebagai contoh pembelajaran. Proses donwnload ini dapat dilakukan dengan dua metode. Metode pertama adalah download langsung dan ekstrak hasil download ke home direktori. Metode kedua adalah adalah dengan menggunakan git. Command git biasanya sudah terpasang jika kita sudah melakukan instalasi Xcode, terutama Xcode Command Line Tools. Saya tidak membahas mengenai prosedur instalasi Xcode karena bisa dilakukan dengan mudah seperti halnya memasang aplikasi lain melalui App Store di macOS.
Buka terminal - Tekan command dan space bersamaan dan ketikkan terminal - , setelah itu lakukan command di bawah ini untuk memastikan bahwa kita berada di Home direktori
$ cd ~
Jalankan Hugo untuk membuat satu site, di postingan ini penulis menggunakan nama belajar sebagai nama site.
$ hugo new site belajar
Output dari command di atas, seperti di bawah ini:
Congratulations! Your new Hugo site is created in "/Users/rootofallevil/belajar".
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.
Setelah itu masuk ke folder belajar
$ cd belajar
Jalankan command git di bawah ini:
$ git clone https://github.com/sumaxime/hugo-sustain.git themes/hugo-sustain
Output dari command di atas, seperti di bawah ini:
Cloning into 'themes/hugo-sustain'...
remote: Counting objects: 58, done.
remote: Compressing objects: 100% (43/43), done.
remote: Total 58 (delta 11), reused 57 (delta 10), pack-reused 0
Unpacking objects: 100% (58/58), done.
Checking connectivity... done.
Berikut adalah isi dari folder exampleSite yang berada di /Users/rootofallevil/belajar/themes/hugo-sustain/
.
|-- config.toml
|-- content
| |-- blog
| | |-- creating-a-new-theme.md
| | |-- goisforlovers.md
| | |-- hugoisforlovers.md
| | `-- migrate-from-jekyll.md
| `-- projects
| `-- index.md
`-- static
`-- img
`-- profile.png
Salin atau copy seluruh folder dan file yang berada di atas ke /Users/rootofallevil/belajar/
$ cp -Rv /Users/rootofallevil/belajar/themes/hugo-sustain/exampleSite/* /Users/rootofallevil/belajar/
Output dari command di atas:
/Users/rootofallevil/belajar/themes/hugo-sustain/exampleSite/config.toml -> /Users/rootofallevil/belajar/config.toml
/Users/rootofallevil/belajar/themes/hugo-sustain/exampleSite/content -> /Users/rootofallevil/belajar/content
/Users/rootofallevil/belajar/themes/hugo-sustain/exampleSite/content/blog -> /Users/rootofallevil/belajar/content/blog
/Users/rootofallevil/belajar/themes/hugo-sustain/exampleSite/content/blog/creating-a-new-theme.md ->
/Users/rootofallevil/belajar/content/blog/creating-a-new-theme.md
/Users/rootofallevil/belajar/themes/hugo-sustain/exampleSite/content/blog/goisforlovers.md ->
/Users/rootofallevil/belajar/content/blog/goisforlovers.md
/Users/rootofallevil/belajar/themes/hugo-sustain/exampleSite/content/blog/hugoisforlovers.md ->
/Users/rootofallevil/belajar/content/blog/hugoisforlovers.md
/Users/rootofallevil/belajar/themes/hugo-sustain/exampleSite/content/blog/migrate-from-jekyll.md ->
/Users/rootofallevil/belajar/content/blog/migrate-from-jekyll.md
/Users/rootofallevil/belajar/themes/hugo-sustain/exampleSite/content/projects ->
/Users/rootofallevil/belajar/content/projects
/Users/rootofallevil/belajar/themes/hugo-sustain/exampleSite/content/projects/index.md ->
/Users/rootofallevil/belajar/content/projects/index.md
/Users/rootofallevil/belajar/themes/hugo-sustain/exampleSite/static -> /Users/rootofallevil/belajar/static
/Users/rootofallevil/belajar/themes/hugo-sustain/exampleSite/static/img -> /Users/rootofallevil/belajar/static/img
/Users/rootofallevil/belajar/themes/hugo-sustain/exampleSite/static/img/profile.png ->
/Users/rootofallevil/belajar/static/img/profile.png
Pastikan kita berada di /Users/rootofallevil/belajar/ dan ketikkan command di bawah ini, untuk memulai webserver:
$ hugo server
Output dari command di atas adalah sebagai berikut. Hugo biasanya menggunakan port 1313 agar bisa diakses, tetapi karena saya sudah menjalankan Hugo maka Hugo akan mencari port lain yang tidak digunakan, dalam hal ini, port yang digunakan adalah 59804
ERROR: 2016/10/25 23:59:31 server.go:132: port 1313 already in use, attempting to use an available port
Started building sites ...
Built site for language en:
0 draft content
0 future content
0 expired content
5 pages created
0 non-page files copied
0 paginator pages created
3 categories created
7 tags created
total in 36 ms
Watching for changes in /Users/rootofallevil/belajar/{data,content,layouts,static,themes}
Serving pages from memory
Web Server is available at http://localhost:59804/ (bind address 127.0.0.1)
Press Ctrl+C to stop
Berikut adalah tampilan dari site yang dihosting di PC atau laptop kita.
Postingan berikutnya, saya akan membahas mengenai bagaimana menggunakan themes Sustain yang sudah dipasang ini.