Personal Site Blog dan Portofolio

Personal Site Blog dan Portofolio

📅️ Published:

🔄 Updated:

🕔 5 min read ∙ 1020 words

Overview #

Wisnuwiry site ini adalah sebuah open source blogging dan porotoflio platform yang dibuat dengan Hugo (Static site generator).

Personal site Wisnuwiry

Berikut hasil analisis lighthouse performa dari hasil karya saya.

Hasil Analisis My Site Wisnuwiry

Untuk costumize pada file config.toml disitu bisa custom sesuka hati kalian.

Feature: #

  • Fast Loading
  • Available PWA
  • Full Responsive
  • Lazy load image
  • Bisa Deploy langsung ke netlify
  • etc

Detail or Download #

Anda bisa melihat hasil project saya dan jika ingin kontribusi, ataupun ingin membuat web seperti saya ini bisa check di github saya:

Show Detail

Mungkin teman-teman ingin mencoba hasil karya ku ini, tapi tidak tahu gimana cara setup nya, dan dokumentasinya bagaimana?

Sekarang saya akan menjelaskan sedikit bagaimana cara menggunakanya.

Basic Setup: #

Pastikan teman-teman sudah menginstall hugo terlebih dahulu ya, bila ingin referensinya bisa lihat di Membuat Blog dengan Hugo bagaimana cara install hugo dan menggunakanya.

Pertama-tama untuk setup clone dulu repository saya:

1
2
3

git clone https://github.com/wisnuwiry/blog-v2.git
cd blog-v2
hugo server

Dan ini bisa Anda langsung deploy ke netlify, dengan cara Fork dulu repository saya, kemudian import di netlify.

Wow, sudah jadi website secara lokal sudah bisa Anda jalankan, salamat….

Basic Configuration #

Semua configurasi pada website ini pada file confic.toml berikut contoh confignya:

  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
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148

baseURL                       = "https://example.com/" # your domain site
languageCode                  = "id" 
title                         = "Your name site"
summaryLength                 = 5

[Author] # Used in authorbox
  name                        = "Your name"
  bio                         = "Your Bio personal"
  avatar                      = "img/avatar.png" # your Avatar 

[Params]
  description                 = "Default descriptiion your sute." # Site Description. Used in meta description
  images                      = ["img/avatar.png"]
  copyright                   = "Wisnuwiry" # Copyright holder, otherwise will use .Site.Title
  opengraph                   = true # Enable OpenGraph if true
  twitter_cards               = true # Enable Twitter Cards if true
  mainSections                = ["post"] # Set main page sections
  projectSections             = ["project"] # Set main page sections
  dateFormat                  = "January 02, 2006" # Change the format of dates
  # customCSS                 = ["css/custom.css"] # Include custom CSS files
  customJS                    = []
  mainMenuAlignment           = "right" # Align main menu (desktop version) to the right side
  authorbox                   = true # Show authorbox at bottom of single pages if true
  comments                    = true # Enable comments for all site pages
  related                     = true # Enable Related content for single pages
  relatedMax                  = 5
  mathjax                     = false # Enable MathJax for all site pages
  hideNoPostsWarning          = false # Don't show no posts empty state warning in main page, if true
  fontUnit                    = "em"
  largestFontSize             = 2.5
  smallestFontSize            = 1
  googleSearchConsole         = "" # Google search console code
  GoogleAnalytics             = "" # Google analisi code
  fb_admins                   = "" # Your facebook admin
  fb_app_id                   = "" # Your facebook app id


[Params.Hero]
  title                       = "A Personal Site By WisnuWiry"
  desc                        = "Welcome to my Blog :)"

[Params.Entry]
  meta                        = ["date", "categories"] # Enable meta fields in given order
  toc                         = true # Enable Table of Contents
  tocOpen                     = false # Open Table of Contents block. Optional

[Params.Featured]
  previewOnly                 = false # Show only preview featured image

[Params.Breadcrumb]
  enable                      = true # Enable breadcrumb block globally
  homeText                    = "Home" # Home node text

[Params.Social]
  twitter                     = "" #username your social media ex: wisnuwiry
  telegram                    = ""
  instagram                   = ""
  linkedin                    = ""
  github                      = ""
  medium                      = ""

[Params.Share] # Entry Share block
  facebook                    = true
  twitter                     = true
  reddit                      = true
  telegram                    = true
  linkedin                    = true
  pinterest                   = true

# Web App Manifest settings
# https://www.w3.org/TR/appmanifest/
# https://developers.google.com/web/fundamentals/web-app-manifest/
[Params.Manifest]
  name                        = "Wisnuwiry"
  shortName                   = "Wisnuwiry"
  display                     = "standalone"
  startUrl                    = "/?utm_source=homescreen"
  backgroundColor             = "#FFFFFF"
  themeColor                  = "#0d2538"
  description                 = "Personal Site By Wisnuwiry"
  orientation                 = "portrait"
  scope                       = "/"

[outputFormats]
  [outputFormats.MANIFEST]
    mediaType                 = "application/json"
    baseName                  = "manifest"
    isPlainText               = true
    notAlternative            = true

[outputs]
  home                        = ["HTML", "RSS", "MANIFEST"]

enableRobotsTXT               = true

# Pagination
Paginate                      = 3
 

# Code
[markup]
  # defaultMarkdownHandler    = "blackfriday"
  [markup.goldmark]
    [markup.goldmark.extensions]
      definitionList          = true
      footnote                = true
      linkify                 = true
      strikethrough           = true
      table                   = true
      taskList                = true
      typographer             = true
    [markup.goldmark.parser]
      attribute               = true
      autoHeadingID           = true
      autoHeadingIDType       = "github"
    [markup.goldmark.renderer]
      hardWraps               = false
      unsafe                  = true
      xhtml                   = false
  [markup.blackFriday]
    angledQuotes              = false
    footnoteAnchorPrefix      = ""
    footnoteReturnLinkContents= ""
    fractions                 = true
    hrefTargetBlank           = false
    latexDashes               = true
    nofollowLinks             = false
    noreferrerLinks           = false
    plainIDAnchors            = true
    skipHTML                  = false
    smartDashes               = true
    smartypants               = true
    smartypantsQuotesNBSP     = false
    taskLists                 = true
  [markup.highlight]
    codeFences                = true
    guessSyntax               = false
    hl_Lines                  = ""
    lineNoStart               = 1
    lineNos                   = false
    lineNumbersInTable        = false
    noClasses                 = false
    style                     = "dracula"
    tabWidth                  = 4
  [markup.tableOfContents]
    endLevel = 3
    ordered = false
    startLevel = 2

Jadi teman-teman tidak perlu edit file langsung cuma custom config ini saja.

Membuat sebuah artikel baru #

Untuk semua content pada website ini tersedia pada folder content/.

Anda harus mengetikkan command ini pada terminal ataupun cmd.

1

hugo new post/nama-artikel-yang-ingin-dibuat/index.md

Berikut contoh simple parameter untuk config tiap file:

1
2
3
4
5
6

---
title: "Your title Article"
date: 2020-03-21T17:33:17+07:00
draft: false
tags: ["web", "hugo"]
---

dan ini untuk sebuah page/halaman:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

---
title: "Your title page"
menu: main
toc: false
authorBox: false
breadcrumb: false
comments: false
share: false
contact: true
page: true
---

Sekian penjelasan dari saya, bila kurang jelas bisa comment dibawah, atau bisa langsung hubungi saya. Selamat mencoba.

Terdapat kesalahan penulisan, typo, ataupun juga kurang sesuai dalam penulisan, bantu Saya Edit on Github.

You should also read:

💬 Comment: