hugoとは

Hugoは最も人気のあるオープンソースの静的サイトジェネレーターの一つです。ユーザーはHugoを使用して自分のサイトを迅速に構築できます。

構築手順

hugoのインストール

Macでは、以下のコマンドを使用してhugoをインストールできます:

BASH
brew install hugo
クリックして展開し、詳細を表示

install

インストール後、hugo versionを使用して正しくインストールされたか確認できます:

hugo_version

hugoを使ってブログサイトを作成

hugoをインストールした後、hugoを使用して自分のブログサイトを構築できます。 hugo new site my-blogを使用して、my-blogという名前のサイトを作成します。

new-blog-site
このコマンドを実行すると、現在のディレクトリにmy-blogというディレクトリが作成されます。 その後、そのディレクトリに移動し、gitで初期化します。

BASH
cd my-blog
git init
クリックして展開し、詳細を表示

テーマを選択

サイトを作成した後、テーマを選択する必要があります。ここには多くのテーマが用意されています:hugo themes ここでは、hugo-theme-evenというテーマを選択しました。このテーマをsubmoduleとしてthemes/evenの下に置く必要があります。

BASH
git submodule add https://github.com/olOwOlo/hugo-theme-even.git themes/even
クリックして展開し、詳細を表示

pick-theme
その後、themes/even/exampleSite/config.tomlを現在のディレクトリにコピーし、hugo.tomlを上書きします。

BASH
cp themes/even/exampleSite/config.toml hugo.toml
クリックして展開し、詳細を表示

ブログを作成

テーマの設定が完了したら、自分のブログを作成できます。 hugo new content content/post/my-first-post.mdを使用してブログを作成します。 このコマンドを実行後、content/post/の下に新しいmdファイルが生成されます。

my-first-blog

hugoを実行

各種設定が完了したら、hugo serverを使ってhugoサーバーを起動できます。

リンクをクリックすれば、ブログサイトのアドレスにアクセスできます。
この時、以前作成したブログが表示されないことに気づくかもしれません。その理由は、最初に作成したブログはdraftとして設定されているため、hugo serverモードではドラフトのブログが表示されません。 表示する必要がある場合は、hugo server -Dを使用する必要があります。

以上でブログサイトの構築が完了です。

GitHubにローカルブログを保存

PLAINTEXT
git remote add origin https://github.com/yourusername/myblog.git
git push
クリックして展開し、詳細を表示

これでブログをGitHubに保存できます。

参考リンク

  1. https://gohugo.io/getting-started/quick-start/
  2. https://github.com/olOwOlo/hugo-theme-even
  3. https://medium.com/@magstherdev/hugo-in-10-minutes-2dc4ac70ee11

著作権表示

著者: heyjude

リンク: https://heyjude.blog/ja/posts/how-to-create-blog-with-hugo/

ライセンス: CC BY-NC-SA 4.0

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Please attribute the source, use non-commercially, and maintain the same license.

コメント

検索を開始

キーワードを入力して記事を検索

↑↓
ESC
⌘K ショートカット