How I built Kaliskis na Ulap website

I decided to use the Jamstack approach to building a website.

I chose Hugo as my static site generator.

Install Homebrew

1. In terminal, run: /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Install Hugo

1. In terminal, run brew install hugo

Install Go

1. Install Go from here: https://go.dev/dl/
2. Check if you have installed it by running go version in terminal.

Install Visual Studio Code

1. Download Visual Studio Code here: https://code.visualstudio.com/
2. Install.

Install code to launch VSC in terminal

1. Open terminal.
2. Press CMD +SHIFT + P
3. Type shell command
4. Select Install code command in path

Create a new site

1. In terminal, navigate to your desktop by running: cd desktop
2. In terminal, run hugo new site mywebsite (substitute “mywebsite” with the name of your site)
3. This will create a project folder in your desktop with the name you gave it.

Choose a theme

1. Go to https://themes.gohugo.io/ and choose a theme.
2. A good theme with very good documentation great for beginners is Congo.

Install Congo

1. Navigate into the project folder by running: cd desktop/mywebsite
2. Initialize modules for your website by running: hugo mod init mywebsite
3. Open the site directory in VSC using the terminal by running code .
4. In VSC, create a new file config/_default/module.toml
5. Inside the file, copy and paste this:

[[imports]]
path = "github.com/jpanther/congo"

6. In the terminal, run hugo server to download the theme.
7. In your browser, type http://localhost:1313/ to see your new hugo site.

Set up theme configuration files

1. Download the theme config files from Github
2. Copy the files into your config/_default/ folder

Update Congo theme

1. In terminal, navigate to your project directory.
2. Run hugo mod get -u

Personalize your theme

1. In VSC, delete the config.toml file in the root directory.
2. Go to config/_default/config.toml
3. Change the baseURL to the URL you will be using for the site.
4. Change the title to the name of the site.
5. In VSC, go to params.toml
6. Uncomment darMode and keep “auto”.
7. Uncomment description and paste: Laman ng website na ito ang mga sulat ni Henry David Thoreau na isinalin sa Filipino.
8. Set the following to false: showDate, showAuthor, showBreadcrumbs, showEdit, editAppendPath, showHeadingAnchors, showPagination, showReadingTime, showWordCount, showBreadcrumbs, showSummary, groupByYear = false, showTermCount = false

Setup menu

1. In terminal, create two pages by running the following:

hugo new Tungkol-sa-KNU.md

hugo new Makipag-ugnayan.md

2. In VSC, go to each new file created and set draft to false
3. In VSC, go to menus.toml and copy paste the following:

[[main]]

name = "Tungkol sa KNU"

pageRef = "Tungkol-sa-KNU”

weight = 10

[[main]]

name = "Mga Salin"

url = "https://www.craft.do/s/LXnNJVva6enIph"

weight = 20

[[main]]

name = "Makipag-ugnayan"

pageRef = "Makipag-ugnayan”

weight = 30

Create a homepage

1. In VSC, be sure that the configuration for the homepage in params.toml is set to “page”.
2. Create an _index.md file under content.

Create a favicon for the site

1. Go to https://favicon.io/
2. Upload the favicon image.
3. Download the files generated by the tool.
4. Upload the following files to the static folder in your site’s root directory:

static/
├─ android-chrome-192x192.png
├─ android-chrome-512x512.png
├─ apple-touch-icon.png
├─ favicon-16x16.png
├─ favicon-32x32.png
├─ favicon.ico
└─ site.webmanifest

5. Create a new file: layouts/partials/favicons.html