手間暇かけずにサクッとブログ記事を作りたいという方向け。
HUGOの自動記事生成コマンドを使って記事を作っていきます。

本記事は前回の 【コピペOK】HUGOでアフィリエイト用ブログサイトを作ろうの続きです。
以下に前回の記事リンクを貼っておきます。

【コピペOK】HUGOでアフィリエイト用ブログサイトを作ろう

手間暇かけずにサクッとアフィリエイト用のブログサイトを作りたいという方向け。 ある程度自由にカスタマイズできる、かつコマンド一つで 記事の自動生成ができる静的サイトジェネレータ「HUGO」についてまとめました。


目次


前回HUGOでブログサイトを作ったけど、どうやって記事の自動生成できるの?

大丈夫!今からHUGOの記事の自動生成について説明していくよ!


この記事は以下のような方を対象者としています。

本記事の対象者

  • ブログ作成はじめての方
  • アフィリエイト・ブログサイト作成に興味のある方
  • Wordpress以外でブログ構築を探している方
  • なるべく効率的にブログ記事を量産したい方

HUGOでの記事作成

まずは HUGOの自動記事生成コマンドがどんな感じなのか以下gif動画でご覧ください。
Tranquilpeak

ご覧の通り、実行されたコマンドから記事が自動生成されているのがわかります。
とても便利ですね。

それではこれからHUGOの記事生成についてもう少し詳しく説明します。
※前回の記事で用いたテーマはブログ用ではなくランディングページ用のテーマでしたので、今回は 「material-design」テーマを用いて説明します。

material-designテーマ
https://themes.gohugo.io/material-design/

フォルダ構成を知っておこう

Tranquilpeak
前回の記事でブログ用のフォルダを作成しました。
上記フォルダを開くと、画像のように6つのフォルダと1つのファイルがブログ用フォルダにあるかと思います。

ただ、主に使うのは以下2ファイルです、その他のフォルダはあまり使わないです。

Point

  • config.toml(ブログ全体の設定ファイル)
  • content(ブログ記事のファイルが入る)

HUGOの自動記事生成のココがすごい!

HUGOではブロガーの負荷を減らすための便利な機能が用意されています。
今後HUGOでブログ記事を生成したい方に向けて順番に説明します。

1.変更した内容が即反映される

上記gif動画でご覧いただいた通りHUGOでは 記事ファイルを変更し保存したら、その内容が即座に反映されます。

これにより、記事内容を変更した後わざわざブラウザを更新する手間が無くなります。
ブロガーにとってこの機能は 記事作成の時間を大幅に短縮できるので、控えめに言って神機能だと思います。

2.常に最新の記事が一番上に表示される

HUGOのブログ記事は作成日時データを持つため、 常に最新の記事を一番上に表示する仕様になっています。
わざわざブロガーが記事を更新してから、自分で表示順を設定する必要がありません。

記事作成後、一番最新の記事を表示する設定をわざわざするのは面倒ですよね。
その手間がHUGOではかかりません。超ラクです。

記事を自動生成しよう!

それでは早速記事の自動生成をしていきましょう。

ターミナルを起動し、以下コマンドを実行してください。

1
2
3
4
//ブログ用フォルダに移動する(exampleの所は自分がつけた名前を指定してください。)
cd ~/Desktop/example
//以下コマンドで記事の自動生成を行います(記事のファイル名はなんでも大丈夫です。)
hugo new post/test.md

記事の自動生成コマンドの説明

コマンドを解説します。

hugo new postで contentフォルダ(記事用フォルダ)のなかに更にpostというフォルダを作ります。
そして/xxxx.md(拡張子は.mdです。)でブログ記事のファイル名を指定できます。

この.mdの拡張子のファイルが ブログ記事の実ファイルになります。

ブログ記事ファイルの書き方

ブログ記事は マークアップ言語(HTML)とスタイルシート言語(CSS)で書けます。
基礎的な知識があれば誰でも簡単にブログの更新ができます。

まず、以下コマンドで先ほど生成した記事をテキストエディタで開いてみましょう。

1
2
//ブログ記事ファイルをテキストエディタで開く。
open -e content/post/test.md

そうすると、以下のような内容になっていると思います。
これはHUGOがデフォルトで生成した値になるのでtitle以外は変更しない方が良いです。

titleはブログ記事のタイトルになるので、自分のつけたい記事タイトルで上書き保存すればOKです。

Tranquilpeak

実際に記事を編集しよう!

以下フォーマットに習い、記事を編集してみてください。
SEOでも関わる重要なhタグやpタグで見出しや文章を作成できます

1
2
3
4
// 見出しをつける
# タイトル
// 文章を書く
これはサンプルの文章です。

ちなみに実際に記事を作成・編集しているgifは以下になります。
Tranquilpeak

生成した後の記事を確認しよう!

以下コマンドでWebサーバの立ち上げができます。

1
2
// ローカルサーバ立ち上げ(http://から始まる箇所をブラウザにコピペしてください。)
hugo server -D

速習!おすすめプログラミング勉強法【オンラインプログラミング】

いくつかプログラミング学習サービスを利用しましたが、一番効率よく勉強できると感じたのはUdemyでした。

Udemyでは動画での説明や解説等もあり親切で、学習教材も豊富にあることから プログラミング初学者の方が短期間でエンジニアを目指したいのであれば、非常に良い教材だと思います。

ちなみに私は文系卒で社会人になってから独学でudemyを使ってプログラミングの勉強をして、実際にエンジニアとして採用されました
世界最大級のオンライン学習サイトUdemy

また、別記事にてダナンでの生活やIT関連についても記事を書いていますのでクリックいただけると嬉しくて踊ります💃

関連記事

【海外移住】営業職からすぐにキャリアチェンジした方が良い理由

営業、エンジニア、プロジェクトマネージャーを経験してきましたが、その中でも 最も無駄なキャリアのは営業でした。 営業になることでどれだけ自分の人生の時間をどれだけ無駄に消費することになるのか、元営業の視点からご説明したいと思います。

【ダナンで働く】ダナン在住者が伝える日本人がベトナムで仕事を見つける海外転職必勝法

ベトナム中部のリゾート都市ダナン。日本で働くことに疲れた僕がワークライフバランスを求めて海外を中心に就職活動をしました。 徐々に日本人の間でも人気になりつつあるダナンですが、いざ海外転職する場合どのような仕事が日本人にはあるのか本記事でお伝えしたいと思います。

【残業大国】日本の異常な労働環境をベトナムで働いてみて実感した件

日本は「働く」ことに関しては異常です。 残業を美徳とする文化、過労死という言葉を作り出してしまう労働環境、パワハラの横行。明らかに他の国と比べて狂っています。 ダナンに住み始めて気づいた日本の異常な労働環境をベトナムの労働環境と比較しながら説明します。