WordPressを捨ててHugoにした

PHPやMySQLが使えないサーバーでも、ブログっぽいサイトがつくれるものが静的サイトジェネレーターです。

私が知る静的サイトジェネレーターはHugoだけで、しかも私は、Hugoについて少し知っているだけです。

私の場合、WordPressに嫌気がさしてHugoにしました。

Hugoというのは、イメージとしては、「記事を書いて『コンパイル』すると静的サイト一式が出力される」というものです。 それを私の場合、FileZillaを使って、手動でアップロードしています。

「コンパイル」する前に、仕上がりをプレビューする仕組み(サーバーのエミュレーター)があって、ブラウザで以下のURLを閲覧すると、そのプレビューページが閲覧できます。

http://localhost:1313/

それらの機能すべてが、「hugo.exe」という実行ファイルの中に含まれています。

Hugoは「”」を1つ忘れただけで動かなくなるような神経質なシステムです。

また日付や時刻の指定として、「特定の具体的な日付や時刻を指定する」という「悪ふざけにもほどがあるような、自己満乙のクソ仕様」になっています。

time - The Go Programming Language

Mon Jan 2 15:04:05 -0700 MST 2006
2006-01-02
2006/01/02
2006-Jan-02
2006-01-02 15:04:05
2006-01-02T15:04:05
2006-01-02 (Mon) 15:04:05
Jan 2, 2006 at 3:04pm (MST)

引用元: 時刻データを扱う (time) | まくまく Hugo/Go ノート

しかしHugoの長所として、記事の生成が爆速である点が挙げられます。 200とか300とかの記事なら、並行処理によって、ほぼ一瞬で書き出すことができます。

記事はMarkdownファイル(.md)で、実際にはテキストファイルです。

Markdownファイルの中では、Markdown記法とHTML記法の両方を混在させることが可能です。

Markdown記法 - Google 検索

このMarkdownファイルを、私はWZエディタとMIFESで編集しており、保存の文字コードは[UTF-8のBOMなし(UTF-8N)]にしています。

MIFESのグローバル置換(あるディレクトリ以下の複数のファイルを一気に文字置換する)を使うと、表記の修正・統一が一気に行えます。

テキストエディタ MIFESシリーズ-メガソフト

WordPress、あるいは、ふつうのブログシステムでは、これが難しいわけです。

WordPressのどこがクソか

たいした機能もないのに重たいのがWordPress

WordPressはPHPで記述され、記事などをMySQLというデータベースソフトで管理するCMS(コンテンツ・マネジメント・システム)です。

WordPressは、記事を書く側としても、記事を閲覧するユーザー側としても、ともに動きが鈍重になりがちです。

●WordPressはサーバーにかんして、マシンパワーを要求します。 WordPressは「多コアのプロセッサ」と「ストレージとしてSSD」を使わなければ、重たくて閲覧しづらいサイトになります。 先進的なホスティング会社は、「多コアのプロセッサ」と「ストレージとしてSSD」を実現していますけれども、多くのホスティング会社は、ハードウェアとしてのサーバーの更新が進まず、「遅いプロセッサ」と「ストレージにはHDD」というサーバーもあるようです。

●WordPressではキャッシュしないと表示が遅くて使い物になりません。 WordPressはキャッシュという特殊なテクニックを使わなければ、サイトの動きがとても鈍重です。

●Xserverが運営しているwpXクラウドというWordPress専用の爆速サーバーも使ってみましたけれども、それでもなお、WordPressは遅くてクソだという結論に至り、結局、XserverのX10プランでHugoを使っているのが現状です。

さ●らインターネットなどは、WordPressのユーザーを共有サーバーから追い出すために、WordPressの動作について、大きく制約を加えていると噂されます。 これはホスティング会社として、一定の合理性をもつふるまいです。

データベースを使う必然性があるのは、何万アイテムという記事や商品を取り扱う、大型サイトぐらいのものです。

個人ブログで、記事が1000とか3000とか、その程度のデータ量では、データベースを使う必要はなく、静的サイトジェネレーターを使ったほうがいいです。

WordPressは、誰でも使えるように見えて、実際には、PHPとHTMLの両方を理解し、データベースについても理解していないといけません。

静的サイトジェネレーターのほうが、HTML、CSS、JavaScript、Markdown記法など、静的サイトの知識だけで済ませられるので、明らかに初心者向きです。

WordPressは更新に追いまくられて永遠に「安定」が得られない

(1)PHPのバージョンアップが一定期間(長周期)ごとにあります。 WordPressはPHPで記述されているため、新しいPHPに適合するWordPressが出るのを待ち、慎重にPHPをバージョンアップします。 「PHPのバージョンアップは、怖いから、やらないほうがいい」というのが本当のところでしょう。 しかし、いつかはやる必要があります。

(2)WordPressが更新される(短周期)と、正常に動かなくなるプラグイン、テーマ(ブログの外観部分)が出てきます。 ですので、WordPressでデザイン性の高い有料テーマを購入しても、そのテーマが動かなくなる、あるいは、レイアウトに問題がしょうじる可能性もあります。 「Twenty Fourteen」などといった「Twenty DADADA」という名前の「WordPress公式テーマ」だったら、WordPressの更新によって正常動作しなくなることはないと思います。 そのため、体裁が同じWordPressサイトが多くなります。 Twenty Fourteenは、かなりよく見かけるデザインです。 WordPressが更新されたためにプラグインが正常動作しなくなることが、たまにあります。 WordPressには、複合検索ができるプラグインがあったのですけれども、WordPressの更新にキャッチアップできず、すでに使えない状態になっています。

https://ja.wordpress.org/themes/twentyfourteen/

(3)結局、「PHPがバージョンアップする」「WordPressがバージョンアップする」「WordPressのバージョンアップに、テーマやプラグインが追いつく」というアホな追いかけっこを繰り返す。 これがWordPressライフなんですよ。 アホでしょ?  WordPressにログインすると、WordPress本体、テーマ、プラグインをそれぞれ更新する。 この時間・手間のムダを毎日、強要されます。

WordPressを使っていて思うことは、「WordPressは、たいした機能もないのに更新が多すぎて人生を損する」ということです。

個人ブログでデータベースを使う意味はない

記事数にして500本や1000本ぐらいのサイトで、PHPやMySQLを使っても、サーバーのマシンパワーを浪費するだけです。

いや逆に、WordPressというのは、サーバーのスペック向上の必要性を人工的にしょうじさせるために仕組まれた、戦略的なCMSなのかもしれません。

WordPressというのは、おそらく、脆弱性をもたせる意図が最初からあって、「PHPでMySQLを制御する」という方式を採用しているのだと私は思っています。

「脆弱性を理由にしょっちゅうアップデートがある」という状況をつくってこそ、WordPressのユーザー、プラグインの開発者、WordPressを使ったサイトを制作する会社などの「奴隷」に対して、支配力が発揮できる。 そういう、くだらない理由でWordPressが存在するのだと思います。

ちなみに、静的サイトには、脆弱性というものが、ほぼありません。 誰かがサーバーに侵入してサイトを改ざんしたとしても、それはホスティング会社の責任なので、関係ありません。 そのサーバーがダメなら、別のサーバーを借りて、そこへサイトを移すだけのことです。 ディレクトリやファイルの権限の設定(たいてい自動化されている)さえ間違わなければ、静的サイトでは、サイトの記述がカンタンに改ざんされることはないと思います。

素人には、どこが脆弱性なのかわからない。 だったらPHPとか使うべきではないでしょ?  WordPressに振り回されるのは御免だよね? 

WordPressは、Akismetというプラグインを入れないと「スパムコメントが頻繁に来る」という状況をわざわざつくっている。

Akismetを使うには、本家WordPressのサイトに登録しなきゃいけない。

ここで「いわゆるリストを取る(顧客名簿をつくる)」ということをやっているのが、WordPressという会社なのです。

それから、Akismetを使うときWordPressに登録するけれども、Googleアカウントで登録しちゃダメですよ!  WordPressに登録すると、私の経験したかぎりでは、登録解除をおこなうことができない。 したがって、WordPressに登録するときは、自分で無効にすることができるメールアドレスで登録しましょう。 ホント、WordPressはやっかいな会社です。

記事のひな形

この記事(Markdownファイル〔.md〕)の先頭部分は次のように記述されています。 これをコピペするのも1つの方法でしょう。

+++
date = "2018-03-13T00:12:30+09:00"
lastmod = "2018-07-03T01:54:58+09:00"
draft = true
slug = "post-hugo-on-windows"
categories = ["Hugo on Windows"]
topics = [""]
tags = [""]
title = "HugoをWindowsで使う"
+++


<div id="toc"></div>

<hr>


## 静的サイトジェネレーターとは

このサイトを構成する骨組みのファイル群を公開します

これを真似て、変形させていけばよいと思います。

https://drive.google.com/open?id=1KBOYtmdDiU1XzwxqSF2TrJH41tLnrqZv

以下の黒いスクリーンに、現在のこのサイトのディレクトリ構造を記載しておきます。 ツリー形式の表示には、FolderFileListというフリーウェアを使いました。

FolderFileListの詳細情報 : Vector ソフトを探す!

Benkyo
 ├ archetypes(記事作成のひな形を入れておくディレクトリで空です)
 ├ content(記事はMarkdownファイルとしてcontentディレクトリに入れます)
 |  ├ gakusaninfo
 |  |  ├ gsinf-2018-0616-164055.md
 |  |  ├ gsinf-2018-0617-143029.md
 |  |  ├ gsinf-2018-0617-143031.md
 |  |  ├ gsinf-2018-0617-143033.md
 |  |  ├ gsinf-2018-0617-150551.md
 |  |  ├ gsinf-2018-0617-194256.md
 |  |  ├ gsinf-2018-0617-194257.md
 |  |  ├ gsinf-2018-0617-194258.md
 |  |  ├ gsinf-2018-0617-194259.md
 |  |  ├ gsinf-2018-0617-200151.md
 |  |  ├ gsinf-2018-0617-200152.md
 |  |  ├ gsinf-2018-0617-204145.md
 |  |  ├ gsinf-2018-0618-201428.md
 |  |  ├ gsinf-2018-0619-204359.md
 |  |  └ gsinf-2018-0619-214658.md
 |  ├ gram
 |  |  ├ gram-adjective-equivalent.md
 |  |  ├ gram-adverb-equivalent.md
 |  |  ├ gram-be-verbs.md
 |  |  ├ gram-complement.md
 |  |  ├ gram-concession.md
 |  |  ├ gram-conversion-of-part-of-speech-in-three-layers.md
 |  |  ├ gram-conversion-of-part-of-speech.md
 |  |  ├ gram-english-grammar-with-japanese-classical-grammar-table-of-contents.md
 |  |  ├ gram-finite-form.md
 |  |  ├ gram-gerund.md
 |  |  ├ gram-glossary.md
 |  |  ├ gram-indirect-interrogative.md
 |  |  ├ gram-infinitive-as-adjective.md
 |  |  ├ gram-infinitive-as-adverb.md
 |  |  ├ gram-infinitive-as-noun.md
 |  |  ├ gram-infinitive.md
 |  |  ├ gram-interrogative.md
 |  |  ├ gram-learning-priority-of-english-grammar-rules.md
 |  |  ├ gram-non-finite-form.md
 |  |  ├ gram-noun-equivalent.md
 |  |  ├ gram-noun-phrase-and-determiner.md
 |  |  ├ gram-noun.md
 |  |  ├ gram-object-of-the-preposition.md
 |  |  ├ gram-participial-construction.md
 |  |  ├ gram-past-participle.md
 |  |  ├ gram-perfect-aspect.md
 |  |  ├ gram-predicate-verb.md
 |  |  ├ gram-present-participle.md
 |  |  ├ gram-present-perfect.md
 |  |  ├ gram-present-progressive.md
 |  |  ├ gram-progressive-aspect.md
 |  |  ├ gram-relative.md
 |  |  ├ gram-sentence-pattern.md
 |  |  ├ gram-subordinate-clause.md
 |  |  ├ gram-subordinate-conjunction.md
 |  |  ├ gram-verb.md
 |  |  ├ gram-wh-ever.md
 |  |  └ gram-wit-whether-if-that.md
 |  ├ jr-high
 |  |  ├ ch-2018-0627-203714.md
 |  |  ├ ch-9784046006622-4046006625.md
 |  |  ├ ch-9784053046116-4053046114.md
 |  |  ├ ch-bunri.md
 |  |  ├ ch-chuugaku-kyokasho-guide-photo.md
 |  |  ├ ch-chuugaku-kyokasho-guide.md
 |  |  ├ ch-engl.md
 |  |  ├ ch-kjuken-ichimon-itto.md
 |  |  ├ ch-kjuken-obns-fifty-percent-over.md
 |  |  ├ ch-kjuken-obns-fifty-percent-under.md
 |  |  ├ ch-kjuken-review-chu1-chu2.md
 |  |  ├ ch-koten.md
 |  |  ├ ch-math-kazuo-shiki-ch.md
 |  |  ├ ch-math.md
 |  |  ├ ch-new-wing-2018.md
 |  |  ├ ch-scie.md
 |  |  ├ ch-sh-yasashiku-marugoto.md
 |  |  ├ ch-shoryudo.md
 |  |  ├ ch-soci.md
 |  |  └ ch-yasashiku-marugoto.md
 |  ├ language
 |  |  ├ lang-an-english-grammar-for-elementary-students.md
 |  |  ├ lang-ccla-koukou-kambun-rapidly.md
 |  |  ├ lang-engl-9784342010507-434201050X.md
 |  |  ├ lang-engl-9784469342949-4469342947.md
 |  |  ├ lang-engl-9784864602013-4864602018.md
 |  |  ├ lang-engl-9784864602426-4864602425.md
 |  |  ├ lang-engl-9784864602532-4864602530.md
 |  |  ├ lang-engl-9784865311303-4865311300.md
 |  |  ├ lang-engl-ei-bumpou-gohou.md
 |  |  ├ lang-engl-eibun-dokkai-shori.md
 |  |  ├ lang-engl-english-grammar-in-use.md
 |  |  ├ lang-engl-grammar-exercise-book.md
 |  |  ├ lang-engl-how-to-learn-english-for-entrance-exam.md
 |  |  ├ lang-engl-idiom-books.md
 |  |  ├ lang-engl-paragraph-reading.md
 |  |  ├ lang-engl-pronunciation-stress.md
 |  |  ├ lang-engl-sogoeigo-ranking.md
 |  |  ├ lang-english-grammar-seen-from-part-of-speech.md
 |  |  ├ lang-jcla-conjugation-chart.md
 |  |  ├ lang-jcla-gram-setsuzoku.md
 |  |  ├ lang-jcla-kobun-tango.md
 |  |  ├ lang-jcla-koten-kotenbungaku-taikei.md
 |  |  ├ lang-jcla-koukou-kobun-rapidly.md
 |  |  ├ lang-jlan-gendaibun.md
 |  |  ├ lang-jlan-kanji-nihongo-quick-learning.md
 |  |  ├ lang-jlan-memorize-kanji-using-imagination.md
 |  |  ├ lang-kana-examples.md
 |  |  ├ lang-kana-in-alphabet.md
 |  |  ├ lang-kanji-hyperlinks.md
 |  |  ├ lang-reading-comprehension-in-english.md
 |  |  └ lang-translating-the-underlined-part-into-japanese.md
 |  ├ math
 |  |  ├ math-toru-yasuda-and-his-group.md
 |  |  ├ math-2018-0621-230531.md
 |  |  ├ math-2018-0621-230532.md
 |  |  ├ math-2018-0621-230533.md
 |  |  ├ math-2018-0621-230534.md
 |  |  ├ math-2018-0621-230535.md
 |  |  ├ math-2018-0621-230538.md
 |  |  ├ math-arithmetic-revolution.md
 |  |  ├ math-high-school-january-2018.md
 |  |  ├ math-hirose-kazuyuki.md
 |  |  ├ math-jikk-excel.md
 |  |  ├ math-jikk-ten-days.md
 |  |  ├ math-koukou-suugaku-ia.md
 |  |  ├ math-koukou-suugaku-iib.md
 |  |  ├ math-koukou-suugaku-iii.md
 |  |  ├ math-kyoko-sansuu.md
 |  |  ├ math-kyoukashodakedehatarinai.md
 |  |  ├ math-mathema.md
 |  |  ├ math-seibun-shinsha.md
 |  |  ├ math-sh-math-6nenkan.md
 |  |  ├ math-suken-shuppan.md
 |  |  └ math-zurich-keisan.md
 |  ├ monologue
 |  |  ├ mnlg-2018-0610-155051.md
 |  |  ├ mnlg-2018-0613-043150.md
 |  |  ├ mnlg-2018-0613-225549.md
 |  |  ├ mnlg-2018-0614-004019.md
 |  |  ├ mnlg-2018-0614-210724.md
 |  |  ├ mnlg-2018-0614-214919.md
 |  |  ├ mnlg-2018-0615-001215.md
 |  |  ├ mnlg-2018-0615-021519.md
 |  |  ├ mnlg-2018-0615-200659.md
 |  |  ├ mnlg-2018-0616-004103.md
 |  |  ├ mnlg-2018-0616-020753.md
 |  |  ├ mnlg-2018-0616-020754.md
 |  |  ├ mnlg-2018-0616-020826.md
 |  |  ├ mnlg-2018-0616-020827.md
 |  |  ├ mnlg-2018-0616-020829.md
 |  |  ├ mnlg-2018-0616-020835.md
 |  |  ├ mnlg-2018-0616-031525.md
 |  |  ├ mnlg-2018-0616-033255.md
 |  |  ├ mnlg-2018-0617-134941.md
 |  |  ├ mnlg-2018-0617-163359.md
 |  |  ├ mnlg-2018-0618-000809.md
 |  |  ├ mnlg-2018-0618-231750.md
 |  |  ├ mnlg-2018-0620-185931.md
 |  |  ├ mnlg-2018-0620-230927.md
 |  |  ├ mnlg-2018-0622-011104.md
 |  |  ├ mnlg-2018-0701-225755.md
 |  |  └ mnlg-2018-0702-232628.md
 |  ├ movie
 |  |  ├ movie-audio-recording-and-sound-editing-2018-Feb.md
 |  |  ├ movie-autonomous-sensory-meridian-response.md
 |  |  ├ movie-bluelight-cut.md
 |  |  ├ movie-mirrorless-camera-for-video-2018-05.md
 |  |  ├ movie-musical-theory.md
 |  |  ├ movie-pc-monitor.md
 |  |  ├ movie-recording-and-video-editing-2018-Feb.md
 |  |  ├ movie-songwriting-equipment.md
 |  |  ├ movie-sound-recording-hardware.md
 |  |  ├ movie-sound-recording-software.md
 |  |  ├ movie-technical-memorandum.md
 |  |  └ movie-video-shooting-software.md
 |  ├ post
 |  |  ├ post-2018-03-04-ssd-change.md
 |  |  ├ post-2018-06-june-new-books.md
 |  |  ├ post-2018-0618-234152.md
 |  |  ├ post-2018-0618-234153.md
 |  |  ├ post-2018-0618-234154.md
 |  |  ├ post-2018-0618-234155.md
 |  |  ├ post-2018-0618-234156.md
 |  |  ├ post-2018-0618-234157.md
 |  |  ├ post-2018-0618-234158.md
 |  |  ├ post-2018-0618-234159.md
 |  |  ├ post-2018-0618-234200.md
 |  |  ├ post-2018-0618-234201.md
 |  |  ├ post-2018-0618-234202.md
 |  |  ├ post-2018-0618-234204.md
 |  |  ├ post-2018-0618-234205.md
 |  |  ├ post-2018-07-july-new-books.md
 |  |  ├ post-drupal-yosage.md
 |  |  ├ post-firefox-quantum.md
 |  |  ├ post-how-to-delete-zapier-account.md
 |  |  ├ post-how-to-erase-your-youtube-comments.md
 |  |  ├ post-hugo-on-windows.md
 |  |  ├ post-my-bookmarks.md
 |  |  ├ post-new-books-archives-math.md
 |  |  ├ post-new-books-archives.md
 |  |  ├ post-new-books-kakomon-archives.md
 |  |  ├ post-refresh-firefox-favicon-cach-e.md
 |  |  ├ post-various-courses-after-high-school-graduation.md
 |  |  └ post-windows-install.md
 |  ├ publisher
 |  |  ├ publisher-akahon2019.md
 |  |  ├ publisher-bun-eido.md
 |  |  ├ publisher-center-shiken-mark.md
 |  |  ├ publisher-gakken.md
 |  |  ├ publisher-high-koukou-kyokasho-guide.md
 |  |  ├ publisher-kadokawa.md
 |  |  ├ publisher-kawai-shuppan.md
 |  |  ├ publisher-koko-code.md
 |  |  ├ publisher-kumon-shuppan.md
 |  |  ├ publisher-nichiei.md
 |  |  ├ publisher-obunsha.md
 |  |  ├ publisher-seibun-shinsha.md
 |  |  ├ publisher-shoryudo-shuppan.md
 |  |  ├ publisher-sundai-bunko.md
 |  |  ├ publisher-tetsuryokukai.md
 |  |  ├ publisher-tokyo-shuppan.md
 |  |  ├ publisher-yamakawa-shuppansha.md
 |  |  ├ publisher-yoyogi-library.md
 |  |  ├ publisher-z-kai-high-school-and-over.md
 |  |  └ publisher-z-kai-under-high-school.md
 |  ├ science
 |  |  ├ science-biol-koukou-center-seibutsu.md
 |  |  ├ science-chem-koukou-kagaku.md
 |  |  ├ science-chem-sakatakaoru-no-kagaku.md
 |  |  ├ science-esci-koukou-chigaku.md
 |  |  └ science-phys-koukou-butsuri.md
 |  ├ social
 |  |  ├ soci-center-chiri.md
 |  |  ├ soci-center-gensha.md
 |  |  ├ soci-center-nihonshi.md
 |  |  ├ soci-center-rinsei.md
 |  |  ├ soci-center-sekaishi.md
 |  |  └ soci-yamakawa-shuppansha.md
 |  ├ stationery
 |  |  ├ stat-acrylic-disk-paperweight.md
 |  |  ├ stat-dermatograph.md
 |  |  ├ stat-orange-pen-and-red-cellophane-sheet.md
 |  |  ├ stat-ppc-non-copy-core.md
 |  |  ├ stat-red-marker-pen-and-green-cellophane-sheet.md
 |  |  ├ stat-sharp-pencil-and-lead-holder.md
 |  |  ├ stat-smooth-writing-ballpoint-pen.md
 |  |  ├ stat-tech-dictation.md
 |  |  ├ stat-tech-ichitaro-and-eita.md
 |  |  ├ stat-tech-pomodoro.md
 |  |  └ stat-yellow-highlighter-for-reading.md
 |  └ survive
 |      ├ survive-anastasia-farming-methods.md
 |      ├ survive-contingency-battery.md
 |      ├ survive-contingency-earphone.md
 |      ├ survive-contingency-emergency-supplies-check-list.md
 |      ├ survive-contingency-flashlight.md
 |      ├ survive-contingency-kerosene-cooker.md
 |      ├ survive-contingency-radio.md
 |      ├ survive-contingency.md
 |      ├ survive-evacuate-in-a-hurry.md
 |      ├ survive-evacuation-tips.md
 |      ├ survive-fluoride-free-toothpaste.md
 |      ├ survive-furniture-that-you-can-throw-away-when-you-move.md
 |      ├ survive-low-cognitive-damage.md
 |      ├ survive-radiation-exposure-and-supplement.md
 |      ├ survive-rothenberger-pump.md
 |      ├ survive-skin-infection-treatment.md
 |      └ survive-somatid.md
 ├ data(空です)
 ├ layouts(ここがHugoの大事な部分です。ここはHugoのテーマのレイアウトなどを上書きするファイルの置き場です)
 |  ├ indexes(空です。_default以下のsection.htmlを変形したひな形ファイル〔sectionと同じファイル名に.htmlを付ける〕を置く場所)
 |  ├ partials(各ページに共通するひな形をパーツごとに格納します)
 |  |  ├ brand.html
 |  |  ├ copyright.html
 |  |  ├ disqus.html
 |  |  ├ favicon.html
 |  |  ├ footer.html
 |  |  ├ google_analytics.html
 |  |  ├ hatena.html
 |  |  ├ head.html
 |  |  ├ header.html
 |  |  ├ paginating.html
 |  |  ├ pagination.html
 |  |  ├ post_meta.html
 |  |  ├ prev_next_post.html
 |  |  ├ sidemenu.html
 |  |  └ social.html
 |  ├ taxonomy(記事を検索するときの象徴的なキーワードを3つの項目にわたってつくりました)
 |  |  ├ category.html
 |  |  ├ tag.html
 |  |  └ topic.html
 |  ├ _default(partialsの一部を呼び出したりしてひな形をつくる場所で、とても大事です)
 |  |  ├ li.html(記事名をリスト形式で表示するひな形〔実際には使っていません〕)
 |  |  ├ lili.html(ランディングページなどで使用。記事名をリスト形式で表示するひな形〔使っています〕)
 |  |  ├ rss.xml(RSSフィードのひな形)
 |  |  ├ section.html(各sectionに含まれる記事名をリスト形式で表示するひな形。左サイドバーの格sectionをclickしたとき)
 |  |  ├ single.html(各記事を表示するひな形)
 |  |  ├ summary.html(記事を「先頭をチラ見せする形式」で表示するひな形)
 |  |  └ terms.html(タクソノミーを構成しているキーワード〔ターム〕をリスト形式で表示するひな形)
 |  ├ 404.html(404で独自のページを表示したい場合だけ)
 |  └ index.html(ランディングページ〔トップページ〕のレイアウトを決めるファイル)
 ├ public(このディレクトリにあるファイル/ディレクトリをサーバーにアップロードする)
 |  ├ .htaccess
 |  ├ apple-touch-icon-precomposed.png
 |  ├ default_page.png
 |  ├ google9c36f9817995cf69.html
 |  ├ index.html
 |  ├ index.xml
 |  ├ robots.txt
 |  └ sitemap.xml
 ├ static
 |  ├ css
 |  |  ├ ashidagawa.css
 |  |  ├ blackburn.css
 |  |  ├ side-menu-old-ie.css
 |  |  ├ side-menu.css
 |  |  └ style.css
 |  ├ img
 |  |  ├ apple-touch-icon-precomposed.png
 |  |  ├ C007.jpg
 |  |  ├ DSC03263.JPG
 |  |  ├ favicon.ico
 |  |  ├ icon_048.png
 |  |  └ WhitefireAN.png
 |  └ js
 |      ├ jquery.toc.js
 |      ├ masonry.pkgd.min.js
 |      └ tree.js
 ├ themes(このディレクトリにテーマを入れる/ブラックバーンしか入っていない)
 |  └ blackburn
 |      ├ archetypes
 |      |  └ default.md
 |      ├ exampleSite
 |      |  ├ content
 |      |  |  ├ post
 |      |  |  |  ├ creating-a-new-theme.md
 |      |  |  |  ├ goisforlovers.md
 |      |  |  |  ├ hugoisforlovers.md
 |      |  |  |  └ migrate-from-jekyll.md
 |      |  |  ├ about.md
 |      |  |  └ contact.md
 |      |  ├ static
 |      |  |  └ .gitkeep
 |      |  ├ .gitignore
 |      |  └ config.toml
 |      ├ images
 |      |  ├ screenshot.png
 |      |  └ tn.png
 |      ├ layouts
 |      |  ├ indexes
 |      |  |  └ post.html
 |      |  ├ partials
 |      |  |  ├ brand.html
 |      |  |  ├ copyright.html
 |      |  |  ├ disqus.html
 |      |  |  ├ favicon.html
 |      |  |  ├ footer.html
 |      |  |  ├ google_analytics.html
 |      |  |  ├ head.html
 |      |  |  ├ header.html
 |      |  |  ├ pagination.html
 |      |  |  ├ piwik_analytics.html
 |      |  |  ├ post_meta.html
 |      |  |  ├ prev_next_post.html
 |      |  |  ├ sidemenu.html
 |      |  |  └ social.html
 |      |  ├ post
 |      |  |  └ single.html
 |      |  ├ shortcodes
 |      |  |  ├ fluid_img.html
 |      |  |  ├ fluid_imgs.html
 |      |  |  └ pure_table.html
 |      |  ├ taxonomy
 |      |  |  ├ tag.html
 |      |  |  └ topic.html
 |      |  ├ _default
 |      |  |  ├ li.html
 |      |  |  ├ single.html
 |      |  |  ├ summary.html
 |      |  |  └ terms.html
 |      |  ├ 404.html
 |      |  └ index.html
 |      ├ static
 |      |  ├ css
 |      |  |  ├ blackburn.css
 |      |  |  ├ side-menu-old-ie.css
 |      |  |  └ side-menu.css
 |      |  ├ img
 |      |  |  └ favicon.ico
 |      |  └ js
 |      |      └ ui.js
 |      ├ LICENSE.md
 |      ├ README.md
 |      └ theme.toml
 ├ config.toml(重要な設定やサイドバー部分のレイアウトを決定する)
 ├ Hugo-Build.bat(ページをpublicディレクトリに書き出す)
 └ Hugo-Prev.bat(ローカルサーバーで表示を確認する)

Hugoのあらまし

Hugoは「レジストリを書き換える」という意味でのインストールはしない

Hugoは単なる実行ファイル(hugo.exeという1つのファイルだけ)であり、Hugoが格納してあるディレクトリ(C:\Hugo\bin)に環境変数Pathでパスを通してやれば動く。 ただそれだけのものです。

並列処理で静的ページを生成するため、何百という記事のあるサイトでも、数秒以内に書き出しを完了してしまいます。

静的サイトの場合、サーバーを引っ越すときは、その書き出されたファイル群を、新しいサーバーの適切なディレクトリにアップロードし、新しいサーバーにドメインを登録し、DNSの切り替えをおこなえば終了してしまいます。

Hugoのダウンロード先

あんまり新しいHugoを使っても、かなり余計なことをしてくれるようになってきたので、私の場合、すでに最新版を使うのはやめています。

https://github.com/gohugoio/hugo/releases

C:\Hugo\Benkyo\config.toml

baseurl = "https://benkyosukisuki.com/"
title = "ゆきんこの勉強法 | 自修人"
languageCode = "ja"
author = "ゆきんこ"
# Shown in the side menu
copyright = "&copy; 2018. All rights reserved."
canonifyurls = true
hasCJKLanguage = true
paginate = 10
theme = "blackburn"

[indexes]
  tag = "tags"
  topic = "topics"
  category = "categories"

[params]
  # Shown in the home page
  subtitle = "unchain yourselves"
  brand = "<small>ゆきんこの勉強法<br>自修人</small>"
  googleAnalytics = "YOUR ID"
  disqus = "Your Disqus shortname"
  # CSS name for highlight.js
  highlightjs = "androidstudio"
  dateFormat = "2006-01-02 15:04"
  lastmodFormat = "2006-01-02 15:04"

[menu]
  # Shown in the side menu.
  [[menu.main]]
    name = "Math"
    pre = "<i class='fa fa-list fa-fw'></i>"
    weight =1200
    identifier = "math"
    url = "/math/"
  [[menu.main]]
    name = "Science"
    pre = "<i class='fa fa-list fa-fw'></i>"
    weight =1300
    identifier = "science"
    url = "/science/"
  [[menu.main]]
    name = "Language"
    pre = "<i class='fa fa-list fa-fw'></i>"
    weight =1400
    identifier = "language"
    url = "/language/"
  [[menu.main]]
    name = "Grammar"
    pre = "<i class='fa fa-list fa-fw'></i>"
    weight =1500
    identifier = "gram"
    url = "/Gram/"
  [[menu.main]]
    name = "Social"
    pre = "<i class='fa fa-list fa-fw'></i>"
    weight =1600
    identifier = "social"
    url = "/social/"
  [[menu.main]]
    name = "Jr-high"
    pre = "<i class='fa fa-list fa-fw'></i>"
    weight =1700
    identifier = "jr-high"
    url = "/jr-high/"
  [[menu.main]]
    name = "Post"
    pre = "<i class='fa fa-list fa-fw'></i>"
    weight =1800
    identifier = "post"
    url = "/post/"
  [[menu.main]]
    name = "Publisher"
    pre = "<i class='fa fa-list fa-fw'></i>"
    weight =1900
    identifier = "publisher"
    url = "/publisher/"
  [[menu.main]]
    name = "Gakusaninfo"
    pre = "<i class='fa fa-list fa-fw'></i>"
    weight =2000
    identifier = "gakusaninfo"
    url = "/gakusaninfo/"
  [[menu.main]]
    name = "Survive"
    pre = "<i class='fa fa-list fa-fw'></i>"
    weight =3000
    identifier = "survive"
    url = "/survive/"
  [[menu.main]]
    name = "Movie"
    pre = "<i class='fa fa-list fa-fw'></i>"
    weight =3100
    identifier = "movie"
    url = "/movie/"
  [[menu.main]]
    name = "Kangebra"
    pre = "<i class='fa fa-list fa-fw'></i>"
    weight =4000
    identifier = "kangebra"
    url = "https://kangebra.com/"
  [[menu.main]]
    name = "Stationery"
    pre = "<i class='fa fa-list fa-fw'></i>"
    weight =5000
    identifier = "stationery"
    url = "/stationery/"
  [[menu.main]]
    name = "Monologue"
    pre = "<i class='fa fa-list fa-fw'></i>"
    weight =6000
    identifier = "monologue"
    url = "/monologue/"
  [[menu.main]]
    name = "Categories"
    pre = "<i class='fa fa-list fa-fw'></i>"
    weight =20000
    identifier = "categories"
    url = "/categories/"
  [[menu.main]]
    name = "Topics"
    pre = "<i class='fa fa-list fa-fw'></i>"
    weight =22000
    identifier = "topics"
    url = "/topics/"
  [[menu.main]]
    name = "Tags"
    pre = "<i class='fa fa-list fa-fw'></i>"
    weight =24000
    identifier = "tags"
    url = "/tags/"

C:\Hugo\Benkyo\layouts\index.html

{{ partial "header.html" . }}

<div class="header">
  <h1>{{ .Title }}</h1>
<!--  <h2>{{ .Site.Params.subtitle }}</h2> -->
</div>




<div class="content">

{{ partial "hatena.html" . }}




<!-- ●●● -->

<div id="srchBox">
<style type="text/css">
#srchBox
{
width:298px;
_width:296px;
margin-bottom:10px;
background-color:#FAFFFF;
border-style:solid;
border-width:1px;
border-color:#EEEEEE;
color:#000000;
text-align:left;
}
#srchBox *
{
margin:0;
padding:0;
font-size:13px;
*font-size:small;
*font:x-small;
}
#srchBox a img
{
border:none;
}
#srchBox #srch
{
padding:10px 10px 0 10px;
}
#srchBox #srch #srchForm
{
white-space:nowrap;
}
#srchBox #srchInput
{
width:188px;
margin-right:6px;
vertical-align:bottom;
}
#srchBox #srchBtn
{
width:80px;
}
*html #srchBox #srchBtn
{
padding-top:2px;
}
*:first-child+html #srchBox #srchBtn
{
padding-top:2px;
}
#srchBox ul
{
margin-top:6px;
text-align:left;
}
#srchBox li
{
list-style-type:none;
display:inline;
zoom:1;
padding-right:10px;
}
#srchBox li input
{
zoom:1;
margin-right:2px;
_margin:-4px 0 -4px -4px;
vertical-align:middle;
border:0;
}
*:+html #srchBox li input
{
margin:-4px 0 -4px -4px;
}
#srchBox #srchLogo
{
margin:6px 6px 6px 0;
text-align:right;
}
#srchBox #srchLogo a
{
color:#666666;
text-decoration:none;
font-size:85%;
}
#srchBox #srchLogo a:hover
{
text-decoration:underline;
}

</style>
<form action="https://custom.search.yahoo.co.jp/search" method="get" id="srch" target="yjserp">
<p id="srchForm">
<input type="text" name="p" id="srchInput"><input type="submit" value="検索" id="srchBtn">
<input type="hidden" id="fr" name="fr" value="cse">
<input type="hidden" id="ei" name="ei" value="UTF-8">
<input type="hidden" id="csid" name="csid" value="zpY_OHF6Dd5COwavkQM.3AJekvjsfU8B0w6E4Up7e.DHo_yA6Y2D">
</p>
<input type="hidden" name="vs" value="benkyosukisuki.com" id="yjInsite">
</form>
<p id="srchLogo"><a href="https://www.yahoo.co.jp">powered by Yahoo! JAPAN</a></p>
<img src="https://custom.search.yahoo.co.jp/images/window/zpY_OHF6Dd5COwavkQM.3AJekvjsfU8B0w6E4Up7e.DHo_yA6Y2D.gif">
</div>
<!-- /#srchBox -->

<!-- ●●● -->




<p>
<div id="toc"></div>

<hr>
</p>




<h2>すべての記事の更新順|MonologueとMovieを除く</h2>

<small><ul>
  {{ range first 55 (where .Data.Pages.ByLastmod.Reverse "Section" "ne" "monologue") }}
    {{ if ne .Section "movie" }}
      {{ .Render "lili" }}
    {{ end }}
  {{ end }}
</ul></small>


<h2>Monologue</h2>

<small><ul>
{{ range first 22 (where .Data.Pages.ByLastmod.Reverse "Section" "monologue") }}
    {{ .Render "lili" }}
{{ end }}
</ul></small>


<h2>Language</h2>

<small><ul>
{{ range where .Data.Pages.ByLastmod.Reverse "Section" "language" }}
    {{ .Render "lili" }}
{{ end }}
</ul></small>


<h2>Grammar</h2>

<small><ul>
{{ range where .Data.Pages.ByLastmod.Reverse "Section" "gram" }}
    {{ .Render "lili" }}
{{ end }}
</ul></small>


<h2>Math</h2>

<small><ul>
{{ range where .Data.Pages.ByLastmod.Reverse "Section" "math" }}
    {{ .Render "lili" }}
{{ end }}
</ul></small>


<h2>Post</h2>

<small><ul>
{{ range where .Data.Pages.ByLastmod.Reverse "Section" "post" }}
    {{ .Render "lili" }}
{{ end }}
</ul></small>


<h2>Gakusaninfo</h2>

<small><ul>
{{ range first 22 (where .Data.Pages.ByLastmod.Reverse "Section" "gakusaninfo") }}
    {{ .Render "lili" }}
{{ end }}
</ul></small>


<h2>Publisher</h2>

<small><ul>
{{ range where .Data.Pages.ByLastmod.Reverse "Section" "publisher" }}
    {{ .Render "lili" }}
{{ end }}
</ul></small>


<h2>Jr-high</h2>

<small><ul>
{{ range where .Data.Pages.ByLastmod.Reverse "Section" "jr-high" }}
    {{ .Render "lili" }}
{{ end }}
</ul></small>

<h2>Science</h2>

<small><ul>
{{ range where .Data.Pages.ByLastmod.Reverse "Section" "science" }}
    {{ .Render "lili" }}
{{ end }}
</ul></small>

<h2>Social</h2>

<small><ul>
{{ range where .Data.Pages.ByLastmod.Reverse "Section" "social" }}
    {{ .Render "lili" }}
{{ end }}
</ul></small>

<h2>Stationery</h2>

<small><ul>
{{ range where .Data.Pages.ByLastmod.Reverse "Section" "stationery" }}
    {{ .Render "lili" }}
{{ end }}
</ul></small>

<h2>Survive</h2>

<small><ul>
{{ range where .Data.Pages.ByLastmod.Reverse "Section" "survive" }}
    {{ .Render "lili" }}
{{ end }}
</ul></small>

<h2>Movie</h2>

<small><ul>
{{ range where .Data.Pages.ByLastmod.Reverse "Section" "movie" }}
    {{ .Render "lili" }}
{{ end }}
</ul></small>




<h2 id="-999-">英語・古文|助動詞|活用表</h2>

    <p>

<a class="button-1" href="/language/lang-jcla-conjugation-chart/">英語・古文|助動詞|活用表 · ゆきんこの文法</a>

    </p>




<h2>書籍</h2>

    <p>

<a class="button-1" href="http://www.hon-michi.net/isbn.cgi" rel="nofollow" target="_blank">ISBN変換</a>
<a class="button-1" href="javascript:(function(){javascript:( function() { var title = document.getElementById(&quot;productTitle&quot;); var url = &quot;http://book.tsuhankensaku.com/hon/index.php?t=booksearch&amp;q=&quot; + title.innerText; document.location=url; })();})();">Amazonからの書籍横断(bookmarklet)</a>
<a class="button-1" href="http://book.tsuhankensaku.com/hon/" rel="nofollow" target="_blank">書籍横断</a>

    </p>




<h2>サイト</h2>

<p><fieldset><legend></legend>
<i class="fi-web"></i><a href="https://www.yodobashi.com/" rel="nofollow" target="_blank">ヨドバシ</a>
<i class="fi-web"></i><a href="https://www.amazon.co.jp/" rel="nofollow" target="_blank">Amazon</a>
<i class="fi-web"></i><a href="https://www.youtube.com/" rel="nofollow" target="_blank">YouTube</a>
<i class="fi-web"></i><a href="https://accounts.google.com/signin/v2/identifier?passive=true&service=youtube&uilel=3&hl=ja&continue=https%3A%2F%2Fwww.youtube.com%2Fsignin%3Faction_handle_signin%3Dtrue%26app%3Ddesktop%26next%3D%252Fsubscription_manager%26feature%3Dredirect_login%26hl%3Dja&flowName=GlifWebSignIn&flowEntry=ServiceLogin" rel="nofollow" target="_blank">YouTube登録ch</a>
<i class="fi-web"></i><a href="https://www.yahoo.co.jp/" rel="nofollow" target="_blank">Yahoo!</a>
<i class="fi-web"></i><a href="https://www.nifty.com/" rel="nofollow" target="_blank">@nifty</a>
<i class="fi-web"></i><a href="https://www.ocn.ne.jp/" rel="nofollow" target="_blank">OCN</a>
<i class="fi-web"></i><a href="https://www.goo.ne.jp/" rel="nofollow" target="_blank">goo</a>
<i class="fi-web"></i><a href="https://prepareforchange.net/" rel="nofollow" target="_blank">The Event/Cobra/Disclosure/</a>
<i class="fi-web"></i><a href="https://prepareforchange-japan.blogspot.com/" rel="nofollow" target="_blank">PFC-JAPAN OFFICIAL</a>
<i class="fi-web"></i><a href="http://sonia.thd-web.jp/" rel="nofollow" target="_blank">愛知ソニア の 連載「イナンナが語る ニビル星人アヌ一族の物語」</a>
<i class="fi-web"></i><a href="https://ameblo.jp/yamagami-teruo/" rel="nofollow" target="_blank">やまがみてるおブログ</a>
<i class="fi-web"></i><a href="https://www.hikaku.com/" rel="nofollow" target="_blank">比較.com</a>
<i class="fi-web"></i><a href="https://www.hikaku123.info/arujan/" rel="nofollow" target="_blank">あるJAN</a>
<i class="fi-web"></i><a href="https://www.saiyasune.com/" rel="nofollow" target="_blank">最安値.com</a>
<i class="fi-web"></i><a href="http://blog.jp/" rel="nofollow" target="_blank">blog.jp</a>
<i class="fi-web"></i><a href="https://secure.sakura.ad.jp/rscontrol/" rel="nofollow" target="_blank">さくらインターネット</a>
<i class="fi-web"></i><a href="https://jigen.net/buhin/" rel="nofollow" target="_blank">漢字の部品一覧|字源 - jigen.net</a>
<i class="fi-web"></i><a href="https://joyokanji.info/" rel="nofollow" target="_blank">常用漢字チェッカー | 常用漢字情報サイト</a>
<i class="fi-web"></i><a href="http://www.natubunko.net/kotoba13.html" rel="nofollow" target="_blank">部首別漢字一覧@夏貸文庫日本語13</a>
<i class="fi-web"></i><a href="http://kanji.jitenon.jp/" rel="nofollow" target="_blank">漢字辞典オンライン</a>
<i class="fi-web"></i><a href="http://pdftotext.com/ja/" rel="nofollow" target="_blank">PDF TXT 変換 – PDFをTextに</a>
<i class="fi-web"></i><a href="https://translate.google.co.jp/" rel="nofollow" target="_blank">Google Translate</a>
<i class="fi-web"></i><a href="http://www.getginger.jp/" rel="nofollow" target="_blank">Ginger 英文チェッカー</a>
<i class="fi-web"></i><a href="http://www.hon-michi.net/isbn.cgi" rel="nofollow" target="_blank">ISBN変換</a>
<i class="fi-web"></i><a href="http://www.iexcl.info/tools/p_urlhen.php" rel="nofollow" target="_blank">URLエンコード/URLデコード Web変換サービス UrlEncode.UrlDecode</a>
<i class="fi-web"></i><a href="http://www.hanmoto.com/" rel="nofollow" target="_blank">版元ド</a>
<i class="fi-web"></i><a href="http://book.tsuhankensaku.com/hon/" rel="nofollow" target="_blank">書籍横断</a>
</fieldset></p>




<h2>このサイトのRSSはセクションごとにも発行されています</h2>

<small>
<i class="fi-web"></i><a href="/index.xml" rel="nofollow" target="_blank">ゆきんこの勉強法 | 自修人 RSS(全体)</a><br>
<hr>
<i class="fi-web"></i><a href="/math/index.xml" rel="nofollow" target="_blank">Maths RSS · ゆきんこの勉強法 | 自修人</a><br>
<i class="fi-web"></i><a href="/science/index.xml" rel="nofollow" target="_blank">Sciences RSS · ゆきんこの勉強法 | 自修人</a><br>
<i class="fi-web"></i><a href="/language/index.xml" rel="nofollow" target="_blank">Languages RSS · ゆきんこの勉強法 | 自修人</a><br>
<i class="fi-web"></i><a href="/gram/index.xml" rel="nofollow" target="_blank">Grams RSS · ゆきんこの勉強法 | 自修人</a><br>
<i class="fi-web"></i><a href="/social/index.xml" rel="nofollow" target="_blank">Socials RSS · ゆきんこの勉強法 | 自修人</a><br>
<i class="fi-web"></i><a href="/jr-high/index.xml" rel="nofollow" target="_blank">Jr-highs RSS · ゆきんこの勉強法 | 自修人</a><br>
<i class="fi-web"></i><a href="/post/index.xml" rel="nofollow" target="_blank">Posts RSS · ゆきんこの勉強法 | 自修人</a><br>
<i class="fi-web"></i><a href="/publisher/index.xml" rel="nofollow" target="_blank">Publishers RSS · ゆきんこの勉強法 | 自修人</a><br>
<i class="fi-web"></i><a href="/gakusaninfo/index.xml" rel="nofollow" target="_blank">Gakusaninfos RSS · ゆきんこの勉強法 | 自修人</a><br>
<i class="fi-web"></i><a href="/survive/index.xml" rel="nofollow" target="_blank">Survives RSS · ゆきんこの勉強法 | 自修人</a><br>
<i class="fi-web"></i><a href="/movie/index.xml" rel="nofollow" target="_blank">Movies RSS · ゆきんこの勉強法 | 自修人</a><br>
<i class="fi-web"></i><a href="/stationery/index.xml" rel="nofollow" target="_blank">Stationeries RSS · ゆきんこの勉強法 | 自修人</a><br>
<i class="fi-web"></i><a href="/monologue/index.xml" rel="nofollow" target="_blank">Monologues RSS · ゆきんこの勉強法 | 自修人</a><br>
</small>




</div>


{{ partial "footer.html" . }}

WindowsのコマンドプロンプトでHugoのタイムスタンプ(現在時刻)を取得

@echo off
set TIME2=%TIME: =0%
echo date = "%DATE:~0,4%-%DATE:~5,2%-%DATE:~8,2%T%TIME2:~0,2%:%TIME2:~3,2%:%TIME2:~6,2%+09:00"| clip

以上を「hogehoge.bat」という新規ファイルにコピペして、このバッチファイルに対するショートカットを作り、そのショートカットをデスクトップにでも置いておき、必要時にクリックすれば(ショートカットキーを使ったほうがいい)、クリップボードに「date = “2017-03-01T16:36:07+09:00”」という形式のタイムスタンプがコピーされます。

Hugoのタイムスタンプ(現在時刻)をJavaScriptで取得

<span id="view_time"></span>

<script type="text/javascript">
document.getElementById("view_time").innerHTML = getNow();

function getNow() {
    var now = new Date();
    var year = now.getFullYear();
    var mon = now.getMonth()+1; //1を足すこと
if (mon < 10) {
  mon = '0' + mon;
}
    var day = now.getDate();
if (day < 10) {
  day = '0' + day;
}
    var hour = now.getHours();
if (hour < 10) {
  hour = '0' + hour;
}
    var min = now.getMinutes();
if (min < 10) {
  min = '0' + min;
}
    var sec = now.getSeconds();
if (sec < 10) {
  sec = '0' + sec;
}

    //出力用
    var s = "date = \"" + year + "-" + mon + "-" + day + "T" + hour + ":" + min + ":" + sec + "+" + "09:00\""; 
    return s;
}
</script>

コマンドのまとめ

最初に「まとめ」がきています。

項目の順番が、「作業手順の順番」ではありません。

作業手順は、「HugoをWindowsにコピーする」から始まります。

固定ページを新規作成する

cd C:\Hugo\Sites
hugo new about.md

あるいは

cd C:\Hugo\Sites
hugo new positive-school-refusal.md

投稿記事を新規作成する

cd C:\Hugo\Sites
hugo new post/pole-shift.md

結果として、下記のディレクトリに、投稿記事が作られます。

C:\Hugo\Sites\content\post\   ――   (WordPressでいう)投稿記事(ブログ記事)

blackburnテーマを適用しながらローカルでサイトをプレビューする

cd C:\Hugo\Sites
hugo server -t blackburn -D -w

blackburnテーマを適用しながらpublicディレクトリにサイトを構築(ビルド)する

cd C:\Hugo\Sites
hugo -t blackburn -D

※パラメータの意味:

――「-t blackburn」:テーマblackburnを使いながら。

――「-D」:記事(.mdファイル)の冒頭で「draft = true」を宣言していても、強行的に、publicディレクトリに記事をビルドする。

――以前の記事で、「hugo -t blackburn -D -w」というふうに「-w」(オートリロード:Hugoの関連ファイルを更新するとローカルサーバーを閲覧しているブラウザを自動にリロードする)を付けていましたけれども、必要なかったようです。<(_ _)>

できあがった(ビルドされた)サイトをサーバーにアップロードする

「publicディレクトリ」(下記の場所にあります)の中に入り、そこにあるすべてのディレクトリ(フォルダー)とファイルをすべて、借りているサーバーの「独自ドメイン名/public_html」などのディレクトリに、上書きコピーする。

C:\Hugo\Sites\public\

アップロードするソフトは、Windowsの場合、FFFTPなど。

FFFTP - 窓の杜ライブラリ

初心者にもおすすめフリーのFTPクライアントソフト10選 | TechAcademyマガジン

FFFTPのアップロードが遅いのでFileZillaを導入

HUGOでは、記事が150あったら、ファイル150とそれを格納しているフォルダ150をアップロードするので、記事数が増えると、記事をHUGOでビルドするのに要する時間よりも、記事をサーバーにをアップロードする時間のほうがずっと長くなります。

FFFTPが遅いと感じられたので、FileZillaを導入して、10多重転送を設定しました。

FileZilla Clientのウリである10多重FTP転送の設定です

引用元: 高速+高機能+FTPS対応の無料FTPソフトFileZilla Client

またFFFTPとUIを似せるために下記サイトを参照しました。

FileZillaをFFFTPっぽく使う | 純規の暇人趣味ブログ

GitとMercurialをWindowsにインストール

HugoではGitとMercurialが必要になるらしい。

以下が情報源。


ちなみに Hugo では git と Mercurial が必要である。

引用元: はじめての Go 言語 (on Windows) その3 - Qiita

したがって、GitとMercurialをWindowsにインストールする。

Git

Git for Windows

Mercurial SCM

HugoをWindowsにコピーする

ディレクトリとフォルダーは同じもの

C:\Users\hogehoge>

LinuxやMS-DOS(Windowsではコマンドプロンプト)など、コマンドライン(黒い画面)を多用するOSでは「ファイルを保存するための『名前を付けられた場所(物理的にはSSD上、HDD上などストレージのどこか)』をディレクトリ」と呼びます。

WindowsやmacOSやAndroidなど、GUI(アイコン、マウス、クリックなどの世界)を多用するOSでは「ファイルを保存するための『名前を付けられた場所』をフォルダー」と呼びます。

結局、「ディレクトリ名を格納したアイコンがフォルダーの絵になっている」ので「フォルダー」と呼んだのでしょう。

フォルダーという用語のほうが後発であり、「PCにそれほどくわしくない人に配慮した用語」という印象を受けます。

同じものを「ディレクトリ」と呼んだり、「フォルダー」と呼んだりするのは、混乱の元になります。

「フォルダー」という用語を作った人は、とってもとってもセンスがよいので、うんこかけご飯をご馳走しちゃろうと思いよります。食べてね。

うんこかけご飯 - YouTube

Hugoの導入はWindowsでいうインストール(レジストリの書き換えを伴う)ではない

「HugoをWindowsに導入する」という行為は、以下の(1)と(2)、2つの過程から成ります。

(1)C:\Hugo\binというディレクトリにhugo.exeをコピー

.zipファイルを解凍した結果として取り出された.exeファイルを、

C:\Hugo\bin

というディレクトリにコピーする。

これは「いわゆるインストール」ではないから、C:\Hugoというディレクトリごと削除して、次項の「パス(path)を通す記述」を、その記述場所である「環境変数Path」から削除してしまえば、「アンインストール」したのと同じ効果を発揮する。

(2)環境変数PathでC:\Hugo\binにパスを通す

環境変数PathでC:\Hugo\binにパスを通す。

Windows 7と8(.1)――環境変数Pathへ到達する方法:[コントロールパネル]→[システムとセキュリティ]→[システム]→[システムの詳細設定]

Windows 環境変数 Path の設定方法

結局、「;C:\Hugo\bin」という文字列を「環境変数Path」の末尾に追加記述して保存する。

;C:\Hugo\bin

この行為を、俗に「パスを通す」という。

MS-DOSでは、「autoexec.bat」というファイルを、テキストファイルとして編集し、PATH=C:\DOS;C:\WINDOWSといった記述を行っていた。

AUTOEXEC.BAT - Wikipedia

この「autoexec.bat」に該当する情報を、近頃のWindowsで編集するためには、「環境変数Path」という奥まったところへ行く必要がある。

結局、「パス(=path)を通す」とは、行為としては「autoexec.batのPATH=以降」や「環境変数Path」の内容に、「;C:\Hugo\bin」など、パスを通したいディレクトリの文字列を追記することでしかない。

「追記した」ことによる効力は、次の効力である。

コマンドライン(Windowsではコマンドプロンプト)の、どのディレクトリからも、コマンドを打ち込みさえすれば、すぐにコマンドが実行できる準備が整う、という効力。

※「実行ファイル〔バイナリファイル〕」:――それらは「.com」や「.exe」などの拡張子をもつ。

※Hugoを実行する場合は、hugoコマンドの後ろに「hugo -t blackburn -D」といったように、何らかのパラメータを添えるのが普通で、パラメータは「C:\Hugo\Sites\themes」ディレクトリを参照していたりします。

C:\Hugo\Sites\themes

※したがって、どこのディレクトリからコマンドを打ち込んでも「hugo.exeコマンドが有効になる」とはかぎりません。パラメータの情報を、どこへ読みに行っていいのか指定されていませんから。

※ですので、下記のように、「cd C:\Hugo\Sites」を添えて、ディレクトリを移動してからコマンドを実行させるようにします。

※そうするとHugoが、「blackburn」というディレクトリを「C:\Hugo\Sites\themes」から探して、適切に機能してくれます。

cd C:\Hugo\Sites
hugo -t blackburn -D

※パラメータの意味:

――「-t blackburn」:テーマblackburnを使いながら。

――「-D」:記事(.mdファイル)の冒頭で「draft = true」を宣言していても、強行的に、publicディレクトリに記事をビルドする。

――以前の記事で、「hugo -t blackburn -D -w」というふうに「-w」(オートリロード:Hugoの関連ファイルを更新するとローカルサーバーを閲覧しているブラウザを自動にリロードする)を付けていましたけれども、必要なかったようです。<(_ _)>

パスを通さないままの状態では、コマンドラインに「C:\Hugo\bin\hugo.exe」というフルパス(ルートディレクトリからの全道筋)をいちいち打ち込んで(コピペして)[Enter]を押す必要があります。

結局、「パスを通す」とは、OSに対して、ユーザーが、パスの通ったディレクトリを「コマンドが打ち込まれていないかどうかを常時警戒・監視する領域」として予約指定するということを意味する。

PCという文化が米国発なので、「パスを通す」という米国流の表現になっているけれども、漢字で示せば、「ユーザーがOSに対してコマンド常時監視領域を指定する行為」を「パスを通すこと」といいかえているだけ。

つまり「パスを通す」とは、「どの範囲に必要な情報があるよ」という「変域の指定」でしかない。


【まとめ】:

(1)「パスの通っているディレクトリ」に登録してある.exeファイルなら、どこのディレクトリから.exeファイルを実行するコマンドを打っても、この.exeファイル「有効」と見なしてもらえる。いいかえれば、OSがパスの通ったディレクトリを探し回ってくれるのだ。

※.exeファイルは、その拡張子「.exe」を指定しなくてもOSによって、コマンドと見なされる。

※「hugo.exe」と打たなくても、「hugo」でよい、といったようなこと。

(2)「環境変数Path」を変更せず、いいかえれば、「パスを通さない」場合には、コマンドプロンプトに「C:\Hugo\bin\hugo.exe」ないしは「C:\Hugo\bin\hugo」と打ち込む。いいかえれば、「パスを通さない」場合には、フルパス表記でコマンドを打ち込む必要がある。

(1)Hugo用ディレクトリの作成

c:
md C:\Hugo
md C:\Hugo\bin

過去にHugoを導入したことがないPCであれば、「C:\Hugo」「C:\Hugo\bin」というディレクトリを作る必要があります(上記をコマンドプロンプトにコピペして[Enter])。

Tech TIPS:これだけは覚えておきたいWindowsのコマンドプロンプトの使い方 (12) - @IT

「md」は「make directory」の意で、「ディレクトリを新規に作れ」ということ。

※記事名の「hogehoge.md」の「.md」という拡張子は、Markdownで記述されたファイルであることを示します。この「md」はMarkdownです。

(2)hugo.exe(Hugoの本体)をダウンロードと据え付け

Hugoのダウンロードサイト

Hugo - GITHUB

上記ページに行き、最新バージョンの(「v0.16」より「v0.17」が、「v0.17」より「v0.18」が新しい)Hugoを「Downloads」という見出しの記事内からダウンロードします。

自分のWindowsのbit数に応じて、「hugo_0.16_windows-64bit.zip」あるいは「hugo_0.16_windows-32bit.zip」などの.zipファイルをクリック(ダウンロード)したうえで解凍(たいていデスクトップに解凍される)します。

※「0.16」の部分はHugoのバージョンによって変化する。

ふつうは、リンクをクリックするだけで自動的にダウンロードが開始されます。

hugo.exeの据え付け

解凍されたデータはディレクトリ(例:hugo_0.16_windows-64bit)をなしますので、その中身(下記の3つのファイル)をC:\Hugo\binにコピーします。

ファイルのうち.mdは、注意書きをその内容とする「Markdown記法で記述されたテキストファイル」にすぎないので、C:\Hugo\binにコピーしなくても問題はない。

解凍されたディレクトリ

hugo.exe

――コレを**C:\Hugo\bin**にコピーします。

LICENSE.md ―― このファイルは実際には必要ない。

README.md ―― このファイルは実際には必要ない。

(3)そのサイト専用の「Hugoの作業用ディレクトリ」(例:Benkyo)を作る

下記のコマンドをコマンドプロンプトにコピペして[Enter]を実行した結果として、C:\Hugo\Benkyoという「そのサイト専用のディレクトリ」が作られます。

同時に、C:\Hugo\Sites\themesという「テーマを格納するディレクトリ」も作りました。

c:
cd C:\Hugo
hugo new site Sites
md C:\Hugo\Sites\themes
cd Sites

そうすると、ディレクトリ(中身はカラっぽ)の構造が以下のような状態になります。

themesディレクトリは、config.tomlと同じ階層に位置させなければなりません。

C:\Hugo\Benkyo>Tree C:\Hugo\Benkyo /f

C:\HUGO\BENKYO
│  config.toml
│
├─archetypes
├─content
├─data
├─layouts
├─static
└─themes

config.tomlには、必要最小限のことしか書かれていません。

GITHUBのHugoテーマのページには、config.tomlのひな形がたいてい示されていますので、それをコピペして改変してゆきます。


以後、「Benkyo」というサイトの記事づくりは、このC:\Hugo\Benkyoというディレクトリで作業を行い、「Benkyo」サイトを作ってゆきます。

もしも「Gakushuu」というサイトを作りたい場合には、下記にようにします。

c:
cd C:\Hugo
hugo new site Gakushuu
md C:\Hugo\Gakushuu\themes
cd Gakushuu

こうしてC:\Hugoの下位にディレクトリを増やしていくことで、サイトは好きなだけサイトのデータが作れます。

ソフトは、バージョンが上がると不具合が出るものです。

古いバージョンの環境は、ディレクトリ名をC:\HugoOldなどに変えて、そのまま保存しておき、それを丸ごとコピーしたC:\Hugoディレクトリで、新しいhugo.exeを使った記事づくりをするとよいかもしれません。

また何か記事以外のファイルをいじる前には、C:\Hugoのディレクトリごとバックアップを取っておくのもよいでしょう。ファイルサイズが小さいので、ラクに実行できます。

themesディレクトリへのとコピー

[2016年春版] 静的サイトジェネレーターHugo導入Tips ①インストールとサイトの初期作成 - Qiita

「C:\Hugo\Sites\themes」というディレクトリ構造を作ってください。そのためには、下記のコマンドをコマンドプロンプトに打ち込んで[Enter]を押します。

c:
md C:\Hugo\Sites\themes

その「C:\Hugo\Sites\themes」というディレクトリの下に、Hugoテーマ群をcopyまたはmoveしてください。

例えば、「blackburn」というHogoテーマが必要なのであれば、「blackburn」というフォルダー(ディレクトリ)をその中身(ディレクトリとファイル)ごと「C:\Hugo\Sites\themes\」にcopyまたはmoveしてください。

結果として、「C:\Hugo\Sites\themes\blackburn」といったディレクトリ構造になります。

Yoshiharu Yamashita

※copy、moveは、コマンドプロンプト上のコマンドの一種です。

※Windows上では、「copy」=「コピー©+貼り付け(P)」で「move」=「切り取り(T)+貼り付け(P)」を意味します。

Hugoテーマの閲覧とダウンロードは下記の2つのサイトで行えます。

Hugo Themes Site

Hugo Themes - GITHUB

gitコマンドを使ってHugoテーマをダウンロード

ここでは「Gitがインストールされている結果、gitコマンドがWindowsのコマンドプロンプトから使える」ことが前提です。

gitを導入したくない人は、先ほど「blackburn」というHogoテーマを例にして示したとおり、Hugoのテーマ群を.zipファイルとしてダウンロードし、その.zipファイルを解凍した内容を、自分で「C:\Hugo\Sites\themes\」というディレクトリにcopyまたはmoveしてください。

gitコマンドが使える環境が整えてある場合、コマンドプロンプトで下記のように打ち込んで[Enter]を押すと、「mkdir」と「md」は同じコマンドで、「ディレクトリを作れ」の意。

cd C:\Hugo\
mkdir themes
cd themes
git clone https://github.com/yoshiharuyamashita/blackburn.git

「C:\Hugo\Sites\themes\blackburn」といった具合に、所定のディレクトリに、テーマのデータがディレクトリごとダウンロードされる。

これを「clone(スル)」といっているようだ。

「Hugo入門」のような趣旨で書かれている多くのブログでは、macOSやLinuxを使用している前提で書かれており、かつ、「clone(スル)」とか、「build(スル)」とか、仲間内でしか通用しないジャーゴンを、注釈なしで平気で使っているので、初心者に優しくない印象を強く受けた。

この記事も、きっと読みにくいんだろうなぁ。

Hugoでパーマリンク|スラッグの指定

「NEW-BOOKS」という記事名をもつファイルでは、「new-books」というスラッグが指定されています。

結果として、URLは下記のようになります。

https://benkyosukisuki.com/post/new-books/

スラッグとは、「WordPressでいう『記事に与えたパーマリンクの名称』」です。

通常の.htmlファイルをサーバーにアップロードすると、.htmlファイルのファイル名が、モロにURLの一部となります。

しかし、「.htmlファイルのファイル名」と「記事に与えたパーマリンクの名称」とを別個にしたい。

そういう場合に、スラッグを指定するわけです。

この「パーマリンク」と「ファイル名」を別個にすることができる点が、Hugoの利点の1つだと思います。

Hugoにおける各記事のスラッグは、結局、サイトを構築(ビルド)するタイミングで、記事をなす「index.html」というファイルを格納するディレクトリ(フォルダー)の名称として採用されます。

つまりHugoで生成したサイトは、記事をなす「index.html」というファイルを格納するディレクトリ(フォルダー)の名称が、WordPressでいうパーマリンクになるわけです。

記事をなす.mdファイルの冒頭に「slug = “new-books”」という変数記入領域があり、そこでスラッグを指定するのです。

このスラッグそのものが、ディレクトリ(フォルダ)として構築(ビルド)されて、アップロード可能なディレクトリ/ファイル群を形成することになります。

いいかえれば、「スラッグ名」=「ディレクトリ名(フォルダ名)」=「(WordPressでいう)パーマリンク名」になります。

結局、WordPressでいうパーマリンクをHugo上で指定したい場合には、スラッグ名を「slug = “new-books”」というように指定したうえで、サイトを構築(ビルド)することが必要になるわけです。

C:\Hugo\Sites\content\   ――   (WordPressでいう)固定ページ
C:\Hugo\Sites\content\post\   ――   (WordPressでいう)投稿記事(ブログ記事)

構築(ビルド)というのは、上記2つのディレクトリに格納されている記事ファイル(.mdファイル)をHugoでバッチ処理(長くて数秒以内:激早)して、下記ディレクトリに「ウェブサイトに必要なディレクトリ/ファイル一式をすべて作り上げることを意味します。

Hugoを使う人が多いのは、ウェブサイトをなすすべてのファイル(.mdという、HTMLとMarkdown記法が許されるファイル)を超短時間でコンパイルできるからです。

C:\Hugo\Sites\public\

Hugoでサイトをビルドするコマンド

「publicディレクトリ」にサイトを構築(ビルド)するためのコマンドが、どのブログにも明示的には載っていませんでした。

私もまったく理解できていないのですけれども、次のように打ち込むと、「publicディレクトリ」にサイトが構築(ビルド)されます。

cd C:\Hugo\Sites
hugo -t blackburn -D

※パラメータの意味:

――「-t blackburn」:テーマblackburnを使いながら。

――「-D」:記事(.mdファイル)の冒頭で「draft = true」を宣言していても、強行的に、publicディレクトリに記事をビルドする。

――以前の記事で、「hugo -t blackburn -D -w」というふうに「-w」(オートリロード:Hugoの関連ファイルを更新するとローカルサーバーを閲覧しているブラウザを自動にリロードする)を付けていましたけれども、必要なかったようです。<(_ _)>

私はこのコマンドをデスクトップにバッチファイル(.bat)として登録して、このバッチファイル(アイコン)をクリックして使っています。

バッチファイルは、ふつうのテキストファイルで、拡張子が.batというだけのものです。

普通のテキストエディタ(Windowsのメモ帳など)で編集できます。

Hugoでローカルだけでサイトを閲覧するコマンド

「publicディレクトリ」にサイトを構築(ビルド)せずに、自分のPC(ローカル)でのみ、現在自分が執筆中のサイトの出来具合を確認したい(サイトをプレビューしたい)場合のコマンドは、下記です。

cd C:\Hugo\Sites
hugo server -t blackburn -D -w

このコマンド例では、blackburnというテーマを使ってサイトを閲覧している状態です。

この状態(自分のPCにサーバーが立ち上がった状態)は、コマンドプロンプト画面に対して「Ctrl + c」を打ち込むと停止されます。

コマンドプロンプト画面を「×」をクリックすることで閉じても、「Ctrl + c」を打ち込んだのと同じ効力が発揮されます。

自分のPC(ローカル)で現在自分が執筆中のサイトの出来具合をプレビューする。

これは、FirefoxやChromeといったブラウザーで、特定のURL(ローカルのURL)を開いて、そのURLの内容を閲覧することを意味します。

(1)文言表記 http://localhost:1313/

(2)IPアドレス表記 http://127.0.0.1:1313/

Hugoが立ち上げるローカルサーバーのURLは、上記の(1)と(2)です。

このURLそのものをブックマークツールバー、あるいは、デスクトップにドラッグ&ドロップするとブックマークされます。

「NEW-BOOKS」という固定ページの冒頭の設定値部分

このサイトでは、「config.toml」の固定ページ指定の部分は下記のようになっています。「config.toml」の全容は、この記事の末尾に載せます。

  [[menu.main]]
    name = "NEW-BOOKS"
    pre = ""
    weight =10005
    identifier = "new-books"
    url = "/new-books/"

このサイトの固定ページ「NEW-BOOKS」のファイルは、「new-books.md」というファイル名として「C:\Hugo\Sites\content」のディレクトリ内に保存されています。

「C:\Hugo\Sites\content\new-books.md」ということです。

その「new-books.md」という固定ページの記事ファイルの冒頭部分(設定領域)は下記のようになっています。

+++
date = "2016-04-16T21:24:56+09:00"
draft = true
slug = "new-books"
topics = ["問題集","学習参考書"]
tags = [""]
title = "NEW-BOOKS"
+++

●「config.toml」の「url = “/new-books/“」がパーマリンク(優先度第1位)になります。「/new-books/」がURLの末尾の部分になります。

https://benkyosukisuki.com/post/new-books/

●「config.toml」において「url = “/new-books/“」が指定されていない場合には、「new-books.md」の「slug = “new-books”」がURLの末尾の部分になります(優先度第2位)。

urlは完全にURLを変更します。slugを設定していても、こちらが優先されます。

引用元: Hugoをセットアップしてデプロイするまで[前編]Hugoのセットアップからビルドするまで | creative tweet.

●「config.toml」の「identifier = “new-books”」は、「C:\Hugo\Sites\content」のディレクトリ内に限定して、「(1)ファイル名(new-book.md)、(2)「slug = “new-books”」、(3)「tags = [“”] title = “new-books”」を、「new-books」というキーワードで検索しにゆくのだと思います。

優先順位の詳細は確認していませんけれども、たぶん、「ファイル名」→「スラッグ」→「タイトル」というふうに確認していっているような感じです。

もちろん、記事名ですから、「tags = [“”] title = “new-books”」は、「tags = [“”] title = “新刊書籍”」なり「tags = [“”] title = “NEW-BOOKS”」なりに変更しても大丈夫です。

「new-books.md」において、「ファイル名」か「スラッグ」が「identifier = “new-books”」つまり「new-books」と同じ値をもっていれば、それでHugoが認識してくれるのだと思います。

「config.toml」において「url = "/new-books/"」が、WordPressでいうパーマリンクになる。「https://benkyosukisuki.com/post/new-books/」など。

「config.toml」の「identifier = "new-books"」の「new-books」と同じ名称を、「hogehoge.md」(ファイル名)の「hogehoge」か、「hogehoge.md」の冒頭にある設定領域における「slug = "fugafuga"」(スラッグ)の「fugafuga」に与えておくべし。そうすると、Hugoが「メニュー」と「記事」とを自動で紐付けてくれる。

レイアウトなど

アーキタイプス

C:\Hugo\Sites\archetypes

上記のディレクトリに「default.md」というファイル名で、下記のような内容のファイルを作ります。

+++
date = "now()"
draft = true
slug = ""
topics = ["",""]
tags = [""]
title = ""
+++

これが記事内容を収録する「.md」ファイルのひな形として、新規「.md」記事ファイルにコピーされます。

「default.md」は、無ければ無いで、困りませんが。

ヘッダ、フッタ、サイドバーなど

ヘッダ、フッタ、サイドバーなどの部品は、下記ディレクトリにあります。

「layouts」ディレクトリは最初は空っぽですので、自分が選んだHugoテーマ、例えばBlackburnの該当ディレクトリから、こちらへ「layouts」の内容を丸ごとコピーし、必要に応じて改変します。

C:\Hugo\Sites\layouts\

特に改変することが多いのは「partials」ディレクトリの「head.html」でしょう。

C:\Hugo\Sites\layouts\partials

「head.html」の「</head>の前」に、JavaScriptファイルのリンクなどを書き込みます。

ファビコン

ファビコンは、下記ディレクトリに「favocon.ico」というファイル名にして置くだけで、Hugoが自動的にファビコンとして掲げてくれます。

「head.html」の「</head>の前」に、「favocon.ico」を呼び出すタグを入れる必要はありません。入れると記述が重複して不具合になります。

C:\Hugo\Sites\static\img

Googleアナリティックス

「config.toml」の「googleAnalytics = ““」にIDを入れるだけで、Hugoが各ページにタグを勝手に貼り付けてくれます。

Googleアナリティックスで「これを貼り付ける」的に説明されているJavaScriptのタグを入れる必要はありません。入れると記述が重複して不具合になります。

固定ページへのサイト内リンクを編集する

「固定ページへのサイト内リンクを編集する」ためには「C:\Hugo\Sites\config.toml」を編集する必要があります。

この「config.toml」ファイルは、下記のコマンドを実行したときに自動生成されます(たぶん)。

cd C:\Hugo\
hugo new site Sites
cd Sites

ただし、その内容はショボすぎてダメです。

下記URLのConfigulationに手本が載っているので、それをコピペして、自分流に改変してゆきます。

https://github.com/yoshiharuyamashita/blackburn

 
comments powered by Disqus