Cara Membuat Website, Artikel dan Menjalankan Server Hugo, Lengkapppp.

Hugo


Hallo teman teman, kali ini saya akan mencoba membuat artikel hugo. namun, di postingan sebelumnya saya sudah membahas tentang hugo, yaitu Panduan Cara Menginstall Hugo .

Nah, kali ini saya akan mencoba membuat website, artikel, dan menjalankan website dengan hugo.    


Alat yang diperlukan, yaitu :

1. Membuat Website di hugo

Langkah selanjutnya untuk membuat sebuah website di hugo, kalian cukup ketik perintah dibawah ini ke `git` kalian. dan Hugo akan generate direktori bernama `belajar-blog`.

hugo new site belajar-blog

Lalu akan muncul pesan seperti ini.

    Congratulations! Your new Hugo site is created in C:\belajar-blog.

    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.


kalian bisa mengecek langsung ke  direktori `belajar-blog`.

2. Install Theme Pada Hugo

Untuk Langkah selanjutnya kalian bisa menginstall Theme Hugo, dan disini saya menggunakan theme ananke. Kalian bisa menggunakan perintah dibawah ini untuk menginstall theme hugonya.

    cd belajar-blog
    git init
    git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

Dan akan muncul pesan seperti ini:

    Cloning into 'C:/belajar-blog/themes/ananke'...
    remote: Enumerating objects: 4, done.
    remote: Counting objects: 100% (4/4), done.
    remote: Compressing objects: 100% (4/4), done.
    Receiving objects: 100% (1959/1959), 4.39 MiB | 1.04 MiB/s, done.
    remote: Total 1959 (delta 0), reused 2 (delta 0), pack-reused 1955
    Resolving deltas: 100% (1073/1073), done.
    warning: LF will be replaced by CRLF in .gitmodules.
    The file will have its original line endings in your working directory

Kalian bisa mengecek nya di direktori `belajar-blog/themes`
Ohiya, kalian harus setting `config.toml` agar ketika menjalankan webistenya tidak blank putih. kalian bisa copy kode dibawah ini lalu paste ke `config.toml` kalian.

    baseURL = "http://example.org/"
    languageCode = "en-us"
    title = "My New Hugo Site"
    theme = "ananke"


3. Membuat Artikel

Untuk cara ini sangat mudah, kalian bisa mengetik perintah dibawah ini ke `git kalian`.

    hugo new post/artikel-pertama/index.md

Dan akan muncul pesan seperti ini `C:\belajar-blog\content\post\artikel-pertama\index.md created`. itu tandanya artikel yang kalian buat telah berhasil.

Isi dalam artikel tersebut :

    ---
    title: "Artikel Pertama"
    date: 2021-03-26T11:25:03+07:00
    draft: false
    ---
    disini kalian bisa mengisi koten artikel

Note: `Draft=true` di ganti menjadi `Draft=false` agar konten muncul pada halaman website kalian.

4. Menjalankan Websitenya.

Langkah ini cukup mudah, karena kalian bisa mengetik perintah `hugo server` pada git kalian. dan akan muncul pesan seperti dibawah ini

    port 1313 already in use, attempting to use an available port
    Start building sites …

                    | EN
    -------------------+-----
    Pages            |  7
    Paginator pages  |  0
    Non-page files   |  0
    Static files     |  1
    Processed images |  0
    Aliases          |  0
    Sitemaps         |  1
    Cleaned          |  0

    Built in 118 ms
    Watching for changes in C:\belajar-blog\{archetypes,content,data,layouts,static,themes}
    Watching for config changes in C:\belajar-blog\config.toml, C:\belajar-               blog\themes\ananke\config.yaml
    Environment: "development"
    Serving pages from memory
    Running in Fast Render Mode. For full rebuilds on change: hugo server --                              disableFastRender
    Web Server is available at http://localhost:53588/ (bind address 127.0.0.1)
    Press Ctrl+C to stop


itu tandanya website kalian sudah bisa diakses di local.

Untuk melihat hasilnya kalian cukup ketik dibrowser `localhost:53588`. dan akan muncul hasilnya seperti gambar di bawah ini:

Simple Home Pages Hugo

dan untuk halaman artikel nya seperti ini:

Artikel Hugo

Comments

Popular posts from this blog

Cara Membuat Sidebar Dengan Bootstrap 4

Panduan Membuat Form Login Dengan Bootstrap 5

Cara Membuat Newsletter Di blog Dengan Formspree