Python/Arduino学習記録，備忘録

コツコツ学んだ学習記録と備忘録。現在Python，Arduino勉強中。

【Hugo#1】Hugoとは～クイックスタート

DeepLを用いて翻訳しただけです。
https://gohugo.io/

[目次]

Hugoとは

  • Goで書かれた高速でモダンな静的サイトジェネレータ
  • 汎用のウェブサイトフレームワーク
  • Hugoのサイトは、Netlify、Heroku、GoDaddy、DreamHost、GitHub Pages、GitLab Pages、Surge、Aerobatic、Firebase、Google Cloud Storage、Amazon S3、Rackspace、Azure、CloudFrontなど、どこでもホスト可能
  • CDNとの相性も良い
  • DBや、Ruby、Python、PHPなどの高価なランタイムに依存することなく動作

推奨対象

  • ブラウザよりもテキストエディタで書きたい人
  • 複雑なランタイム、依存関係、データベースの設定を気にすることなく、自分のウェブサイトをハンドコーディングしたい人
  • ブログ、企業サイト、ポートフォリオサイト、ドキュメント、単一のランディングページ、または数千ページのウェブサイトを構築する人

クイックスタート

Step1: Hugoのインストール 

brew install hugo
# or
port install hugo

新しいインストールを確認するために

hugo version

Step2: 新規サイトの作成

hugo new site quickstart

上記では、新しいHugoサイトをquickstartというフォルダに作成します。

Step3: テーマの追加
検討すべきテーマのリストはComplete List | Hugo Themesをご覧ください。このクイックスタートでは、美しい Ananke テーマを使用します。

まず、GitHubからテーマをダウンロードして、サイトのthemesディレクトリに追加します。

cd quickstart
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

git を使用していない方への注意。

  • gitがインストールされていない場合は、このテーマの最新版のアーカイブを本サイトからダウンロードできます
  • .zipファイルを解凍して、「gohugo-theme-ananke-master」ディレクトリを作成します。
  • ディレクトリを "ananke "にリネームして、"themes/"ディレクトリに移動してください。

そして、テーマをサイト構成に追加します。

echo theme = \"ananke\" >> config.toml

Step4: コンテンツの追加
手動でコンテンツファイルを作成し（例：content//.）、そこにメタデータを付与することもできますが、newコマンドを使っていくつかの作業を行うことができます（タイトルや日付の追加など）。

hugo new posts/my-first-post.md

新たに作成したコンテンツファイルを必要に応じて編集すると、次のような内容で始まります。

---
title: "My First Post"
date: 2019-03-26T08:47:11+01:00
draft: true
---

下書きはデプロイされません。投稿を終えたら、投稿のヘッダーを更新して、draft: falseとしてください。詳しくはこちらをご覧ください。

Step 5: Hugoサーバの起動
では、ドラフトを有効にした状態でHugoサーバーを起動します。

▶ hugo server -D

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

Total in 11 ms
Watching for changes in /Users/bep/quickstart/{content,data,layouts,static,themes}
Watching for config changes in /Users/bep/quickstart/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

http://localhost:1313/ の新しいサイトにアクセスしてください。

自由に編集したり、新しいコンテンツを追加したりして、ブラウザを更新するだけですぐに変更を確認できます（ウェブブラウザで強制的に更新する必要があるかもしれませんが、通常はCtrl-Rなどが有効です）。

Step 6:テーマのカスタマイズ
新しいサイトはすでに素晴らしいものになっていますが、公開する前に少し手を加えてみましょう。
〇サイト構成
テキストエディターでconfig.tomlを開きます。

baseURL = "https://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "ananke"

上のタイトルをもっと個人的なものに置き換えてください。また、すでにドメインを用意している場合は、baseURLを設定します。なお、この値は、ローカルの開発サーバーを実行する際には必要ありません。

ヒント：Hugoサーバーの稼働中にサイト構成やその他のファイルを変更すると、キャッシュをクリアする必要があるかもしれませんが、すぐにブラウザで変更を確認することができます。

テーマ固有の設定オプションについては、テーマサイトをご覧ください。

さらにテーマをカスタマイズするには、テーマのカスタマイズをご覧ください。

Step 7:静的ページの構築
これは簡単です。呼び出すだけです。

hugo -D

デフォルトでは、./public/ディレクトリに出力されます（-d/--destinationフラグで変更するか、設定ファイルでpublishdirを設定してください）。