Lan's note

高速HUGOブログで脱WordPress!静的ブログでもココまでできるを実証中!

2020-04-06

アドセンスで安定的に収入を得るために静的ブログ(HUGO)を使ってみよう!

ブログを運営していく上で静的ブログが良いとされるわけ

まず、動的ブログと静的ブログの違い、利点、不利点のおさらいです。

動的ブログ

代表的なものにWordPressがあります。

WordPressはブログにアクセスがあるとデータベースにアクセスし、ページとして読めるようにHTMLをその都度構成してPCやスマホに表示させています。

ですので、表示にかかる時間が遅いという不利な点があります。

またWordPressには管理者画面がありますので、悪意ある者がログインを試みデータを改ざんしようと試みます。

表示スピードも管理者画面もデータベースへのアクセスに起因しているため、データベースを基本とするWordPressは不安要素が多いと言えます。

さらにWordPressは現在ブログシステムのデファクトスタンダードになっているため、余計、悪意ある行為の標的になりやすいのです。

あと、WordPressを運営するにはレンタルサーバーが必要となりますが、これも費用面で副業としての収益が上がるまでは重くのしかかってくるかもしれません。

とはいえ、月1,000円前後で済むサーバーでOKですので、アドセンスの収益が上がってくれば十分にペイできる金額ではあります。

これらがWordPress(=動的ブログ)を避けたい理由です。

もちろんWordPressにも良い点はあります。

  • 初心者が直感的に操作できる。(ブログサービス=livedoorBlogなどのようなブログサービスに近い感じで記事が書ける)
  • 豊富なテーマが用意されていて好みのデザインを選べる。
  • 豊富なプラグインで実装したい機能が簡単に再現できる。(プラグインの開発が止まることもしばしばありセキュリティ的に不安視するところもあります。)
  • 多くのレンタルサーバー会社でWordPressを簡単に扱えるような仕組みを用意している。

以上が利点です。

本心を言えばセキュリティと動作速度、運用費用の問題がクリアできるのであれば、初心者の方にはWordPressをおすすめします。

しかし、趣味でブログを書くわけでなく、収益の基盤となるものですから、やはりセキュリティに不安があったり、閲覧に時間がかかるようなものは避けたいところです。

静的ブログ

静的ブログというのは聞き慣れない言葉かもしれません。

静的ブログとは、予め生成されたHTMLソースをサーバー上に置いておくだけのブログです。

ブログにアクセスがあると、サーバー上のHTMLソースを何の処理も加えずに表示するだけですので非常に高速です。

また、データベースなど持たず(管理者画面もありません)、訪問者に対してHTMLソースを返すだけですので、セキュリティ上の不安要素はほぼありません。

(「ほぼ」というのは一般的な運用サーバーへの悪意ある行為などは存在します。)

そして何より一番のおすすめポイントは、ブログ記事の執筆・更新が非常に簡単であるということです。

使い慣れたテキストエディタでHTMLタグなどを書かずにスラスラ書けます。

これはスキマ時間に記事を書けるなど、忙しい人の副業として欠かせない要素だと思います。

気になる運用費用ですが、静的ブログは無料で運用することが可能です。

副業として始めるにはこれ以上ない条件かと思います。

そんな良い事づくしの静的ブログですが、不利な点はないのでしょうか?

  • 導入時点の敷居が高い。
  • ブログデザインが限定的である。
  • ブログのカスタマイズにはある程度の知識が必要である。

静的ブログの不利益な点とはこれくらいでしょうか?

初心者の方にとっては、導入やカスタマイズが面倒と思われるかもしれませんが、このブログで丁寧に解説していきますのでご安心ください。

といってもやってみれば簡単なものであり、一度静的ブログシステムを構築してしまえば、先述の通り簡単に記事を更新していくだけですので、一歩足を踏み出してみましょう。

静的サイトジェネレーターHUGOのインストール

それでは静的ブログ「HUGO」を使ってアドセンスで稼いでいくブログの作成に入りましょう!

本講もいよいよ実践編に突入します。

ここでいきなりHUGOという言葉が出てきました。

HUGOとはGo言語Golang)ベースの静的ブログを作成するツール(正確には静的サイトジェネレーター)だと思ってください。

Go言語とは2009年にGoogleが設計したプログラム言語です。

このHUGOというツールを使って、前述した簡単に書き上げたテキストをHTML形式に変換し、サーバー(無料)にアップロードして、ブログを公開するというのが基本の流れになります。

なぜHUGOやGo言語なのか

ずばりHTML形式への変換が早く、貧弱と言われる静的ブログのテーマの中でも、HUGOのテーマは豊富であるという点です。

(個人的にはGoogleが開発したGo言語が好きであり、仕事でもGo言語を使っているというのもあります。)

利用者も多く、ネット上に情報も豊富にありますので、おすすめです。

HUGOのインストール

上記のサイトからhugo_0.68.3_Windows-64bit.zipまたはhugo_extended_0.68.3_Windows-64bit.zipをダウンロードします。

※バージョンは本記事執筆時当時のものです。

※HUGOのテーマによってはextendedバージョンでないとブログを生成できませんが、概ね通常版で大丈夫です。

ダウンロードしたファイルを解凍しhugo.exeを適当なフォルダにコピーします。

コマンドプロンプトでコピー先フォルダに移動して下記の通り表示されればインストール完了です。

c:\hugo>hugo version
Hugo Static Site Generator v0.68.3/extended windows/amd64 BuildDate: unknown

今hugo.exeのある位置まで移動してhugoコマンドを実行しましたが、Windowsパソコン上のどこからでもhugoコマンドが使えるようにパスを通しておきましょう。

コントロールパネル→システム→システムの詳細設定→環境変数→システム環境変数→Path(ダブルクリック)→新規→C:\hugo\入力→コマンドプロンプト起動していれば再起動

これで、コマンドプロンプトがどの位置にあってもhugoコマンドを実行できます。

HUGOでサンプルブログを作成

hugoコマンドでブログの基礎を作ります。

hugo new site sample

上記のhugoコマンドを実行するとsampleフォルダが自動生成されフォルダ内にブログに必要なファイル群が展開されます。

c:\hugo>hugo new site sample
Congratulations! Your new Hugo site is created in c:\hugo\sample.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>\<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

続いて、テーマを入れます。

ここにHUGOテーマがたくさん用意されています。

まずはどのテーマでも構いません、試したいテーマをクリックするとDownloadボタンが表示されますので、ダウンロードしてください。

※説明のため、ここではMainroadというテーマを例に取ります。

ダウンロードしたファイルを解凍し、sample/theme/フォルダにフォルダごとコピーします。

なお、フォルダ名は、Mainroad-masterからMainroadに変更しておきます。

次にサンプルブログを表示させるためにテーマ内にはブログのサンプル記事等が用意されています。

docsyテーマの場合、sample/theme/Mainroad/exampleSite/フォルダ内がそれにあたります。

sample/theme/Mainroad/exampleSite/フォルダ内のファイルをすべて/sample/フォルダ内に上書きします。

これでブログの準備が整いました。

hugo serverコマンドでブラウザでブログを確認してみましょう!

c:\hugo>cd sample

c:\hugo\sample>hugo server
Building sites …
                   | EN
-------------------+-----
  Pages            | 37
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  6
  Processed images |  0
  Aliases          | 15
  Sitemaps         |  1
  Cleaned          |  0

Built in 73 ms
Watching for changes in c:\hugo\sample\{archetypes,content,data,layouts,static,themes}
Watching for config changes in c:\hugo\sample\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 //localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

73ミリ秒でブログの構築が完了しました、爆速!

ブラウザで、http://localhost:1313にアクセスしてみましょう。

ブログの雛形が表示されていれば成功です。

※ブログを停止させるときには、コマンドプロンプトでCtrl+Cを押下するのを忘れないでください。

まとめ

長文になりましたが、今日の作業をまとめますと次の4項目となります。

  • 1.HUGOをダウンロードして、適当なフォルダに配置し、パスを通しておく。
  • 2.hugo new site 適当なフォルダ名でブログの雛形を作成する。
  • 3.HUGOのテーマをダウンロードして、themeフォルダにコピー後、exampleSiteフォルダ内のファイルをすべてトップフォルダにコピーする
  • 4.hugo serverコマンドでブログを立ち上げ、http://localhost:1313にアクセスして確認する。

今回は初回ということで、簡単にexsampleSiteフォルダをコピーしてブログを表示させましたが、実際には設定ファイルや記事を個別・独自に設置していくのが一般的です。

これらにつきましては次回以降解説していきます。

どうでしょう、静的ブログの簡単さが少しは伝わりましたでしょうか?

これから基本的な記事の書き方やブログデザインのカスタマイズ、動的な要素を盛り込むなど解説していきますのでお楽しみにしていてください。