devkuma – devkuma

Sites

kc@example.com (kc kim) — Sun, 01 Sep 2024 10:28:00 +0900

A collection of useful websites.

Bluetooth Came from King Harald Bluetooth of Norway

kc@example.com (kc kim) — Sun, 17 Mar 2024 00:26:00 +0900

The term “Bluetooth” comes from the name of Harald Bluetooth, king of Norway. Harald Bluetooth was a 10th-century king who unified Denmark and Norway, and his name was pronounced “Blaten” or “Blaton” in Norwegian.

Bluetooth technology took its name from this, carrying the meaning of a technology that enables communication between different peoples centered around Norway at that time. Accordingly, Bluetooth technology developed into a technology used to improve wireless communication between various devices.

Today, Bluetooth technology is widely used to wirelessly transfer data and communicate between various electronic devices such as mobile phones, speakers, headsets, and car systems. Like its namesake Harald Bluetooth, it serves to promote communication between different devices and connect them into one.

References

Miscellaneous

kc@example.com (kc kim) — Sat, 02 Dec 2023 11:35:00 +0900

Game

kc@example.com (kc kim) — Sat, 02 Dec 2023 11:33:00 +0900

Apache Was Provided as an httpd Patch

kc@example.com (kc kim) — Mon, 27 Nov 2023 01:37:00 +0900

Apache

Apache is a famous HTTP server.

About the Apache HTTP Server Project - The Apache HTTP Server Project https://httpd.apache.org/ABOUT_APACHE.html

The origin is also explained in the official FAQ.

Why the name “Apache”?
https://wiki.apache.org/httpd/FAQ#Why_the_name_.22Apache.22.3F

The name ‘Apache’ was chosen from respect for the Native American Indian tribe of Apache (Indé), well-known for their superior skills in warfare strategy and their inexhaustible endurance. For more information on the Apache Nation, we suggest searching Google, or AllTheWeb.

Secondarily, and more popularly (though incorrectly) accepted, it’s a considered cute name which stuck. Apache is “A PAtCHy server”. It was based on some existing code and a series of “patch files”.

These days Apache as such means much more. It’s first and foremost the Apache Software Foundation, under which there are dozens of projects.

Officially, the name was chosen out of respect for the Apache people, a Native American tribe.

However, the more famous story is probably the second one, “a patchy server”. It is also written in “About the Apache HTTP Server Project”: Apache originally began as patches for NCSA httpd.
This is said to be why it came to be called patch files or a patchy server.

Although it is written as incorrect, it also feels as if the first explanation may have come later…

Ajax Is a Flush Toilet?

kc@example.com (kc kim) — Mon, 27 Nov 2023 00:25:00 +0900

Ajax in IT

Ajax is an abbreviation for ‘Asynchronous JavaScript And XML’, and it is probably a familiar concept to developers who build web applications.

Ajax (programming)
https://en.wikipedia.org/wiki/Ajax_(programming)

Another Meaning of Ajax

In fact, this was also the name of a flush toilet.
Around the 16th century, during the reign of Queen Elizabeth I of England, a courtier named John Harington invented a flush toilet and named it “Ajax”.
There was originally slang for a toilet called “jakes”, and it seems the name imitated that word.

For reference, toilets are often abbreviated as “WC”, but writing about that would go far off topic, so it is omitted here.

John Harington (writer)
https://en.wikipedia.org/wiki/John_Harington_(writer)

Invention of the toilet Around this time, Harington also devised Britain’s first flushing toilet – called the Ajax (i.e., a “jakes”, which was an old slang word for toilet). It was installed at his manor in Kelston. In 1596, Harington wrote a book called A New Discourse upon a Stale Subject: The Metamorphosis of Ajax about his invention.

There are several stories about the etymology, but in fact it is not clear whether Ajax in web applications was named with the above meaning in mind.

Ajax is known to have first appeared in the article below, but that content cannot be found there.

Ajax: A New Approach to Web Applications
https://immagic.com/eLibrary/ARCHIVES/GENERAL/ADTVPATH/A050218G.pdf

There is a detergent called “Ajax” in the United States, so perhaps the name was chosen with that in mind.
https://en.wikipedia.org/wiki/Ajax_(cleaning_product)

At the time, SOAP also seems to have been used quite a lot for data communication with XML, so that may have been considered as well.

The blog above seems to have caused a big response after publication and updated its Q&A, but there does not seem to have been a question like “Does Ajax you meant to relate to a kind of cleaning product?”

Or perhaps it was judged to be an irrelevant question and ignored…

Tea https://www.dailymail.co.uk/femail/cleaning/article-10873265/What-does-AJAX-stand-Spray-wipe-brands-heritage-revealed.html

What Is the Real Meaning of Booting a Computer?

kc@example.com (kc kim) — Mon, 27 Nov 2023 00:25:00 +0900

Booting

When starting a computer, we say that it boots. This seems to come from bootstraps, the parts used to pull boots on more easily. Here, bootstraps are not shoelaces.

Bootstrapping - Computing https://en.wikipedia.org/wiki/Bootstrapping#Computing

Then why, and through what process, did the computer boot process come to be called bootstrapping? It seems the exact facts are not known.

There are several theories. First, there is a famous paradoxical expression in English, “Pull oneself up by one’s bootstraps”. At first glance it seems possible, but in reality it is impossible; it is used to mean an absurd and unrealizable method.

Later, this phrase began to be used with another meaning. Around 1922, it was reportedly used to mean a way to improve oneself independently without help from others.

Bootstrapping - Etymology https://en.wikipedia.org/wiki/Bootstrapping#Etymology

Tall boots may have a tab, loop or handle at the top known as a bootstrap, allowing one to use fingers or a boot hook tool to help pulling the boots on. The saying “to pull oneself up by one’s bootstraps”[3] was already in use during the 19th century as an example of an impossible task. The idiom dates at least to 1834, when it appeared in the Workingman’s Advocate: “It is conjectured that Mr. Murphee will now be enabled to hand himself over the Cumberland river or a barn yard fence by the straps of his boots."[4] In 1860 it appeared in a comment on philosophy of mind: “The attempt of the mind to analyze itself [is] an effort analogous to one who would lift himself by his own bootstraps."[5] Bootstrap as a metaphor, meaning to better oneself by one’s own unaided efforts, was in use in 1922.[6] This metaphor spawned additional metaphors for a series of self-sustaining processes that proceed without external help.[7]

The Real Meaning of Bootstrapping

In summary, it seems to have been used with two broad meanings.

An impossible or foolish method
A method of improving oneself independently

Now consider the boot process of early computers.

In a computer with only CPU/RAM/IO
- Immediately after power is turned on, RAM contains no program data.
- A loading program is needed to load a program from external storage.
- Another loading program is needed to load the loading program into memory.

Because this situation occurs, the computer cannot operate satisfactorily by itself at all. This situation recalls the first meaning of “Pull oneself up by one’s bootstraps”.

In practice, code was written one byte at a time using built-in toggle switches and then executed after input was complete. There were probably also cases where code was written to read data from external storage such as punch cards or tape, load it into RAM, and then execute the loaded content.

If there is a mechanism that automatically loads a program into RAM from external storage, then when power is turned on and a basic button is pressed, a dedicated circuit reads data from the external storage. After loading the program from external storage into RAM, the CPU is initialized and processing starts from the default memory address. If necessary, another program is loaded from another input device to perform more complex processing. This recalls the second meaning of “Pull oneself up by one’s bootstraps”.

Wikipedia also explains it in this sense. https://en.wikipedia.org/wiki/Bootstrapping#Computing

All of the above is speculation, but in the early days of computers there were probably many situations like this. People working in the field at the time may have felt, “This really is a pull itself up by its bootstraps situation.”
Perhaps that is why the word bootstrapping started to be used casually and gradually took root.

References

The Origins of the Phrase “Pull Yourself Up By Your Bootstraps” - Useless Etymology

Interesting IT Term Etymologies

kc@example.com (kc kim) — Mon, 27 Nov 2023 00:06:00 +0900

The etymology of computer terms comes from many different fields. This section explains the origins of interesting IT terms.

Reference: wikipedia | List of computer term etymologies

What Is a Timestamp in IT?

kc@example.com (kc kim) — Mon, 27 Nov 2023 00:06:00 +0900

What Is a Timestamp?

A timestamp literally means a time mark. It refers to the date and time stamped on a document, and in IT it refers to date and time information assigned and stored as one of the properties of a file or data.

Origin of the Timestamp

The timestamp is said to have originated from rubber stamps once used in the West to indicate the time when documents such as mail were sent or received. The date was placed in the center, and a triangle at the top pointed to a specific time around a circle representing 24 hours.

Stamping this mark on paper to indicate a specific time has become, in today’s IT systems, a way of representing elapsed time based on the epoch.

Image source: wikimedia

Timestamps in File Systems

In an operating system’s file system, creation time, last modification time, and last access time are recorded as kinds of properties for files or directories (folders). These are called timestamps.

The file system automatically assigns and updates them when files or directories are created, written, or read. Based on this information, files can be sorted by creation order or update order, and you can check which of the same files in different locations was updated most recently.

Time Certification for Electronic Documents

A mechanism that proves an electronic document existed at a specific date and time in the past and has not been tampered with up to the present is called time certification. The date and time information assigned at that point is called a timestamp.

Like digital signatures, it uses a trusted third party called a Time-Stamping Authority (TSA). The document creator sends the hash value of the document data, which is short data representing its characteristics, to the certification authority. The certification authority then generates another hash value from the received date and time and the document hash value.

Later, a person who wants to verify the document calculates a hash value from the document they have and the date and time claimed by the creator. If it matches the hash value from the time of issuance, the person can confirm that the document actually existed when the timestamp was issued and has not been tampered with since.

Pac-Man Came from the Hockey Puck

kc@example.com (kc kim) — Mon, 27 Nov 2023 00:06:00 +0900

Pac-Man

Pac-Man is a famous game from the Japanese game company Namco. In English-speaking countries, it is a game character known by even more people than Mario, and it is also one of the most recognizable games and characters. Of course, in Korea as well, almost everyone knows roughly what Pac-Man gameplay looks like.

The original English notation is said to have been intended as Puck-Man because the character resembled a hockey puck. However, the name became Pac-Man rather than Puck Man because there was concern that the letter “P” could be changed to “F” when written.

Pac-Man - Wikipedia
https://en.wikipedia.org

The result was a game he named Puck Man[48] as a reference to the main character’s hockey puck shape.[49] Later in 1980, the game was picked up for manufacture in the United States by Bally division Midway,[45] which changed the game’s name from Puck Man to Pac-Man in an effort to avoid vandalism from people changing the letter ‘P’ into an ‘F’ to form the word fuck.

How to Reference Information Set in Hugo Configuration Files (config.yml)

kc@example.com (kc kim) — Sun, 14 May 2023 16:33:00 +0900

Configuration File Basics

General settings for a Hugo site are placed in the root directory and use one of the following configuration files. If multiple files exist, the first discovered one is selected.

File name	Description
`config.toml`	Written in TOML format (default)
`config.yaml`	Written in YAML format
`config.json`	Written in JSON format

Example config.toml

baseURL = "https://www.devkuam.com/"
languageCode = "ko-kr"
title = "My Blog"
themesDir = "../hugo_themes"
theme = "devkuma"

Configurable parameters and their default values are listed below.

Configure Hugo | Hugo

Referencing Setting Values

Referencing Parameters Defined by Hugo

Parameters set in the configuration file can be referenced in template files using the .Site variable. For example, values such as the title parameter and baseURL set in config.toml can be referenced as follows.

This site's title is <b>{{ $.Site.Title }}</b>.
This site's base URL is <b>{{ $.Site.BaseURL }}</b>.

Parameter names begin with uppercase letters, so use .Site.Title rather than .Site.title. You can see which property names correspond to each setting by checking the list of Site variables below.

To branch processing depending on whether a parameter is configured, write it as follows.

{{ with $.Site.GoogleAnalytics }}
  The Google Analytics tracking ID is <b>{{ . }}</b>.
{{ else }}
  The Google Analytics tracking ID is not configured.
{{ end }}

The example above uses the googleAnalytics parameter to check whether a tracking ID for Google Analytics has been configured.

Referencing Custom Parameters

To set custom parameters in the configuration file, add parameters under the params section.

config.toml

baseURL = "https://www.devkuam.com/"
languageCode = "ko-kr"
title = "My Blog"

[params]
  GitHubUser = "redfreek2c"
  Twitter = "kimkc"
  Subtitle = "Technical sharing"
  Description = "This section records detailed site information"
  SidebarRecentLimit = 5
  ListOfFoo = ["foo1", "foo2"]

Custom parameters can be referenced from template files in the form $.Site.Params.name.

The example below references the Description value of a custom parameter variable.
layouts/partials/head.html

<meta name="description" content="{{ if .IsHome }}{{ $.Site.Params.description }}{{ else }}{{ .Description }}{{ end }}" />

Here, the main first page (home page) references the configuration file setting ($.Site.Params.Description), while other pages reference the description value set in each page’s front matter.

Insert Google Analytics Tracking Code in Hugo (googleAnalytics)

kc@example.com (kc kim) — Sun, 14 May 2023 16:33:00 +0900

With Google Analytics, you can analyze website access information from multiple angles. This article explains how to easily insert Google Analytics code into a website created with Hugo.

Set the Tracking ID in the Configuration File

First, in the Google Analytics admin screen, run “Add property” and add the address of the website you want to analyze. If you do not have a Google Analytics account, create one first. The tracking ID issued at this time, such as G-AB1CD2EFGH, is identification information for determining access to that website. Because this ID differs by website, it is best to set it in the Hugo configuration file.

Hugo provides the googleAnalytics parameter in advance as a configuration file parameter. Set the tracking ID issued by the Google Analytics site as follows.
config.toml

baseURL = "https://www.devkuam.com/"
languageCode = "ko-kr"
title = "My Blog"
theme = "devkuma"

googleAnalytics = "G-AB1CD2EFGH" # example code

With this setting, you can check the tracking ID in template files with .Site.GoogleAnalytics.

Configure Automatic Insertion of Tracking Code (JS)

To use Google Analytics, each page must include tracking code like the following before the head element.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-AB1CD2EFGH"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-AB1CD2EFGH');
</script>

Here, use a Hugo partial template to include the HTML code above in each page. The part that specifies a tracking ID such as G-AB1CD2EFGH is replaced with the value specified by the googleAnalytics parameter in the configuration file.

layouts/partials/analytics.html

{{ if not .Site.IsServer }}
{{ with .Site.GoogleAnalytics }}
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id={{ . }}"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '{{ "{{" }} . }}');
</script>

{{ end }}
{{ end }}

Lines 1 and 2 of the template above control output so that tracking code is not printed when testing on a local Hugo server or when googleAnalytics is not configured.

Include the created partial template from a template file as follows. Here, it is included from the base template (baseof).
layouts/_default/baseof.html

<!DOCTYPE html>
<html lang="ja">
<head>
  {{- partial "analytics" . -}}
  <meta charset="UTF-8">
  ...omitted...
</head>
<body>
  ...omitted...
</body>
</html>

Now all pages include the Google Analytics tracking code.

Appendix: Hugo Built-in Template

In fact, Hugo provides a built-in internal template that includes Google Analytics tracking code.

You can easily insert tracking code by writing the following in any template file.

{{ template "_internal/google_analytics.html" . }}  <!-- synchronous version -->
{{ template "_internal/google_analytics_async.html" . }}  <!-- asynchronous version -->

However, built-in templates do not suppress code output when running on a local server, and they may not flexibly handle Google changes, so it is better to create a partial template if possible.

Make Hugo Count Korean Words Correctly in Page Summaries (hasCJKLanguage, isCJKLanguage)

kc@example.com (kc kim) — Sun, 14 May 2023 16:06:00 +0900

On Hugo post list pages, the beginning of an article is displayed as a summary limited to a specific number of words, usually 70 words. However, this word count is calculated based on languages such as English by default, so Korean and other CJK text is not counted correctly, and summaries may be displayed too long.

Configure in the Settings File

To count Korean characters correctly and display short summaries, set hasCJKLanguage to true in the settings file as follows.

For config.toml

hasCJKLanguage = true

For config.yaml

hasCJKLanguage: true

With this, Hugo’s internal .Summary and .WordCount work correctly for Korean, and shorter summary text is displayed.

Configure Per Page

If you want to configure it for each page, set isCJKLanguage to true in the front matter as follows.

---
title: Post title
date: "2023-05-14"
isCJKLanguage: true
---

Post body

Use hasCJKLanguage in the settings file and isCJKLanguage in the front matter of Markdown files.

Getting Started with Hugo

kc@example.com (kc kim) — Sun, 14 May 2023 15:36:00 +0900

Creating Hugo Posts

kc@example.com (kc kim) — Sun, 14 May 2023 15:36:00 +0900

Hugo Commands

kc@example.com (kc kim) — Sun, 14 May 2023 15:36:00 +0900

Hugo Configuration

kc@example.com (kc kim) — Sun, 14 May 2023 15:36:00 +0900

Check Unused Templates or Shortcodes in Hugo (hugo --printUnusedTemplates)

kc@example.com (kc kim) — Sun, 14 May 2023 15:32:00 +0900

To search for templates that are not used when building a Hugo site, use the --printUnusedTemplates option as follows.

% hugo --printUnusedTemplates
Start building sites …
hugo v0.111.3+extended darwin/arm64 BuildDate=unknown

...omitted...

WARN 2023/05/14 15:25:46 Template _default/list.rss.xml is unused, source file /Users/user/...omitted.../mysite/layouts/_default/list.rss.xml
WARN 2023/05/14 15:25:46 Template _default/single.html is unused, source file /Users/user/...omitted.../mysite/themes/docsy/layouts/_default/single.html
WARN 2023/05/14 15:25:46 Template blog/baseof.html is unused, source file /Users/user/...omitted.../mysite/docsy/layouts/blog/baseof.html

...omitted...

WARN 2023/05/14 15:25:46 Template swagger/single.html is unused, source file /Users/user/user/...omitted.../mysite/themes/mytheme/layouts/swagger/single.html
Total in 3146 ms

In the example above, you can see that several templates or shortcodes are not used.

How to Start and Stop Multiple Hugo Servers at Once

kc@example.com (kc kim) — Sun, 14 May 2023 14:52:00 +0900

About Starting Multiple Hugo Servers

This article explains how to start servers for multiple Hugo sites at the same time from a single command prompt.

Here, assume that several Hugo projects exist under the home directory as follows.

~/website/site1
~/website/site2
~/website/site3

To start the Hugo server for each Hugo project, you can start multiple Hugo servers by specifying different port numbers as follows.

$ hugo server -p 50001 -s ~/website/site1
$ hugo server -p 50002 -s ~/website/site2
$ hugo server -p 50003 -s ~/website/site3

However, as described above, one server process occupies one command prompt, so when starting multiple Hugo servers, you need to keep multiple command prompts open.

Start Multiple Hugo Servers from One Prompt

Windows

With the Windows start command, you can run the Hugo command in the background, so you can start multiple Hugo servers without opening additional command prompts.

For example, the following batch file starts three Hugo servers in the background.
start-servers.bat

@echo off
start /b hugo server -p 50001 -s C:/website/site1
start /b hugo server -p 50002 -s C:/website/site2
start /b hugo server -p 50003 -s C:/website/site3
title Hugo Servers

The final line changes the command prompt window title to “Hugo Servers” with the title Hugo Servers command. Setting the window title is recommended because it makes it easier to identify what the window is for just by looking at the taskbar.

To stop all Hugo servers running in the background together, use the taskkill command to terminate all hugo.exe processes.

stop-servers.bat

@echo off
taskkill /f /im hugo.exe

Linux and macOS

On Linux and macOS, you can easily start multiple servers in the background by adding & at the end when running the Hugo command as follows.
start-servers.sh

hugo server -p 50001 -s ~/website/site1 &
hugo server -p 50002 -s ~/website/site2 &
hugo server -p 50003 -s ~/website/site3 &

To stop the Hugo server processes together, you can easily terminate them with the killall command.
stop-servers.sh

killall hugo

Alternatively, instead of a shell script, you can define functions or aliases and use them quickly.
~/.bash_profile

function hugo-start {
    hugo server -p 50001 -s ~/website/site1 &
    hugo server -p 50002 -s ~/website/site2 &
    hugo server -p 50003 -s ~/website/site3 &
}

function hugo-stop {
    killall hugo
}

When Page Changes Are Not Reflected in the Hugo Server (hugo server --ignoreCache)

kc@example.com (kc kim) — Sun, 14 May 2023 14:30:00 +0900

Ignore Cache Option

Even after starting the Hugo server and updating a page, changes may not be reflected even if you reload the web browser, especially in shared parts such as layouts and partials.

If the page build succeeds but changes are not reflected, it is a good idea to suspect the Hugo server cache. When running the hugo server command, using the --ignoreCache option renders the page without using the cache.

$ hugo server --ignoreCache

Configure the Same Theme Directory Across Multiple Hugo Sites (themesDir)

kc@example.com (kc kim) — Sun, 14 May 2023 14:23:00 +0900

The ways to make multiple Hugo projects reference the same theme are as follows.

Create a theme repository on GitHub or elsewhere, and clone that repository into multiple Hugo projects.
Replace each Hugo project’s themes directory with a symbolic link to a shared theme directory.
Configure the settings file (config.toml) to reference the shared theme directory.

The first method is the most common, but when applying the same theme to each site with Git, it can be a little cumbersome during development. In that case, the second and third methods are recommended.

Specify a Shared Theme Directory with a Symbolic Link

On operating systems such as Linux and macOS where symbolic links can be created, it is easy to reference a shared theme directory with a symbolic link. For example, assume there is a shared theme directory (hugo_themes) and three Hugo projects that reference it (site1, site2, and site3) as follows.

.
├── hugo_themes (shared theme directory)
│   └── mytheme
│       ├── archetypes
│       ├── layouts
│       ├── static
│       └── ...
├── site1  (Hugo site 1)
├── site2  (Hugo site 2)
└── site3  (Hugo site 3)

If you replace each Hugo project’s themes directory with a symbolic link to hugo_themes, all sites can point to the same theme directory.

$ cd site1
$ rmdir themes
$ ln -s ../hugo_themes themes

Because setting the theme name to use is still required, set the theme name in each Hugo project’s configuration file (config.toml). site1/config.toml

theme = "mytheme"

Configure a Shared Theme Directory in the Settings File

You can also configure the shared theme directory in Hugo’s configuration file (config.toml). The theme directory is configured with a variable called themesDir, and this directory path can be set to a path above the Hugo project directory.
config.toml

themesDir = "../hugo_themes"
theme = "mytheme"

For example, if each Hugo project’s configuration file is set as above, the shared theme directory (hugo_themes/mytheme/) in the parent directory can be used.

Without using the configuration file, you can also specify the theme directory with the Hugo command option --themesDir.

$ hugo server --themesDir ~/gitwork/hugo_themes

If both the themesDir variable in the settings file and the command-line argument --themesDir are specified, the command-line argument takes precedence.

Specify the Port When Starting the Hugo Server - Command Option (hugo server --port)

kc@example.com (kc kim) — Sat, 13 May 2023 02:32:00 +0900

When you start a Hugo server with the hugo server command, it starts a web server that uses port 1313 by default.

However, if you try to start multiple Hugo servers at the same time, later Hugo servers are assigned arbitrary port numbers. Port numbers from the private port range, 49152 to 65535, are used.

Specify the Port

To specify an arbitrary port number, use the -p (--port) option as follows.

Example: Start the Hugo server with port number 51234

$ hugo server -p 51234

Start Multiple Hugo Servers at the Same Time

When starting multiple Hugo servers at the same time, it is best to decide the port number each site will use.

Example: Start three Hugo servers at the same time

$ hugo server -p 50001 -s ~/mysite1
$ hugo server -p 50002 -s ~/mysite2
$ hugo server -p 50003 -s ~/mysite3

The websites started as above can be accessed at the following addresses.

http://localhost:50001/
http://localhost:50002/
http://localhost:50003/

Specify the Hugo Source Directory Path - Command Option (hugo server --source)

kc@example.com (kc kim) — Sat, 13 May 2023 02:25:00 +0900

Specify the Source Directory Path

When running the hugo command, you can start it by specifying the source directory path with the -s (--source) option.

Example: Start the Hugo server using the source code in ~/mysite

$ hugo server -s ~/mysite

Example: Create a new article in ~/mysite

$ hugo new sample.md -s ~/mysite

Setting a Command Alias

In the example above, the source directory was specified after the command with the -s ~/mysite option, but Hugo also works if it is specified before the command.

Using this, if you set a command alias (alias) like the following, it is convenient because you can run the command immediately from any directory. ~/.bash_profile

alias hugo-mysite=hugo -s ~/mysite

For example, you can use it as follows.

$ hugo-mysite new sample.md  # Create a post
$ hugo-mysite server         # Start the Hugo server
$ hugo-mysite                # Build the site (output to ~/mysite/public)

How to Configure Hugo Themes - Themes

kc@example.com (kc kim) — Tue, 09 May 2023 00:40:00 +0900

Downloading a Theme

When generating a website with Hugo, you need to configure a base theme for its appearance. If you output a website with the hugo command without setting a theme, a blank white page is displayed. You can create a theme yourself, but themes already created by others are published on the Hugo Themes page, so it is best to download and use one from there first. Usage differs slightly by theme, so read each theme’s description (README.md) for details.

How to Download a Theme ZIP File

For example, if you like the theme “Beautiful Hugo” below, click the Download button.

In general, you will be moved to the GitHub site. Click “Code” and then click “Download zip” to download the theme.

Place the downloaded theme in the project’s themes directory. In this case, place it in the themes/beautifulhugo directory.

How to Get a Theme from Git

Themes are managed on GitHub, so if you have an environment where you can use Git commands, it is simple to obtain one with git clone as shown below. Of course, you first need to know the repository URL. You can copy the URL displayed when you click the Code button on GitHub.

$ git clone https://github.com/halogenica/beautifulhugo.git beautifulhugo

If you manage your own site with Git, it is better to bring in the theme as a Git submodule as follows. The Git submodule command (git submodule) is a little difficult, but managing a theme as a submodule lets you apply updates from the theme side appropriately.

Get the theme as a submodule

$ git submodule add https://github.com/halogenica/beautifulhugo.git beautifulhugo

When fetching theme updates

$ git submodule update --remote --recursive

Theme-Specific Settings, If Needed

Some themes depend on external components and require initial setup. If a theme asks you to install related modules as shown below, run the commands as-is.

$ npm install
$ npm run build

For reference, npm is a package manager for Node.js and is installed together when you install Node.js.

Specify the Theme to Use

You can download several themes into the themes directory. Among them, set the theme you currently want to use in the Hugo configuration file as follows.

config.toml

theme = "beautifulhugo"

After setting the theme, generate the website with the hugo command. Based on the configured theme, files for upload such as HTML, CSS, and JS will be output to the public directory.

$ hugo

The hugo server command uses the theme configured in config.toml when starting the web server.

You can also specify the theme to use with the -t option when running the hugo command.

$ hugo -t theme_name         // When outputting the site
$ hugo server -t theme_name  // When starting the web server

Creating My Own New Hugo Theme - new theme

kc@example.com (kc kim) — Tue, 09 May 2023 00:40:00 +0900

Creating a New Theme

Hugo has many templates that are already publicly available, but you can also design and create a theme exactly as you want. To create a theme, first create a basic form with the following command.

$ hugo new theme {theme name}

For example, running the following creates the themes/my-theme directory.

$ hugo new theme my-theme

The generated files look like the following. The directory structure is created, but the file contents are almost empty. Create templates based on these files.

Form of the newly created theme

themes/my-theme
├── LICENSE   (MIT license)
├── archetypes
│   └── default.md
├── layouts
│   ├── 404.html
│   ├── _default
│   │   ├── baseof.html
│   │   ├── list.html
│   │   └── single.html
│   ├── index.html
│   └── partials
│       ├── footer.html
│       ├── head.html
│       └── header.html
├── static
│   ├── css
│   └── js
└── theme.toml (basic configuration file)

Creating the First Page Layout (layouts/index.html)

The layouts/index.html file inside the theme directory is the template file for the site’s first page. If you are creating a site made up of only one HTML file (SPA: Single Page Application), you only need to create this file. Since nothing is written in the initial state, first modify it so that only the site name is displayed at startup.

themes/my-theme/layouts/index.html

<h1>{{ .Site.Title }}</h1>

As shown above, you can output the value of the Title field of the .Site variable, which holds site information. The text set in title in the site configuration file (config.toml) is displayed here.

After creating it up to this point, check the site using this theme. To specify the theme to use with the hugo command, use the -t {theme name} option.

$ hugo server -t my-theme

After starting the Hugo server as above, access http://localhost:1313/ to check the view.

Figure: First page using my theme

Displaying a List of All Pages on the First Page

Inside the first page template (layouts/index.html), you can refer to the .Data.Pages variable to obtain information for all pages (Page variables). If you loop through this information with range, you can output links to all pages.

themes/my-theme/layouts/index.html

<h1>{{ .Site.Title }}</h1>
<ul>
  {{ range .Data.Pages }}
    <li><a href="{{ .RelPermalink }}">{{ .Title }}</a> ({{ .Date.Format "2006-01-02" }})</li>
  {{ end }}
</ul>

Creating a Layout for Each Page (layouts/_default/single.html)

Each linked page is generated based on the layouts/_default/single.html template file, so this file must be created in advance. In this template, you can refer to fields of the Page variable. For example, .Title refers to the page title and .Content refers to the page body.

themes/my-theme/layouts/_default/single.html

<h1>{{ .Title }}</h1>

{{ .Content }}

Prepare the content of each page in the content/ directory as follows.

content/page1.md

---
title: "Page1 Title"
date: "2017-09-10"
---

Page1 Content

If you create the layout file and content as shown above, each page’s content will be displayed as follows.

Figure: Output with a single page template

From here, continue creating template code in the layouts directory in the same way to complete your theme. Shortcodes that can be used in Markdown files can also be provided as custom theme components (layouts/shortcodes).

How to Create Draft Posts in Hugo - Draft Page

kc@example.com (kc kim) — Sat, 06 May 2023 00:07:00 +0900

Draft Posts

Hugo’s draft feature temporarily stores unfinished article files in the same location as other articles. If draft: true is written in the front matter section of a page, that page is treated as a draft.

YAML format

---
draft: true
---

Body

TOML format

+++
draft = true
+++

Body

Posts written as drafts are not output as HTML files by default. To output draft posts as well, specify the -D (--buildDrafts) option with the hugo command.

Output draft posts

% hugo -D         # When generating the site
% hugo server -D  # When starting the server

Be Careful with Draft Posts Output to the public Directory

The hugo command outputs HTML files and other generated files to the public directory by default, but at that time it does not delete draft posts that already exist inside the public directory.

% hugo -D  # Generates the site including draft posts.
% hugo     # Even if generated later with draft mode off, existing draft posts are not deleted.

When publishing a website, be careful not to upload draft articles by mistake. Before uploading posts, it is safer to delete the public directory and regenerate it with the hugo command.

Linux / macOS

% rm -Rf public && hugo

Windows

C:\> rmdir /s /q public & hugo

Checking the List of Draft Posts

Checking from the Command Line

If you run hugo list drafts on the command line, you can see a list of posts in the content directory that are marked as drafts, meaning their front matter contains draft: true.

% hugo list drafts
content/draft.md
content/post/sample2.md

Reference: hugo list drafts | Hugo

Checking in a Template

To list links to draft posts in a template file, write the following first.

layouts/index.html

<h2>Draft Pages</h2>
<ul>
  {{ range (where .Site.Pages ".Draft" true) }}
    <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
  {{ end }}
</ul>

The part written as where .Site.Page ".Draft" true specifies the search condition for extracting draft posts.
It specifies that all pages in the site (.Site.Pages) whose page variable .Draft is true (".Draft" true) should be listed.

Then run the startup command with the -D option.

% hugo server -D

Determining Whether a Post Is a Draft

To check in a template file whether the currently rendered article is a draft, meaning draft: true is written in the front matter, refer to the page variable .Draft.

layouts/_default/single.html

<h1>{{ .Title }}</h1>
{{ if .Draft }}
  <b>Warning: This post is still a draft.</b>
{{ end }}

Of course, it will only be visible if you start Hugo with the -D option.

How to Create Hugo Posts

kc@example.com (kc kim) — Fri, 05 May 2023 23:34:00 +0900

Creating a New Post File

Website posts published with Hugo are created as Markdown files in the content directory, for example sample.md. You can create a post file from an empty text file, but by using the hugo new command, you can automatically generate a Markdown file based on a post archetype file (archetypes/default.md).

Create a post file (Markdown file).

% hugo new sample.md
Content "/Users/user/my-site/content/sample.md" created

When you run it as above, the sample.md file is created in the content directory. At the beginning of the created file, a header called front matter is written as shown below. This header is automatically generated based on archetypes/default.md.

content/sample.md

---
title: "Sample"
date: 2023-05-05T23:50:09+09:00
draft: true
---

Then rewrite the title (title) as you like, and write the article body after the front matter header. When the article has reached a publishable level, delete the draft: true line in the header.

Archetypes

Now let’s look at the archetypes/default.md file that serves as the basis.

archetypes/default.md

---
title: {{ replace .TranslationBaseName "-" " " | title }}"
date: {{ .Date }}
draft: true
---

The title field is automatically filled with the name specified by the hugo new command, and the date field is automatically filled with the current time. From this, you can see that the post file is created based on the contents of this file.

Start Editing in an Editor While Creating a Post

When creating a post file with the hugo new command, specifying the --editor option opens the file in the specified editor at the same time the post file is created.

Example: Create an article file and open it in vim

% hugo new sample.md --editor vim

When you run it for the first time, you may see an error like the following.

% hugo new sample.md --editor vi
Content "/Users/user/hugo-tutorial/my-site/content/sample.md" created
Editing "/Users/user/hugo-tutorial/my-site/content/sample.md" with "vi" ...
Error: access denied: "vi" is not whitelisted in policy "security.exec.allow"; the current security configuration is:

[security]
  enableInlineShortcodes = false

  [security.exec]
    allow = ['^dart-sass-embedded$', '^go$', '^npx$', '^postcss$']
    osEnv = ['(?i)^((HTTPS?|NO)_PROXY|PATH(EXT)?|APPDATA|TE?MP|TERM)$']

  [security.funcs]
    getenv = ['^HUGO_']

  [security.http]
    methods = ['(?i)GET|POST']
    urls = ['.*']

As the message indicates, copy the default policy into config.toml and add '^vim$' to the allow array.

[security]
  enableInlineShortcodes = false

  [security.exec]
    allow = ['^dart-sass-embedded$', '^go$', '^npx$', '^postcss$', '^vim$']
    osEnv = ['(?i)^((HTTPS?|NO)_PROXY|PATH(EXT)?|APPDATA|TE?MP|TERM)$']

  [security.funcs]
    getenv = ['^HUGO_']

  [security.http]
    methods = ['(?i)GET|POST']
    urls = ['.*']

Then try again and it should run. However, because the post file is created before the editor opens, you may see a message saying the file already exists.

% hugo new sample.md --editor vim
Error: /Users/user/hugo-tutorial/my-site/content/sample.md already exists

In that case, delete the existing file and run the command again.

Creating a New Hugo Website

kc@example.com (kc kim) — Fri, 05 May 2023 18:17:00 +0900

Creating the Site Skeleton

First, install Hugo and prepare an environment where the hugo command can be used. Then, as shown below, use the hugo new site command to create the initial directory skeleton for the website.

Create a new website (my-site)

% hugo new site my-site
Congratulations! Your new Hugo site is created in /Users/user/hugo-tutorial/my-site.

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.

The generated files are very simple: only two files and a few directories, as shown below.

.
└── my-site
    ├── archetypes     : Template files used when creating new pages
    │   └── default.md
    ├── config.toml    : Site-wide configuration file
    ├── content        : Location for content. Place Markdown files that become site content here.
    ├── data           : Data used when generating the site
    ├── layouts        : Location for layout templates
    ├── public         : Location for generated HTML, CSS, images, and other deployed files
    ├── static         : Location for files, such as images, copied as-is during site generation
    └── themes         : Location for theme directories. The actual theme to use is specified in config.toml.

If you start the server in this state, it shows “Page Not Found”.

Installing and Configuring a Site Theme

After creating a new website in Hugo, configure a theme that defines its appearance. A site created with hugo new site does not include a theme, so you need to download one from the themes published on the site.

Here, we will apply a theme called mainroad.

Hugo themes can be stored by creating a theme directory under the themes directory. Because each theme is stored in a separate directory, you can download several themes in advance and easily switch the theme you use.
Themes are usually distributed on GitHub, so if Git is installed, you can apply one easily with git clone from the root path as follows.

% cd themes
% git clone https://github.com/vimux/mainroad

Or you can run the command all at once as follows.

% git clone https://github.com/vimux/mainroad themes/mainroad

If the themes/mainroad directory was created by the command above, next add the following content to the Hugo configuration file (config.toml) so that this theme is used.
config.toml

theme = "mainroad"

This completes the theme configuration.

Setting the Site Title and Language

In the site configuration file, in addition to the theme setting, you should configure the site title (title) and the language used by the whole site (languageCode).

config.toml

baseURL = "http://devkuma.com/"
languageCode = "ko-kr"
title = "My New Hugo Site"
theme = "mainroad"

Info

The values configured here can be referenced in template files as `{{ .Site.Title }}`, `{{ .Site.BaseURL }}`, and `{{ .Site.LanguageCode }}`.

Writing a Post

Here, let’s write one example post. If you run the hugo new command as follows, a post file (Markdown file) is automatically created under the content directory. Run the command from the top-level directory of the project.

$ hugo new post/sample.md

This creates the content/post/sample.md file. Edit it in the following format.

content/post/sample.md

---
title: "Post Title"
date: 2023-05-05T23:19:43+09:00
#draft: true
---

Post body  
Post body  
Post body

If the draft: true line in the header is not removed or commented out, the page will not be output, so that line must be removed.

Starting the Hugo Web Server

After configuring the website theme and writing an article, run the hugo server command to start the web server.

% hugo server
Start building sites …
hugo v0.104.3+extended darwin/arm64 BuildDate=unknown

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

Built in 7 ms
Watching for changes in /Users/user/hugo-tutorial/my-site/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /Users/user/hugo-tutorial/my-site/config.toml
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

It takes only 7 ms to start the Hugo server. It is extremely fast.

With the Hugo server running, open http://localhost:1313/ in a web browser and the first page of the site will be displayed.

From then on, continue writing posts with the hugo new command. The Hugo server monitors changes in the content directory and automatically refreshes when posts are created or modified, so once the Hugo server has been started, it does not need to be restarted.

The way to customize posts differs slightly by theme, so refer to each theme’s site for details.

Starting and Closing Excel

kc@example.com (kc kim) — Tue, 24 Jan 2023 17:15:19 +0900

Starting Excel

On the Windows 10 screen, click Start, then click Excel in the displayed app list.

Excel starts and the home screen is displayed.

You can open and use a workbook that has already been created, or you can create a new workbook. To create a new document, click “Blank workbook”.

A new workbook has been created.

Closing Excel

To close Excel, click the “x” displayed in the upper-right corner of the Excel screen.

Excel has closed.

If the currently open workbook contains unsaved items when you close Excel, a dialog similar to the following is displayed.

To save the workbook and then close Excel, click Save. To close Excel without saving, click Don’t Save. Saving documents is explained on another page.

Excel Screen Layout

kc@example.com (kc kim) — Tue, 24 Jan 2023 17:15:19 +0900

Excel Screen

When you start Excel, a screen similar to the following is displayed.

The main parts used are the worksheet, tabs, ribbon, and formula bar. Here, we will briefly explain what is displayed on the Excel screen, such as the Quick Access Toolbar and zoom slider.

The item displayed at the upper left is the “Quick Access Toolbar”. Frequently used commands are displayed there.

By default, the commands shown from the left are “AutoSave”, “Save”, “Undo”, and “Redo”.

You can customize the commands displayed on the Quick Access Toolbar. Click the icon in the following location.

A list of commands that can be added to the Quick Access Toolbar is displayed. Items with check marks are currently displayed buttons. For example, click Print Preview and Print.

The “Print Preview and Print” command has been added to the Quick Access Toolbar. It is useful to display frequently used commands on the Quick Access Toolbar.

Tabs

Displayed below the Quick Access Toolbar are the “tabs”. Currently nine tabs are displayed.

When you click a tab, the contents of the ribbon displayed below it change. The “Home” tab is currently selected; if you click the “Insert” tab, the ribbon contents change for the Insert tab.

File Tab

The File tab is one of the tabs, but while clicking other tabs displays the ribbon, clicking the File tab displays the following screen.

A menu is displayed where you can create a new workbook or save the current workbook.

If you click Options in the lower-left menu, you can also display the Options screen for configuring various Excel settings.

Ribbon

When you click a tab other than the File tab, the ribbon is displayed as follows. The contents displayed in the ribbon differ by tab. For example, clicking the Home tab displays the following ribbon.

Clicking the Formulas tab displays the following ribbon.

The ribbon can always be displayed, or you can close it by pressing the close button near the lower right of the ribbon so that it normally stays closed and appears only when you click a tab.

Closing the ribbon lets you use Excel with a wider workspace.

If you want the ribbon to always be displayed again, click the pin button near the lower right of the ribbon to pin it again.

Name Box

The green box displayed in the following location is the “Name Box”.

The Name Box displays the position of the selected cell in the current worksheet. For example, because cell A1 is currently selected, A1 is displayed in the Name Box.

Now enter E5 in the Name Box and press Enter. The cell E5 you just entered becomes selected.

Checking the Excel Version

kc@example.com (kc kim) — Tue, 24 Jan 2023 16:41:38 +0900

Checking the Excel Version

To check the Excel version, start Excel and click the File tab.

Click “Account” displayed at the bottom left of the screen.

The name of the Office product is displayed under Product Information. To see detailed version information, click “About Excel” near the bottom.

The Excel version currently in use is displayed.

In this environment, “Microsoft® Excel® MSO for Microsoft 365 (Version 2212 Build 16.0.15928.20196) 64-bit” was displayed.

Main Memory (Memory) ROM, RAM

kc@example.com (kc kim) — Wed, 30 Nov 2022 00:21:00 +0900

Main Memory (Memory)

Overview of ROM/ROM BIOS

ROM (Read Only Memory) is a read-only memory element and is used in computers to store the BIOS.
The Basic Input/Output System is the basic program for operating a computer.
It contains basic information about each device in the computer and diagnoses each device.
When the power is turned on, it starts the computer and diagnoses itself. The BIOS must never be erased, so it is stored in ROM, which is non-volatile memory.

RAM

RAM (Random Access Memory) is also called RWM (Read Write Memory). Because all information stored inside disappears when the computer is turned off, it is called volatile memory. RAM is a memory device that allows data to be read and written freely. Since it is volatile, all contents in memory are erased when power is cut off.

How DRAM Stores Data
DRAM (Dynamic RAM) stores data using the principle that capacitors store electricity. What we call data in a computer is actually the flow of electrical signals. Computer data is represented by 1s and 0s, which respectively mean a state where electricity flows and a state where it does not. If this electrical state can be maintained, that is storage. The most common media for storing electricity are electronic components called capacitors or batteries.
For example, to store the data 10101010, prepare eight capacitors and store the data by charging those corresponding to 1 and not charging those corresponding to 0. This stores the data 10101010. DRAM is a device that stores data using this capacitor principle.
However, electricity once stored in a capacitor or battery does not last forever. Even when it is not used, natural discharge occurs, and after a certain amount of time data is lost. Therefore, RAM performs a refresh, or recharge, operation to maintain its current state before data is lost. When the computer is turned off, RAM cannot perform this refresh, so the data is lost. In other words, it has volatile properties. DRAM has long been used as an element for computer main memory because its principle is simple and it is easy to manufacture, but it is now being improved into new forms because refresh operations increase waiting time.

Types of RAM

Category	DRAM	SRAM
Refresh	Required	Not required
Access speed	Slow	Fast
Circuit structure	Simple	Complex
Integration density	High	Low
Price	Cheap	Expensive
Use	Main memory	Cache memory
Comparison of DRAM and SRAM

Types of DRAM

SDRAM
SDRAM is DRAM whose clock speed is synchronized with the microprocessor. Clock speed synchronization helps increase the number of instructions the processor can execute within a given time.

DDR SDRAM
DDR (Double Data Rate) memory SDRAM is the name given to memory that can transfer twice as much data as previous SDRAM. DDR memory has two standards, PC2100 and PC1600, but they do not actually operate at 2100 MHz and 1600 MHz respectively. DDR SDRAM operating on a 100 MHz memory bus has a speed around PC200, and when operating on a 133 MHz bus, around PC266.

DDR2 SDRAM
DRAM that improves the operating speed of DDR SDRAM by two times.

Rambus DRAM
Rambus DRAM is DRAM connected through the Rambus Channel, a data transfer bus developed by the American company Rambus. This channel uses a 9-bit bus and transfers data synchronized with a 250 MHz clock.

Hugo Blog

kc@example.com (kc kim) — Tue, 29 Nov 2022 21:42:00 +0900

Docusaurus Documentation Generator

kc@example.com (kc kim) — Tue, 29 Nov 2022 21:42:00 +0900

How to Use Excel

kc@example.com (kc kim) — Tue, 29 Nov 2022 21:42:00 +0900

Central Processing Unit (CPU)

kc@example.com (kc kim) — Mon, 07 Nov 2022 10:45:00 +0900

Central Processing Unit (CPU)

CPU stands for Central Processing Unit.
It contains a control unit that operates each device in the computer and controls normal operation.
It contains an arithmetic unit that processes various computational data.
It contains registers for temporarily storing data.
It contains an arithmetic logic unit and performs computational functions.
It determines computer performance and the type of system.
- It determines the type of computer.
- It determines computer performance.

Execution Unit (EU)
The execution unit is the unit that executes each instruction in a microprocessor.
The execution unit consists of the ALU (Arithmetic Logic Unit), the control unit (CU), and registers.
The ALU performs arithmetic operations, such as addition and comparison, as well as logical operations, and stores intermediate results in registers.

Instruction Unit
The instruction unit controls instructions fetched from memory so that they can be executed correctly by the execution unit.
At this time, the control unit ensures that the ALU and registers operate correctly.

Addressing Unit
The addressing unit creates memory or input/output addresses when the CPU reads data from, or writes data to, memory or input/output devices.

Bus Interface Unit
The bus interface unit connects the microprocessor to the outside through the address, data, and control buses.

Cache Memory

Cache memory is one type of buffer memory temporarily used inside the CPU.

Understanding Cache Memory

A cache is a temporary storage device located between two devices with different speeds. It improves the speed of data access between devices and improves processing speed during repeated access.

When cache is not applied

Run a program called TEST.EXE.
Load TEST.EXE from (1) auxiliary storage, such as a hard disk, into (3) main memory.
When the program exits, the program loaded in (3) disappears.
Run the same program again.
The program is loaded from (1) into (3) again. In this case, the user must wait each time while the program is read from (1).

When cache is applied

Run TEST.EXE.
While the program is loaded from (1) into (3), it is also written to (2).
When the program exits, the program loaded in (3) disappears. However, what was stored in (2) is not erased.
Run the same program again.
This time, the program is loaded from (2), not from (1). From the perspective of (3), the same program is being loaded, but the first time it was loaded from slower auxiliary storage. From the second time onward, repeated loading occurs from faster cache memory, which improves speed.

Clock (Operating Frequency)

A clock is a unit that represents CPU speed. A clock refers to the time it takes for a waveform to move once in one second, and CPU speed changes depending on the amount of data processed during that time.
It is written in Hz. In general, the higher the clock value, the faster the performance.
However, if only the clock is raised to improve performance, power consumption increases and heat generation can become severe, so this must also be considered.

Clock and FSB

A clock is an electrical rhythm that oscillates at a fixed cycle and is generated by the motherboard’s clock generator to operate the CPU and other devices. It is expressed in MHz (megahertz).

1 Hz is a clock that oscillates once per second, and a CPU basically processes one instruction per clock.

It is used as a unit for expressing the speed of the CPU and the system.

FSB (Front Side Bus) is another name for the clock generated by the motherboard’s clock generator and supplied to each device. It is also called the external clock. The CPU and devices inside the computer operate according to the clock speed supplied by the clock generator. However, the CPU does not use the supplied clock as-is. It uses “clock doubling” to increase that speed several times before using it.

Core

A core is the central part of the processing circuit built into the central processing unit. In the past, when computers were not as widespread, it was natural for one CPU to have one core.
However, dual-core processors with two cores appeared in 2005, making multi-core processors popular in general PCs. Later, processors with four, six, and even eight cores appeared.

A dual-core processor can reduce work that a single core would have processed in two steps to one step. Therefore, it has the advantage of improving overall processing efficiency.

Virtualization Support

Virtualization support, simply put, means running another operating system inside an operating system. For example, it is a technology that allows Linux or another operating system to run inside Windows, just as a program runs after Windows starts. Intel CPUs support virtualization under the name “VT-x”, and AMD CPUs under the name “AMD-V”. To build a cloud environment with servers, it is essential to check whether the CPU supports virtualization.

Types of CPUs

CPU Types by Data Processing Capacity

Classification according to the amount of data that can be processed simultaneously.
The width of the bus, which is the path that transfers data.
8 bits is the minimum unit of data processed by a computer.
Development progressed from 8088 (8-bit) to 80286 (16-bit), 80386 (32-bit), and Pentium (64-bit).

ARM

Licensed products from companies such as Apple and Samsung.
ARM chips are small, generate less heat, and consume less power. They do not require a cooling fan. However, they have tended to be limited to specialized uses.

Introduction to Computers

kc@example.com (kc kim) — Tue, 01 Nov 2022 00:27:00 +0900

Hugo Overview and Installation

kc@example.com (kc kim) — Wed, 19 Oct 2022 08:22:00 +0900

What Is a Static Site Generator?

A Static Site Generator (SSG) is a tool for creating websites based on static pages. It reads content and files and converts them appropriately into HTML.

You can check the available types of SSGs here. Among them, the major SSGs often used with GitHub are as follows.

Jekyll
- Ruby-based
- Currently the most popular (the largest number on GitHub)
- Has the most Korean reference documents
- Builds are relatively slow
- Windows is not officially supported
Hexo
- Node.js-based
- Has many Chinese documents
- Has many Korean reference documents
Hugo
- Golang-based
- Builds quickly
- Well documented
- Does not have many Korean reference documents

What Is Hugo?

Hugo is one of the static site generators, like Jekyll and Hexo, that makes it easy to create websites. It can be considered a kind of blog engine.
Pages can be written in Markdown, and many blog themes are available, so you can choose and use the theme you want.

Installing Hugo

Download and install the package for your OS from the site below.

https://github.com/gohugoio/hugo/releases

Alternatively, refer to the site below and install it.

https://gohugo.io/getting-started/installing/

Installing with Homebrew on macOS

With Homebrew, the package manager for macOS, you can easily install Hugo with the following single command.

The command to install with Homebrew is as follows.

brew install hugo

Run the actual command.

% brew install hugo
==> Downloading https://ghcr.io/v2/homebrew/core/hugo/manifests/0.104.3
######################################################################## 100.0%
==> Downloading https://ghcr.io/v2/homebrew/core/hugo/blobs/sha256:3b355290c70c54cf0637a9ed70342d289c9f022e4d085e18cb0e4651e3bbe21b
==> Downloading from https://pkg-containers.githubusercontent.com/ghcr1/blobs/sha256:3b355290c70c54cf0637a9ed70342d289c9f022e4d085e18cb0e4651e3bbe21b?se=2022-10-18T23%3A
######################################################################## 100.0%
==> Pouring hugo--0.104.3.arm64_monterey.bottle.tar.gz
==> Caveats
zsh completions have been installed to:
  /opt/homebrew/share/zsh/site-functions
==> Summary
🍺  /opt/homebrew/Cellar/hugo/0.104.3: 48 files, 55.8MB
==> Running `brew cleanup hugo`...
Disable this behaviour by setting HOMEBREW_NO_INSTALL_CLEANUP.
Hide these hints with HOMEBREW_NO_ENV_HINTS (see `man brew`).

If Hugo is already installed and you want to update it to the latest version, run the following command.

% brew upgrade hugo

After installation, if you can check the version, the installation was successful.

% hugo version
hugo v0.104.3+extended darwin/arm64 BuildDate=unknown

Installing on Windows

To install Hugo on Windows, download the zip archive (hugo_extendedx0.xxx.x_windows-amd64.zip) from the Hugo Releases page and install it.
If you use features such as Sass, be careful to use a file that starts with hugo_extended.

Place the distributed hugo.exe in an appropriate directory and add it to your path to complete the installation.

e-Book

kc@example.com (kc kim) — Sun, 18 Sep 2022 08:22:00 +0900

Operating System Overview

kc@example.com (kc kim) — Sun, 13 Mar 2022 12:15:00 +0900

Operating System

An operating system (OS) is a software program that enables computer hardware to communicate with and run computer software.

It refers to a system program that exists between hardware and user programs in order to operate hardware resources and information as efficiently as possible.
It is a program that boots and operates a computer.
The applications that can be used vary depending on the selected operating system.
The purpose of a computer, such as a PC or server, is determined by the type of operating system.

Classification of Programs That Operate a Computer

Software
- Applications
  - Word processors
  - Games
  - Graphics
  - Other applications
- Operating systems
  - Windows
  - UNIX
  - Linux
  - MacOS
  - Other OSes

System Software

System software refers to programs used to operate a computer, as well as compilers that interpret programming languages.

Example: operating system

Application Software

Application software refers to programs users use to perform actual work.

Examples: word processors, spreadsheets, databases, computer graphics software, game software, and more

Driver

A driver is a program that operates hardware installed on a computer.

Examples: video card drivers, sound card drivers, modem drivers, and more

Main Purposes of an Operating System

An operating system has two main purposes.

It manages the computational activities of a computer system so that the computer system works properly.
It provides an environment for developing and running programs.

Goals of an Operating System

An operating system aims to improve user convenience and maximize system performance.

Improve throughput: process as much data as possible within a fixed amount of time
Reduce response time: minimize the time from a processing request to completion
Improve reliability: handle system failures
Improve ease of use: pursue a convenient user environment

Structure of an Operating System

The two elements that make up an operating system are control programs, which control the computer, and processing programs, which execute programs and process data.

Control programs
- Monitor the overall operation of the system and the execution status of programs
- Manage and process the workflow of tasks requested by users, including starting and running those tasks
- Centrally manage input/output-related data
Processing programs
- Programs such as assemblers, compilers, and interpreters that translate source programs written in high-level languages into machine language that a machine can understand
- Application software
- Utilities

Understanding Partitions

A partition means a logical divided area. A physical hard disk must go through a procedure to be recognized as a logical drive by the OS, and partitioning is the work of setting up the logical area that the OS will use on the physical device called a hard disk.

For an OS to use a hard disk, it must generally go through two procedures. One is partitioning, which declares part or all of the disk space as its own area, and the other is formatting, which creates the file input/output structure.

A disk without partitions cannot be recognized.

Using a hard disk by dividing it into several logical drives is the user’s choice. When installing two operating systems together, the disk must be divided.

Kernel

The kernel is the core and most important part of a computer operating system, providing basic services for every part of the OS.

CPU, GPU

CPU (central processing unit)
- The top-level central processing unit that manages computer resources, including input/output devices, storage devices, and arithmetic units.
GPU (graphics processing unit)
- Graphics processing unit
- It performs large amounts of repetitive and similar operations and divides them into parallel work, making it overwhelmingly faster than a CPU for those tasks.

Memory

Memory is the space used to store targets or results of processing so that a computer can perform work.
Information required to run programs is stored in memory and processed there.

Difference Between Heap and Stack Areas

For a program to run, it must be loaded into memory. Therefore, the operating system provides various memory spaces for program execution.

Code, data, stack, and heap areas are allocated, and each role is as follows.
- Code
  - The text area where the code of the program to be executed is stored.
  - The CPU fetches and processes instructions stored in the code area one by one.
- Data
  - This corresponds to global variables and static variables.
  - It is allocated when the program starts and disappears when the program ends.
- Stack
  - The stack area stores local variables and parameters related to function calls.
  - It is allocated when a function is called and released when the function call ends.
- Heap
  - The heap area is a memory area that users can manage directly.
  - Memory space in the heap area is dynamically allocated and released by the user.

Overview of Computers

kc@example.com (kc kim) — Thu, 23 Dec 2021 09:27:00 +0900

Overview of Computers

An electronic calculator that performs complex operations on behalf of people.
It can store and manage large volumes of data.

Characteristics of Computers

Speed: Computers can process large volumes of data. Modern computers perform billions of arithmetic operations per second.
Reliability: Computers support reliable, error-free processing of large amounts of data. This is essential when computers take over human work.
Accuracy: Thanks to rapid advances in semiconductor technology, computer accuracy continues to improve.
Data preservation: With the development of storage devices for preserving many kinds of data, a significant amount of data can be accumulated and stored in a small space.
Economy: By processing large volumes of data quickly, computers reduce time and cost compared with human work.

PC (Personal Computer)

Early computers were not designed for independent personal use. They were developed for shared purposes and were divided into central computers with central processing units and memory devices, and terminals for users. A PC is a computer developed for independent personal use. It combines the central processing unit, memory, and input/output devices that a computer needs into a single product.

Hardware and Software

Hardware

Hardware means physical devices. A computer contains many kinds of hardware, such as the CPU, memory, disk drives, and input/output devices. These devices operate according to software instructions.

Software

Software means the programs that run on a computer and perform work. Operating systems, games, graphics programs, educational programs, and business programs are examples of software.

Basic Terms

bit and Byte

Computers use digital electrical signals that represent all data as 0s and 1s. Digital data represents information using only two electrical states: “1”, where electricity flows, and “0”, where it does not. This is the bit, the smallest unit of data representation in a computer. In other words, 1 bit can represent only two values: 1 and 0. However, this alone is not enough to convert human characters into computer data. Combining two electrical signals can represent four values: 00, 01, 10, and 11. This still cannot represent human characters sufficiently, so 8 bits are combined. When 8 bits are combined, 256 different data values can be represented. This is called 1 byte. Ultimately, this is the amount of data used to represent one character, such as an English letter. 1 byte consists of 8 bits.

Bus

In a computer, a bus is a transmission path for delivering data. Computers may be classified by the structure of this path. It also refers to the width of data that can be exchanged at one time between the CPU and peripheral devices. It starts with 8 bits and has developed through 16 bits, 32 bits, and 64 bits.

History of Computers

ENIAC, the First Computer

In 1944, Aiken, a professor at Harvard University, built “MARK-1” with sponsorship from IBM. Although “MARK-1” could not be called a true computer, in 1946 Mauchly and Eckert at the University of Pennsylvania developed a military computer used for ballistic tables, weather forecasting, atomic energy calculations, and cosmic ray research. This was ENIAC, which used a decimal system.

ENIAC was made to calculate using vacuum tubes. It had as many as 18,000 vacuum tubes and 6,000 switches, so it was large and very difficult to operate. In addition, because programs were not compatible, changing a program required reconnecting all those switches from the beginning.

EDSAC, the Stored-Program Computer

In 1949, Maurice Wilkes completed EDSAC, the first computer with a stored program. In 1951, a computer called EDVAC, again using the binary system, was developed by von Neumann. IBM also developed UNIVAC 1, which used magnetic tape as auxiliary storage, and installed it at the United States Census Bureau.

Computer Generations

Generation	Years	Central Processing Unit	Main Memory	Programming Language
1st generation	1946-1957	Vacuum tubes	Magnetic drum	Assembler
2nd generation	1958-1964	Transistors	Magnetic core	FORTRAN, COBOL
3rd generation	1965-1974	IC	Magnetic disk	Pascal, BASIC
4th generation	Since the 1970s	LSI	Semiconductor	Modern programming languages
5th generation	Present	VLSI	Semiconductor	Modern programming languages

Structure of a PC

Central Processing Unit (CPU)

It contains a control unit that operates each device in the computer and controls normal operation.
It contains an arithmetic unit that processes various computational data.
It contains registers for temporarily storing data.
It determines computer performance and the type of system.

Input Devices

Devices that receive commands and data from the user. Keyboards and mice are examples.

Output Devices

Devices that deliver the results processed by the computer to the user. Monitors and printers are examples.

Storage Devices

Devices where the operating system and various programs are installed and where data created by users is stored.
Hard disks, CD-ROMs, and CD-RWs are examples.

Peripheral Devices

Devices that are not necessary for basic computer operation and management but are added when needed are called peripheral devices.
They can improve user convenience.
LAN cards, sound cards, mice, printers, and joysticks are examples.

Controllers

Controllers manage smooth data flow between devices and detect errors.
They determine the connection method for peripheral devices.
When implemented as hardware, the term “controller” is used.
When implemented as software, a program installed to operate hardware is called a “driver”.

Operating System/OS

kc@example.com (kc kim) — Wed, 09 Aug 2017 12:45:39 +0900

This section summarizes the basic knowledge of operating systems.

Basic computer knowledge

kc@example.com (kc kim) — Mon, 01 Jan 0001 00:00:00 +0000

Operating system

kc@example.com (kc kim) — Mon, 01 Jan 0001 00:00:00 +0000

Network

kc@example.com (kc kim) — Mon, 01 Jan 0001 00:00:00 +0000

Network