Hugoでブログ記事を作成する
日付 タグ hugo カテゴリ hugo目次
Hugoで初めてのブログ記事
Hugoをまだインストールしていない人は以下を参考にしてください。
==> Hugoのインストール
自分がMacbook環境なためにMacでHomebrewを利用したインストール手順となっています。
新規サイトの作成
https://gohugo.io/getting-started/quick-start/ - Quick Start
公式サイト説明の流れに沿ってHugoでサイトを作り、ブログ記事を作るところまでを見ていく。
$ hugo new site my-new-blog
コマンドを打ったディレクトリ直下に以下のようなフォルダ、ファイルが作られる。
$ tree my-new-blog/
my-new-blog/
├── archetypes
│ └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
6 directories, 2 files
config.toml というファイルは重要な設定ファイルで、ここにサイト全体の設定を指定していく。
テーマ(Theme)のダウンロード
次にテーマ(Theme)をgitコマンドで追加していく。
自分でテーマ(Theme)を作ってもいいのだが、ここではすでにあるテーマを適用する。 https://themes.gohugo.io/ - Hugo Themes
この中からAnanke Gohugo Themeを利用する。
https://themes.gohugo.io/gohugo-theme-ananke/ - Ananke Gohugo Theme
$ cd my-new-blog
$ git init
$ git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
これにより、themes/ananke以下にテーマのためのファイルが追加される。
config.tomlにテーマを指定
config.toml以下に
theme = "ananke"
を追加すると、
config.toml
はこんな感じになる。
baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "ananke"
投稿するブログ記事ファイルを作成する
$ hugo new posts/my-first-post.md
これにより、
content/posts/my-first-post.md
というファイルが作られる。
├── content
│ └── posts
│ └── my-first-post.md
このファイルにはまだ記事内容はなく、タイトルと日付、ドラフト（下書き）状態かどうかの設定が入っているだけのファイルである。
$ cat content/posts/my-first-post.md
---
title: "My First Post"
date: 2020-09-03T14:53:01+09:00
draft: true
---
ブログ記事を書く
ブログ内容になる部分をMarkdown記法にしたがって記事を書いていく。
my-first-post.md
を自分の普段使用しているテキストエディタなどで開いて編集する。
Markdownに特化したエディタMacdownを使用するのもいいだろう。
$ cat content/posts/my-first-post.md
---
title: "My First Post"
date: 2020-09-03T14:53:01+09:00
draft: true
---
# Hugoでブログを初めて書いてみた
## ブログを作るための手順
ここではブログを作る手順を説明していく
Hugoサーバーを起動してブログページをチェック
$ hugo server -D
-Dオプションはドラフトになっている記事も表示するオプションである。
http://localhost:1313へアクセスすれば、ブログサイトのトップページが表示される。
記事そのもののページはトップページから、read moreを押してページ遷移するか、
へアクセすれば、先ほど作ったブログ記事が見える。
なお、複数Hugoサーバーを同時起動していると、1313番ポートが占有済みで他ポート番号に割り当てられる場合があるので、Hugoサーバーを起動した時のログを確認しておく。
サーバーを停止する際はCtrl+Cで止めることできるが、サーバーを停止、再起動させなくても、ブログ記事を書き換えた場合、変更が検知されて反映されるのでいちいち停止する必要はないが、万一、変更が反映されない場合は、サーバーを一度停止して再起動をかけてみるのが良い。
ブログページをチェックして、内容に問題なければドラフトではなく公開設定にする。 content/posts/my-first-post.md
draft: false
とすればいい。
ブログサイトのタイトル変更
ブログサイトのタイトルが、“My New Hugo Site"となっているが、これは
config.tomltitle = "My New Hugo Site"
によるので、これを変更すればブログサイトのタイトルが変更される
title = "My Blog Test"
としてみよう。ブログサイトのタイトルが変更された。
日本語のページであれば、
languageCode = "en-us"
となっているのも
languageCode = "ja"
とした方がいいだろう。また、サイトのURLがデフォルトではhttp://example.org/となっているので、
自身が取得したドメイン名などに合わせて編集する必要がある。
publicフォルダのファイル生成
あとはhugoコマンドで静的にhtmlページを作成して、それをどこかの静的なファイルホスティングサイトにおけばブログサイトの完成である。 GitHub Pages、NetlifyやあるいはAmazon S3などを利用して公開することになる。
静的ホスティングサイトNetlifyを利用するのであれば、連携しているGithubへpushすれば、自動的にpublicフォルダのファイルが作られるのでこの操作は必要ないが、その他の静的ファイルホスティングサイト向けにpublicフォルダを作る場合は、
$ hugo list drafts
でまだドラフト途中で残しているのがないか？を確認後にhugoコマンドでpublicなstaticページを生成する。
$ hugo
| EN
-------------------+-----
Pages | 10
Paginator pages | 0
Non-page files | 0
Static files | 6
Processed images | 0
Aliases | 1
Sitemaps | 1
Cleaned | 0
Total in 47 ms
public以下にファイルが作られる。
public/
├── 404.html
├── categories
│ ├── index.html
│ └── index.xml
├── dist
│ ├── css
│ │ ├── app.1cb140d8ba31d5b2f1114537dd04802a.css
│ │ ├── app.4fc0b62e4b82c997bb0041217cd6b979.css
│ │ ├── app.7e7787cc1402d7de28bc90f7e65adf96.css
│ │ └── app.e6e75cdafe2e909dacfabeb26857f994.css
│ └── js
│ └── app.3fc0f988d21662902933.js
├── images
│ └── gohugo-default-sample-hero-image.jpg
├── index.html
├── index.xml
├── posts
│ ├── index.html
│ ├── index.xml
│ ├── my-first-post
│ │ └── index.html
│ └── page
│ └── 1
│ └── index.html
├── sitemap.xml
└── tags
├── index.html
└── index.xml
10 directories, 18 files
これらのファイルを静的ファイルホスティングサイトへ上げればOKである。
Netlifyを利用している場合は逆に連携しているGithubのリポジトリにpublicフォルダが誤ってアップロードされないように
.gitignore.DS_Store
/public
としてNetlify向けにはGithubへのpush時にpublicフォルダは除外する設定をしておいた方が良い。
以上でHugoを使用してブログ記事を書く、簡単な流れを見てきたが、テーマ次第でサイトの見た目が変わるので、いろんなテーマを試してみてはいかがだろうか。 テーマにはそれぞれライセンスがあるので、ライセンス条件は良く確認しよう。
また、自分でテーマを作ったり、カスタマイズしていけるようになると、よりオリジナリティのあるサイトになるのではないだろうか。