Menggunakan Hugo - Bagian Kedua

Posted on October 26, 2016

Pastikan kita berada di folder /Users/rootofallevil/belajar agar dapat melakukan posting pertama di site ini dengan melakukan command di bawah ini (jangan lupa untuk mengganti rootofallevil diganti dengan login name anda sendiri):

$ hugo new blog/postingan_1.md

Hugo mengggunakan Markdown sebagai editor. Ada baiknya untuk mengikuti tutorial mengenai Markdown sehingga kita tidak kesulitan jika melakukan proses pembuatan atau penyuntingan konten dengan menggunakan format Markdown.

Edit file postingan_1.md menggunakan text editor, sehingga isinya menjadi seperti di bawah ini:

+++
title = "Hello World!"
description = ""
date = "2016-10-26T09:25:13+08:00"

+++


Hi,

This is my fist post using Markdown, so I need to say it out loud to all of you:  **Hello World!**

Cheers

Berikut adalah tampilan dari halaman blog:

Tampilan dari halaman blog

dan ini adalah tampilan dari postingan pertama:

Tampilan dari postingan pertama

Berikutnya kita akan membuat page. Seperti yang bisa dilihat di site tersebut, ada 2 page yang sudah eksis, yaitu Project dan Resume. Jika kita masuk ke Project maka sudah ada tampilan di page tersebut, hanya tinggal menyambungkan project-project yang sudah ada ke masing-masing page. Berikut adalah contohnya untuk membuat page untuk Project.

$ hugo new projects/project_1.md

Kita kembali menggunakan text editor untuk mengisi konten dari project_1.md ini. Sebagai contoh, isinya sebagai berikut:

+++
title = "Sertifikasi Nasional Untuk Tenaga Kerja Indonesia di Luar Negeri"
description = ""
date = "2016-10-26T12:09:57+08:00"

+++

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Kita masih belum bisa menampilkan isi dari project_1.md di halaman website localhost karena masih belum melakukan link dari index.md ke file project_1.md, dimana kedua file ini masih berada dalam satu folder yang sama, yaitu projects.

Buka index.md yang berada di folder projects dengan menggunakan text editor dan edit isinya sebagai berikut:

Awalnya:

di line 15: <i class="fa fa-github"></i>&nbsp;&nbsp;<strong><a href="#">Project 1</a></strong>

Edit file index.md menjadi seperti di bawah ini:

di line 15 <i class="fa fa-github"></i>&nbsp;&nbsp;<strong><a href="/projects/project_1">Project 1</a></strong>

Berikut adalah tampilan dari page dengan nama file project_1.md:

Tampilan dari postingan pertama

Selanjutnya kita akan membuat page Resume. Kalau kita klik link Resume, akan timbul 404 Not Found, karena memang di site yang kita buat, samasekali tidak ada page Resume tersebut.

.
|-- archetypes
|-- config.toml
|-- content
|   |-- blog
|   |   |-- creating-a-new-theme.md
|   |   |-- goisforlovers.md
|   |   |-- hugoisforlovers.md
|   |   |-- migrate-from-jekyll.md
|   |   `-- postingan_1.md
|   `-- projects
|       |-- index.md
|       `-- project_1.md
|-- data
|-- layouts
|-- static
|   `-- img
|       `-- profile.png

So, command berikut akan membuat page Resume.

$ hugo new resume/index.md

Langkah berikutnya adalah kita mengedit isi dari file index.md tersebut, menjadi seperti di bawah ini:

+++
title = "Resume John Smith"
description = ""
date = "2016-10-26T09:25:13+08:00"

+++


<div class="self">
  <h1 class="name">John Smith <br />
    <span>Interactive Designer</span></h1>
  <ul>
    <li class="ad">111 Lorem Street, 34785, Ipsum City</li>
    <li class="mail">johnsmith@business.com</li>
    <li class="tel">+11 444 555 22 33</li>
    <li class="web">www.businessweb.com</li>
  </ul>
</div>

<div class="entry">
  <h2>OBJECTIVE</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim viverra nibh sed varius. Proin bibendum nunc in sem ultrices posuere. Aliquam ut aliquam lacus.</p>
</div>
<!-- End 1st Row -->
<!-- Begin 2nd Row -->
<div class="entry">
  <h2>EDUCATION</h2>
  <div class="content">
    <h3>Sep 2005 - Feb 2007</h3>
    <p>Academy of Art University, London <br />
      <em>Master in Communication Design</em></p>
  </div>
  <div class="content">
    <h3>Sep 2001 - Jun 2005</h3>
    <p>University of Art &amp; Design, New York <br />
      <em>Bachelor of Science in Graphic Design</em></p>
  </div>
</div>
<!-- End 2nd Row -->
<!-- Begin 3rd Row -->
<div class="entry">
  <h2>EXPERIENCE</h2>
  <div class="content">
    <h3>May 2009 - Feb 2010</h3>
    <p>Agency Creative, London <br />
      <em>Senior Web Designer</em></p>
    <ul class="info">
      <li>Vestibulum eu ante massa, sed rhoncus velit.</li>
      <li>Pellentesque at lectus in <a href="#">libero dapibus</a> cursus. Sed arcu ipsum, varius at ultricies acuro, tincidunt iaculis diam.</li>
    </ul>
  </div>
  <div class="content">
    <h3>Jun 2007 - May 2009</h3>
    <p>Junior Web Designer <br />
      <em>Bachelor of Science in Graphic Design</em></p>
    <ul class="info">
      <li>Sed fermentum sollicitudin interdum. Etiam imperdiet sapien in dolor rhoncus a semper tortor posuere. </li>
      <li>Pellentesque at lectus in libero dapibus cursus. Sed arcu ipsum, varius at ultricies acuro, tincidunt iaculis diam.</li>
    </ul>
  </div>
</div>

<div class="entry">
  <h2>SKILLS</h2>
  <div class="content">
    <h3>Software Knowledge</h3>
    <ul class="skills">
      <li>Photoshop</li>
      <li>Illustrator</li>
      <li>InDesign</li>
      <li>Flash</li>
      <li>Fireworks</li>
      <li>Dreamweaver</li>
      <li>After Effects</li>
      <li>Cinema 4D</li>
      <li>Maya</li>
    </ul>
  </div>
  <div class="content">
    <h3>Languages</h3>
    <ul class="skills">
      <li>CSS/XHTML</li>
      <li>PHP</li>
      <li>JavaScript</li>
      <li>Ruby on Rails</li>
      <li>ActionScript</li>
      <li>C++</li>
    </ul>
  </div>
</div>

Berikut adalah tampilan dari page Resume dari webserver yang kita install di localhost:

Tampilan dari page Resume

Dapat dilihat bahwa file index.md ada di folder resume, seperti di folder struktur di bawah ini:

.
|-- archetypes
|-- config.toml
|-- content
|   |-- blog
|   |   |-- creating-a-new-theme.md
|   |   |-- goisforlovers.md
|   |   |-- hugoisforlovers.md
|   |   |-- migrate-from-jekyll.md
|   |   `-- postingan_1.md
|   |-- projects
|   |   |-- index.md
|   |   `-- project_1.md
|   `-- resume
|       `-- index.md
|-- data
|-- layouts
|-- static
|   `-- img
|       `-- profile.png

Kalau kita menginginkan untuk menambah page atau mengedit judul page, dapat dilakukan dengan melakukan editing terhadap file config.toml. Isi file ini sangat intuitif, sehingga kita dapat dengan mudah untuk melakukan perubahan terhadap tampilan site kita ini. Berikut adalah isi dari file config.toml yang lokasinya berada di root folder dari site kita.

baseurl = "https://pembelajar.com/"
languageCode = "en-US"
title = "Chris Turner"
# Enable comments by entering your Disqus shortname
disqusShortname = ""
# Enable Google Analytics by entering your tracking code
googleAnalytics = ""
theme = "hugo-sustain"

[permalinks]
  post = "/:year/:month/:day/:slug"

[params]
  avatar = "profile.png"
  author = "Chris Turner"
  description = "Describe your website"

  # Custom assets can be linked with their paths relative to static/
  custom_css = []
  custom_js  = []

[social]
  Github        = "username"
  Email         = "email@example.com"
  Twitter       = "username"
  LinkedIn      = "username"
  Stackoverflow = "username"

## Main Menu
[[menu.main]]
  name = "blog"
  weight = 100
  identifier = "blog"
  url = "/blog/"
[[menu.main]]
  name = "projects"
  identifier = "projects"
  weight = 200
  url = "/projects/"
[[menu.main]]
  name = "resume"
  identifier = "resume"
  weight = 300
  url = "/resume/"

Kita dapat mengkombinasikan site kita dengan googleAnalytics, Disqus untuk pengunjung site berinteraksi dengan komentar dan beberapa layanan lainnya. Perkembangan static site saat ini pesat sekali, apa yang dulu hanya dapat dilakukan dengan server side scripting seperti PHP, Perl, Ruby dapat dilakukan dengan mengintegrasikan static site yang kita punya dengan layanan berbasis cloud.

Postingan berikutnya saya akan menulis bagaimana menghasilkan static site yang sudah siap untuk dipindahkan ke public cloud provider, seperti Amazon Web Services.


comments powered by Disqus