My First Hugo
Hugoを始めてみる。
hugo のインストール
Macではhomebrewで可能。
brew install hugo
2019/7/14 時点で、インストールされたのは 0.55.6 だった。
blog用サイト作成
cd ~
hugo new site blog
コマンドの結果、以下のようなガイドが出るのでわかりやすい。
Congratulations! Your new Hugo site is created in /Users/bonze/blog.
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.
これで、blog というディレクトリが作成され、その下に必要なディレクトリなどが出来ている。
テーマ
テーマをインストールする前に、gitのローカルリポジトリを作成しておく。
cd ~/blog
git init
すでにあるテーマから選んで使う。
シンプルそうな book を使ってみる。
cd themes
git submodule add https://github.com/alex-shpak/hugo-book themes/book
ここで、git clone でテーマをダウンロードする方法もあるが、後々のことを考えるとsubmoduleでやっておいた方がよい。
最初の記事を作る
hugo new posts/my-first-hugo.md
これで、content ディレクトリの下にファイル content/posts/my-first-hugo.md が作成される。 記事の場合は、posts/ を記事のファイル名の前につける必要がある。
このファイルを編集。
---
title: "My First Hugo"
date: 2019-07-14T12:52:02+09:00
draft: false
---
draft は、最初は true なのだが、false に変更する。（またはこの行を削除する）
ローカルサーバーで確認
まずはローカルでアクセスできるか確認。
hugo server --theme=book
http://localhost:1313/ にブラウザでアクセスすると記事が表示される。
config.toml の修正
テーマを毎回指定するのは面倒なので、config.toml で指定する。
baseURL = "https://tounosumura302.netlify.com"
languageCode = "ja"
title = "（仮）"
theme = "book"
| variable | 内容 |
|---|---|
| baseURL | ブログのURL（後で変更してもよい） |
| languageCode | |
| title | タイトル |
| theme | テーマ |
詳細はこちら https://gohugo.io/getting-started/configuration/
github
githubのアカウントとリポジトリを作成。
ここでは、リポジトリ名は blog でプライベートリポジトリとした。
githubでリポジトリを作成すると、リモートリポジトリを登録するコマンドが表示されるので、それを実行すればよい。 今回分はこのようになる。
git add .
git commit -m "first commit"
git remote add origin https://github.com/tounosumura302/blog.git
git push -u origin master
これで、リモートリポジトリにファイルがpushされた。
netlify
githubとの連携も自動でできる netlify でブログをホストする。
まずはアカウントを作成。
- 右上の Sign up
- “Sign up with one of the following” で GitHub を選ぶ
- “New site from Git” を選ぶ
- “Create a new site” の “Continuous Deployment” で Github を選ぶ
hugo のバージョン変更
ローカルのhugoと同じバージョンを使うように指定しておかないと、ビルドが失敗したり、デプロイ出来ても見た目がおかしいなど、不具合がでる。
バージョン変更は
- Settings > Build&deploy > Environment で、”Edit variables” を選択。
- “New variable”
- Keyに “HUGO_VERSION” 、Value にhugoのバージョンを入れる。今回は 0.55.6
- save
site名変更
デフォルトだとなぜかイタリアンな感じの変なサイト名になっているので、自分の好きなサイト名に変更する。
- Settings > Site details
- “Change site name”
- Site name に入力してsave
これでようやく出来上がり。
https://tounosumura302.netlify.com/
新しいpostを作った時に、最初に書き込まれている内容
新しくpostした時、デフォルトではこんな内容になっている。
---
title: "タイトル"
date: 日付
draft: true
---
これはFront Matterというヘッダで、各種設定を記述できる。
https://gohugo.io/content-management/front-matter/
draft: true は不要なので、最初からない状態にしておきたい。
という場合は、以下のファイルをいじればよい。
archetypes/default.md
