Cara Membuat Website dengan Hugo SSG

Daftar isi

Hugo Dasar - This article is part of a series.

Part 1: Cara Install Gohugo Static Site Generator

Part 2: This Article

Hugo adalah alat yang hebat untuk membuat website.

Saya punya beberapa alasan untuk suka menggunakan Hugo.

Hugo itu simple, boring, flexible, fast.

Terlepas dari alasan di atas. Hugo benar-benar membebaskan kita untuk memiliki situs pribadi dengan kendali penuh. (lihat About)

Buat Situs Hugo #

Hugo menyediakan perintah berikut untuk membuat website …

hugo new site [nama-website]

Sebagai contoh.

Saya akan membuat website bernama suigen:

hugo new site suigen

Congratulations! Your new Hugo site is created in /home/suigen.
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

Berdasarkan Return atau hasil di atas, ada 3 (tiga) poin penting, yakni:

Kita bisa download tema melalui themes.gohugo.io atau membuat tema sendiri dengan ketik hugo new theme [nama-tema],
Bila ingin membuat content, ketik hugo new [nama-folder]/[nama-file].[format] (contoh: hugo new post/hugo.md), dan

-Bila ingin membuat live server, ketik hugo server, dan serta

Kamu bisa mengunjungi https://gohugo.io/ untuk pemahaman lebih;>

Mari kita lihat isi folder dari suigen

cd suigen
tree

.
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

6 directories, 2 files

Pilih dan atau Buat Tema #

Hugo memiliki banyak kontributor pembuat tema yang disebarkan secara gratis.

Silahkan cari tema yang kamu suka di: themes.gohugo.io

Pilih tema yang mana saja.

Kami pakai tema Ghostwriter

Baca dulu dokumentasi tema-nya, karena di sana ada konfigurasi yang harus diikuti agar temanya bisa digunakan sesuai harapan.

Letakkan di folder themes/.

tree

.
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
    └── ghostwriter
        ├── archetypes/
        ├── exampleSite/
        ├── images/
        ├── layouts/
        ├── LICENSE.md
        ├── package.json
        ├── README.md
        ├── static/
        ├── theme.toml
        ├── webpack.config.js
        └── yarn.lock

Perhatikan ada folder exampleSite. Buka dan buka content. Di sini, kamu bisa lihat subfolder page, post dan project.

Pindahkan page, project dan post ke folder suigen/content situs.

tree

.
├── archetypes
│   └── default.md
├── config.toml
├── content
│   ├── page
│   ├── project
│   └── post
├── data
├── layouts
├── static
└── themes
    └── ghostwriter

Cara Konfigurasi pada Hugo #

exampleSite menyediakan config.yml.

config.yml adalah file konfigurasi Hugo, yang memberi tahu Hugo beberapa detail konfigurasi.

Pindahkan config.yml ke folder suigen.

suigen
└── config.yml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
baseurl: "https://example.com/"
title: Ghostwriter example
theme: ghostwriter
languageCode: en-us
copyright: My Name
disqusShortname: XXX
googleAnalytics: XXX
pygmentsUseClasses: true
pygmentsCodefences: true

markup:
  highlight:
    codeFences: true
    guessSyntax: false
    hl_Lines: ""
    lineNoStart: 1
    lineNos: false
    lineNumbersInTable: true
    noClasses: true
    tabWidth: 2

privacy:
  disqus:
    disable: true
  googleAnalytics:
    anonymizeIP: true
    respectDoNotTrack: true
    useSessionStorage: false

author:
  name: My Name
  profile: ""

taxonomies:
  tag: tags

params:
  mainSections:
    - post
  intro: true
  headline: Ghostwriter example
  description: Ghostwriter example description
  github: "https://github.com/XXX"
  gitlab: "https://gitlab.com/XXX"
  linkedin: "https://linkedin.com/in/XXX/"
  twitter: "https://twitter.com/XXX"
  stackoverflow: "https://stackoverflow.com/users/XXX/YYY"
  facebook: "https://www.facebook.com/username"
  email: [email protected]
  opengraph: true
  shareTwitter: true
  rss: true
  shareFacebook: true
  shareLinkedIn: false
  dateFormat: "Mon, Jan 2, 2006"
  exponeaJsUrl: ""
  exponeaTarget: ""
  exponeaToken: ""
  exponeaTrackVisits: false
  readingTime: true
  readingTimeText: "Estimated reading time:"
  fathomUrl: ""
  fathomSiteId: ""
  # If you want to use plausible(https://plausible.io) for analytics, add this section
  plausibleAnalytics:
    domain: ""
    # Default value is plausible.io, overwrite this if you are self-hosting or using a custom domain
    serverURL: ""

permalinks:
  post: "/:year/:month/:day/:filename/"

menu:
  main:
    - name: Blog
      url: /
      weight: 1
    - name: Projects
      url: /project/
      weight: 2
    - name: Contact
      url: /page/contact/
      weight: 3
    - name: About
      url: /page/about/
      weight: 4