Cara Membuat Website Statis Dengan Hugo

Hugo termasuk salahsatu framework pembuat website statis berbasic GO language sebagai tata letaknya. Keuntungan utama yang membedakannya dari SSG lain

Static Site Generator atau yang dikenal "SSG" sedang populer di mata para developer website. Banyak framework yang berlomba untuk menawarkan membuat website statis dengan mudah, salah satunya yang sangat populer adalah Hugo.

Table of Contents

Tentang Hugo

Hugo termasuk salahsatu framework pembuat website statis berbasic GO language sebagai tata letaknya. Keuntungan utama yang membedakannya dari SSG lain adalah seberapa cepat ia membangun halaman.

Ini menyediakan manajemen konten yang luar biasa, tersedia di berbagai platform OS, mendukung taksonomi, menawarkan pembuatan daftar konten, mendukung URL cantik, dan dapat di-host hampir di mana saja.

Selain fitur-fitur luar biasa ini, ia menyediakan pemuatan ulang secara langsung selama pengembangan, mendukung opsi jenis konten yang berbeda, dan memiliki fungsi penghitungan kata serta menit untuk membaca. Ini hanyalah sebagian contoh dari banyaknya fitur yang ditawarkan Hugo.

Cara Install Hugo

Hugo adalah lintas platform. Ada beberapa cara agar dapat menginstalnya. Ini termasuk menggunakan manajer paket, dari kode sumber, atau dengan Docker. Namun, cara termudah untuk menginstalnya adalah menggunakan binari.

Saat ini, Hugo memiliki binari bawaan untuk macOS, Linux, Windows, FreeBSD, dan, OpenBSD. Anda dapat mengunduhnya dari repositori Github Hugo di sini. Pastikan untuk menginstalnya di jalur Anda.

Setelah penginstalan selesai, jalankan hugo --help di terminal anda untuk memastikan bahwa penginstalan Hugo telah selesai dan berfungsi. Ini adalah beberapa baris pertama yang harus anda lihat.

hugo is the main command, used to build your Hugo site.

Hugo is a Fast and Flexible Static Site Generator
built with love by spf13 and friends in Go.

Complete documentation is available at https://gohugo.io/.

Usage:
  hugo [flags]
  hugo [command]

Available Commands:
  completion  Generate the autocompletion script for the specified shell
  config      Print the site configuration
  convert     Convert your content to different formats
  deploy      Deploy your site to a Cloud provider.
  env         Print Hugo version and environment info
  gen         A collection of several useful generators.
  help        Help about any command
  import      Import your site from others.
  list        Listing out various types of content
  mod         Various Hugo Modules helpers.
  new         Create new content for your site
  server      A high performance webserver
  version     Print the version number of Hugo

Flags:
  -b, --baseURL string             hostname (and path) to the root, e.g. https://spf13.com/
  -D, --buildDrafts                include content marked as draft
  -E, --buildExpired               include expired content
  -F, --buildFuture                include content with publishdate in the future
      --cacheDir string            filesystem path to cache directory. Defaults: $TMPDIR/hugo_cache/
      --cleanDestinationDir        remove files from destination not found in static directories
      --config string              config file (default is path/config.yaml|json|toml)
      --configDir string           config dir (default "config")
  -c, --contentDir string          filesystem path to content directory
      --debug                      debug output
  -d, --destination string         filesystem path to write files to
      --disableKinds strings       disable different kind of pages (home, RSS etc.)
      --enableGitInfo              add Git revision, date, author, and CODEOWNERS info to the pages
  -e, --environment string         build environment
      --forceSyncStatic            copy all files when static is changed.
      --gc                         enable to run some cleanup tasks (remove unused cache files) after the build
  -h, --help                       help for hugo
      --ignoreCache                ignores the cache directory
      --ignoreVendorPaths string   ignores any _vendor for module paths matching the given Glob pattern
  -l, --layoutDir string           filesystem path to layout directory
      --log                        enable Logging
      --logFile string             log File path (if set, logging enabled automatically)
      --minify                     minify any supported output format (HTML, XML etc.)
      --noChmod                    don't sync permission mode of files
      --noTimes                    don't sync modification time of files
      --panicOnWarning             panic on first WARNING log
      --poll string                set this to a poll interval, e.g --poll 700ms, to use a poll based approach to watch for file system changes
      --printI18nWarnings          print missing translations
      --printMemoryUsage           print memory usage to screen at intervals
      --printPathWarnings          print warnings on duplicate target paths etc.
      --printUnusedTemplates       print warnings on unused templates.
      --quiet                      build in quiet mode
      --renderToMemory             render to memory (only useful for benchmark testing)
  -s, --source string              filesystem path to read files relative from
      --templateMetrics            display metrics about template executions
      --templateMetricsHints       calculate some improvement hints when combined with --templateMetrics
  -t, --theme strings              themes to use (located in /themes/THEMENAME/)
      --themesDir string           filesystem path to themes directory
      --trace file                 write trace to file (not useful in general)
  -v, --verbose                    verbose output
      --verboseLog                 verbose logging
  -w, --watch                      watch filesystem for changes and recreate as needed

Use "hugo [command] --help" for more information about a command.
  

Memulai Website Dengan Hugo

Sampai di sini akan saya persingkat saja artikel tentang hugo supaya kalian bisa langsung mencobanya, sudah saya siapkan tema Hugo gratis yang sudah di redesain oleh saya sendiri. Silahkan cloning repo temanya di sini.

Setelah cloning repository selesai, masuk ke dalam folder tema lalu jalankan perintah hugo serve. Kemudian buka link http://localhost:1313.

Start building sites … 
hugo v0.97.3-078053a43d746a26aa3d48cf1ec7122ae78a9bb4 linux/amd64 BuildDate=2022-04-18T17:22:19Z VendorInfo=gohugoio

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

Built in 178 ms
Watching for changes in /tmp/XploIT/{archetypes,content,static,themes}
Watching for config changes in /tmp/XploIT/config.yaml, /tmp/XploIT/config/_default, /tmp/XploIT/themes/hugo-theme-novela/config.yaml, /tmp/XploIT/themes/hugo-theme-novela/config/_default, /tmp/XploIT/go.mod
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:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
  

Itu adalah cara untuk menjalankan website dengan hugo, lalu sekarang bagaimana cara mempublikasikan websitenya agar dapat di akses semua orang?

Untuk publish web statis hugo, kita bisa memanfaatkan framework netlify sebagai server skaligus hosting yang bisa kita pakai secara gratis.

Tentang Netlify

Netlify adalah penyedia salahsatu layanan hosting untuk static site dengan berbagai fitur menarik yang menyediakan semua kebutuhan untuk workflow web development zaman now. Mengapa saya bilang zaman now?

Karena di Netlify tidak lagi menggunakan FTP seperti yang biasa kita temukan pada shared hosting lainnya. Netlify hanya menggunakan Git dan CI/CD untuk melakukan deployment. Framework ini sangat membantu dalam melakukan deployment project website statis seperti hugo, getsby, dll.

Selain itu, Netlify juga menyediakan fitur untuk mengelola DNS, SSL atau HTTPS diberikan dengan gratis, form, function, dan lain-lainnya. Bahkan kamu juga dapat melakukan costume domain tentunya gratis juga.

Deploy Project Dengan Netlify

Di atas tadi sudah saya jelaskan sedikit tantang Netlify, sekarang bagaimana cara deploy project web statis yang sudah kita siapkan tadi?

Hal pertama yang harus kalian perhatikan adalah akun "Github", karna netlify tidak menggunakan FTP melainkan hanya menggunakan Git untuk melakukan deployment seperti yang sudah saya jelaskan di atas tadi. Jadi kalian harus sudah punya akun github pribadi, tentunya project web statis kalian sudah di upload ke dalam repository github. Baca artikel tentang "Cara upload project ke github".

Jika sudah di siapkan semua, sekarang mari kita mulai mainkan!

Kunjungi situs resmi netlify, jika belum punya akun silahkan resitrasi terlebih dahulu dan login. Pada tampilan dashboard netlify akan berbeda dengan tampilan dashboard penyedia hosting lainnya, jika kamu pertama kali pasti akan membingungkan cara penggunaannya. Tapi tenang saja akan saya bantu.

Pada halaman dashboard netlify, klik tombol "Add new site" kemudian pilih "Import an existing project" pilih tombol dengan logo github, lalu pilih repository project web statis yang sudah kalian upload ke github. Selanjutnya klik "Deploy site".

Tunggu beberapa detik sampai netlify berhasil melakukan tugasnya, dan jika sudah selesai akan muncul URL site statis kamu. Sekarang project website kamu sudah dapat di akses oleh semua orang. 

Untuk detail cara deploy project, jika kurang jelas dengan tulisan di atas silahkan lihat gambar GIF di bawah ini.

Penutup

Itulah tadi ringkasan artikel tentang "Cara membuat website statis dengan hugo", mohon maaf jika ada salah kata dan salah penulisan dalam artikel ini.

Jangan lupa share artikel ini di medsos kalian agar saya lebih semangat lagi membagikan artikel bermanfaat lainnya.

Jika kamu tertarik dengan memualai project website statis dengan hugo, namun tidak ada ide untuk mulai membuat website. Saya menjual source code tema website statis personal blog yang keren dengan desain UI, Kunjungi situs di bawah untuk demonya.

Demo: https://zidan.xploit.my.id

Pembelian

Cara Membuat Website Statis Dengan Hugo
Rp. 20rb / $2
*Pembelian dapat melalui Gopay, OVO dan lainnya detail info

Metode pembayaran

Bank Transfer Paypal
sudah membayar? konfirmasi di sini
IT Security, content creator, menulis di blogger sejak tiga tahun yang lalu.

Posting Komentar

Tinggalkan komentar sesuai topik tulisan, centang Notify me untuk mendapatkan notifikasi via email ketika komentar kamu di balas.
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
© subangXploits. All rights reserved. Premium By Raushan Design