Hugo でブログを作るには、Markdown で文章を書きます。
Markdown と仲良くなることが、初心者にとってスムーズに記事を書くためのキーポイントと言っても過言ではないと思います。
この Markdown 、初心者には最初手こずらされる侮れない相手ですが、慣れてしまえばとても便利で良い相棒になります。
今回はそんな Markdown について理解を深めていきたいと思います。


はじめに

知識ゼロ、ずぶの素人、頭の中はほぼ空っぽの超初心者がブログをやってみようと決意。

その過程で
「なんか難しすぎんかい?!」とつまずいた事、
「どゆこと??」とよく分からなかったこと、
「へぇ〜、そういう感じなのね」と学んだこと、
「おっ?なんか身になったっぽい」と得られたことなど、あれこれ記録しています〜



Markdown って何?

まずは、いの一番に Markdown が何なのかをおさえておかないと先に進めません。

Markdown とは、

👉簡単な記号を使って文章の構造や書式を指定するための手法で、マークアップ言語1の一種です。


少し噛み砕いて言うと、普通のテキストに少しの記号を足すだけで、きれいに見える文書が作れるんです。


例えばこんな感じです。

例1

見出しは#で表します。

# 見出し

↑のように表記すると、実際の表示は↓のようになります。

見出し


見出しの大きさは、#の数で変えられる仕組みになっていて、#が増えるごとに小さくなっていきます。


例2

太字にしたい文字を**で囲ってやると、文字を強調することができます。

**太字**

↑のように表記すると、実際の表示は↓のようになります。

太字


他にも、

  • リンク
  • 引用
  • リスト
  • 表

などといった書式を手軽に表すことができます。


このように、簡単な記号で文章を構造化できるので、初心者にも扱いやすい手法となっています。



Hugo と Markdown

Markdown が何なのか理解したところで、次は Hugo との関係です。
ざっくりとした流れはこうです。


Markdown で文章を書く
↓
Hugo が HTML に変換する
↓
テーマやテンプレートで見た目を整える
↓
Webサイトとして公開する


“ Markdownファイル ” というテキストファイル(拡張子はだいたい「.md 」となっています。違う場合もあるようです)を作ってそこに文章を書くと、Hugo はこれを HTML の Webページに変換してくれます。


以前こちらの記事で、静的サイトジェネレーター( Hugo などのこと)について触れましたが、そこでこのように説明しました。

静的サイトジェネレーターというのは、材料となる「記事の文章」と「デザインのひな形」を入れると、「完成したブログのページ」(お店に並べられる商品)が出てくる機械のようなイメージのものです。


つまり、

Markdown → Hugo → HTML → Webサイト

というこの流れのことです。
Hugo は Markdown で書かれた文章( Markdownファイル )を、Webブラウザ上で見ることができるようにサイトを生成してくれるわけです。


ちなみに Hugo では、Markdown 以外にも扱えるコンテンツ形式2があります。
Hugo公式サイトによると、

Markdown、HTML、Emacs Org Mode、AsciiDoc、Pandoc、 reStructuredText

の6つをサポートしている、と記載されています。


これを見れば、初心者には選択肢が限られることは一目瞭然です。
私が聞いたことがあるのは、Markdown と HTML だけで、他は読み方すら分かりません💦
さらに AI も「 Hugo では Markdown がとても一般的で、特にブログ記事を書く場合は、ほぼ定番と考えていい」と説明してくれました。
「一番簡単で使いやすいのかもしれない」と、そんな風に思いましたね。


Hugo は Markdown 専用ではないものの、Markdown が基本的でよく使われるコンテンツ形式、というのがこの2つの関係だと私は理解しました。



Markdown は何で書く?

では実際に何を使って Markdown で文章を書けばいいのか?
私の場合は Mac を使っていて、初めての記事ファイルは Mac に元々入っているソフトの TextEdit を使って編集しました。
ですが、使い慣れていない上、「これからこれで記事を書いてくの?使い勝手が悪そうだな」と正直なところ思いました。


また偶然にも私は元々、Obsidian という Markdown 形式のノートアプリを溺愛、もとい、愛用していたこともあって、これが利用できるならこっちの方がいいなと思い、AI に使えるか聞いてみたところ、「使える。むしろ相性はかなり良い」とのことでした。
そんなわけで、私自身は Obsidian というノートアプリを使って記事を書いています。


ちなみに、Obsidian を使い始めた時が Markdown との初めての出会いで、最初は手こずりましたし、慣れるまで練習もしました。
その上で、実は Obsidian と Hugo にはズレがあって、Obsidian上で出来ることが、そのまま Hugo では使えないこともあるので、まだまだ学ぶことは多く、先は長いなぁと思う今日この頃です。


今のところ、記事を書くツールとして Obsidian を使っていて、特にこれといって問題もないので、しばらくはこのままで突き進むつもりですが、気になっているツールがあります。
それは、

「 VS Code( Visual Studio Code )」

というものです。
AI が言うには、この VS Code は文章も書けるし、サイト全体の設定も触りやすいそうで、将来的に使う可能性が高い、と説明してくれました。
ただ、記事を書くという作業だけなら Obsidian で十分で、今の段階でエディタの使い方まで新しく覚えることを増やす必要はない、ということでした。


私の考えとしては、もし自分が Obsidian を使っていなかったら、この VS Code を選んでいたかもしれません。
理由は、「 Hugo の設定ファイルやテーマの調整などは VS Code の方が見やすいから」という点に惹かれたからです。
私のブログはとてもシンプルなので、後々もっとこうしたい、こう変えたい、とか色々やりたいことが出てきた時に、使いやすいツールの方が後で困らないんじゃないか、と思うんですよね。


とはいえ、私が優先すべきことは、「記事を書いて公開、これを継続すること」なので、慣れている Obsidian で記事を増やしていった先に、新しいツールの導入を検討しても遅くはないと考えています。


ここで紹介したツール以外にも、Markdown で文章を書くツールは色々あるようなので、自分と相性の良いものを見つけて、作業できる環境を整えることが、スムーズなブログ運営につながるポイントのひとつだと言えると思います。



【余談】マークアップ言語の一種なのに、なんでマークダウン?

最初に、Markdown とは、簡単な記号を使って文章の構造や書式を指定するための手法で、マークアップ言語の一種だと学びました。
ここで、ちょっとした疑問が浮かびませんか?
Markdown という名前が、「マークアップ」なのに「ダウン」なのは、どういうこと??


初心者的には「頭がこんがらがるから、やめてぇ〜😭」な事案なんですが、私の好奇心の芽🌱が「気になるんじゃないの〜?」とつついてきます。
なので、ちょっとばかし踏み込んでみようと思います。壁|ω・) チラッ


そもそも、Markdown は John Gruber という人が2004年に作成したものなんだそうです。Wikipediaより参照
そして、その設計上の目標は、


可能な限り読みやすくすること


と、彼の公開した記事に明確に記されています。(原文はもちろん英語ですよ ^^;)
この彼のサイトは、Hugo の公式サイトからもリンクで飛べるようになっています。
はじめは、このサイトが何なのかよく分からなかったのですが、この「アップ、ダウンの謎」について掘り下げていくうちに、Markdown 生みの親が2004年に公開したサイトだったんだと理解できました〜😳


Markdown のパパ( John Gruber さんのこと)は、人間にとって読みやすいことを重視している、ということが彼のサイトから読み取れます。
マークアップ言語の中には、Markdown 以外にも複数の言語がありますが、代表的なものというと HTML が挙げられると思います。


例えば、見出しを HTML で書くと、

<h1>Markdownについて</h1>

となります。

一方、Markdown は、

# Markdownについて

です。
HTML に比べて Markdown の方がずっとシンプルです。
読みやすく、さらに書きやすい書式になっています。

こんなイメージが近いです。

HTML
  ↓
タグを使って、しっかりマークアップ
  ↓
<h1>Markdownについて</h1>


Markdown
  ↓
もっと簡単な記号でマークアップ
  ↓
# Markdownについて

Markdown は、マークアップをより簡単・軽量に書くための記法と捉えることができます。



さてここで、語源的な観点から少し気になることを調べてみました。
「mark up」は英語で、何かに印・注釈を付ける、という意味があるそうです。
例えば文章に、「ここは見出しだよ」「ここは強調」などの印を付けることをイメージできます。ここから markup(マークアップ) という言葉が生まれているようです。


では、「mark down」はというと、文脈によって意味が変わるそうで、例えば、

mark down the price

なら、値段を下げる、値下げする、という意味らしいです。
なので、Markdown という名前は、普通の英語としての「mark down」の意味をそのまま使った言葉ではないようです。


以上のことから、Markdown は、少し複雑なマークアップ言語を、読みやすく書きやすいものに、という考えの元に生み出されたものなので、mark upという言葉をもじって対になるような名前が当てられた、こう考えることができるんじゃないでしょうか?
これはあくまで勝手な推測であり、パパ自身が Markdown の名前の由来について明確に説明した一次資料は、私が確認した範囲では見つかりませんでしたので、悪しからず┌|-.-|┐ペコッ



まとめ

【 Markdown とは】

👉簡単な記号を使って文章を構造化させるための手法


【 Hugo と Markdown の関係 】

👉Hugo において、基本的でよく使われるコンテンツ形式が Markdown


【 Markdown は何で書く?】

👉自分と相性の良い Markdown 編集ツールならなんでもOK。 私自身は Obsidian を今のところ使用。将来的に VS Code( Visual Studio Code )に挑戦したい。


今回、少し話が逸れるかなと思い、「余談」という項目を設けたのですが、意外にこれが、Markdown の理解を深めるのにとても役に立つ内容だったなと個人的には感じています。

ブログ挑戦を始めて一歩一歩学びながら記事を書いているのですが、大変ではありながらも同時に、理解しながら進むことに面白さも感じています。

そして今回出てきた、Markdown のパパのように、より簡単に作業できるツールを生み出してくれた方々に感謝する気持ちがより一層強くなりました。
このような賢い人たちのおかげで初心者の私もブログを書くことが出来ています〜ヽ( ´¬`)ノ ワ~イ


  1. 文章などに「これは見出し」「これは強調」といった意味を付け、構造化させるための言語。 (※ 自分が理解できるように自身で考えた説明なので、正確性を求める場合は専門家のサイト等をご確認下さい) ↩︎

  2. コンテンツを作成するためのマークアップ言語。 Hugo 公式サイト用語集より 出典 ↩︎