HUGOブログにマークダウン記法による記事を書いてアドセンスコードを挿入しよう!

Share on:

この記事は約5 分で読めます。

目次

はじめに

前回の記事HUGOという静的サイトジェネレータを使ったブログの開設を学びました。

本講の目的は副業として静的ブログで安定的にアドセンス収入を得ることを目的としています。

前回の記事でブログの構築ができ、アドセンスの申請に必要な記事を書ける段階まで来ました。

アドセンスを利用するには審査が必要であり、そのためにはある程度の記事の書き溜めなければなりません。

アドセンスの申請方法も同時に解説するのが良いと思いますが、まずは記事を10記事前後ほど用意したほうが良いの本記事では記事の書き方に特化して解説します。

アドセンスの申請方法やポイントなどは追って解説します。

HUGOの構成

HUGOブログ開設のおさらいです。

 1c:\hugo>hugo new site demo
 2Congratulations! Your new Hugo site is created in C:\hugo\demo.
 3
 4Just a few more steps and you're ready to go:
 5
 61. Download a theme into the same-named folder.
 7   Choose a theme from https://themes.gohugo.io/ or
 8   create your own with the "hugo new theme <THEMENAME>" command.
 92. Perhaps you want to add some content. You can add single files
10   with "hugo new <SECTIONNAME>\<FILENAME>.<FORMAT>".
113. Start the built-in live server via "hugo server".
12
13Visit https://gohugo.io/ for quickstart guide and full documentation.

hugo new site 任意の名前コマンドで、任意の名前のフォルダー内にブログ一式が準備されます。

そのフォルダーの中身は、

1任意のフォルダ
2 └ /archetypes
3 └ /content
4 └ /data
5 └ /layouts
6 └ /static
7 └ /themes
8 └ config.toml

となっています。

実際に使うのは、contentthemesconfig.tomlです。

themesフォルダ内には空ですので、前回の記事の通り、下記サイトからお好みのテーマを入れておきます。

本題の記事を置く場所はcontent内になります。

config.tomlはブログの設定ファイルになりますが、テーマによって記載内容が異なっていますので、共通項目については後日解説します。

それではHUGOでの記事の書き方に移りましょう!

HUGOの記事はマークダウン記法で書く

マークダウン記法とは文章の記述方法の一つです。

HTMLタグを意識することなくスラスラ書けるのが魅力的な記法です。

  • 【HTML】<h2>これはH2見出しです</h2>
  • 【マークダウン】## これはH2みだしです

いかがでしょうか?

<h2>などと面倒なタグを書かなくても##と記述するだけで、<h2>タグに変換できてしまうのです。

本講の最初にも書きましたが、アドセンスで安定的に収入を得るにはガシガシ記事を書いていかなければなりません。

マークダウンで記事を書くと、記事を書くという労力も軽減され、途中で挫折することもなく、空き時間やスキマ時間にも記事の執筆ができるので、HUGOという選択肢はとても有効なのです。

それでは最初の記事を書いてみましょう!

HUGOで初めての記事

はじめに、contentフォルダ内にpostという名前のフォルダを作成します。

続いてpostフォルダ内に、適当な名前.mdという空ファイル(テキストファイル)を作成します。

  • md拡張子がマークダウン記法で書かれたテキストファイルであることを示しています。
  • 適当な名前は英字でも日本語でも構いません。この名前がURLになりますので適当とはいえ慎重に決めましょう。

普段お使いのテキストエディタ(MS Wordなどは不可。メモ帳やTerapadなどのテキストエディタが必要です。)で適当な名前.mdを開きます。

まず、冒頭に下記の内容を記述します。

記述内容は色々ありますが、とりあえず必須&覚えておいたほうが良い項目を列挙しています。

 1---
 2title: HUGOで初めての記事を書いてみた!
 3description: HUGO格闘日記です。今日は初めての記事を書いてみました。
 4date: 2020-04-08
 5categories:
 6  - "HUGO"
 7  - "ブログ"
 8tags:
 9  - "記事の書き方"
10  - "アドセンス"
11---
12
13~ここから記事本文になります。~
14

続いてまずは簡単な記事を書いてみましょう。

記事を書くにあたって必要な記法の一部を列記しておきます。

  • # → <h1>
  • ## → <h2>
  • 強調 → 強調する文字
  • リンク → [アンカーテキスト](URL)
  • 引用 → > 引用文
  • 箇条書き → - 文字列

これらの規則に則って記事を書きます。

 1## これはサンプル記事です。
 2
 3初めての記事です。
 4
 5このブログで**アドセンス**を稼いでいきたいと思います。
 6
 7## やること
 8
 9- 毎日1記事
10- SEO対策
11- SNS集客
12
13[Google](https://google.co.jp)

こんな感じで記事を書きます。

では、前回同様hugo serverコマンドでブラウザでブログを確認してみましょう!

 1c:\hugo>cd demo
 2
 3c:\hugo\demo>hugo server
 4Building sites …
 5                   | EN
 6-------------------+-----
 7  Pages            | 37
 8  Paginator pages  |  0
 9  Non-page files   |  0
10  Static files     |  6
11  Processed images |  0
12  Aliases          | 15
13  Sitemaps         |  1
14  Cleaned          |  0
15
16Built in 73 ms
17Watching for changes in c:\hugo\demo\{archetypes,content,data,layouts,static,themes}
18Watching for config changes in c:\hugo\demo\config.toml
19Environment: "development"
20Serving pages from memory
21Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
22Web Server is available at //localhost:1313/ (bind address 127.0.0.1)
23Press Ctrl+C to stop

ブラウザで、http://localhost:1313にアクセスして先程書いた記事が表示されるか確認してみましょう。

マークダウン記法もHTMLにきちんと変換されていますか?

これで初のHUGOブログデビューとなります。

まとめ(アドセンスコード挿入)

今回はマークダウン記法でブログ記事を書いてみました。

まだ初心者の方はアドセンス申請をしていませんのでアドセンスコードを挿入するところまでには至っていません。

もし、アドセンスをすでに利用している方は、次の記事以降までお待ち下さい。

待てないという方のために簡単に書いておきますと、

C:\hugo\demo\themes\Mainroad\layouts\shortcodes\adsense.htmlというようなhtmlファイルを作成し、アドセンスコードのみadsense.htmlファイルに記述します。

adsense.htmlの準備ができましたら、記事内のアドセンスを表示したい箇所に

{{< adsense >}}

と記述してみてください。(カッコは表示上全角になっていますので半角に変更してください。)

これでアドセンスが表示されます。

以上、マークダウン記法で記事を書いてみるという記事でした。