ブログ書きたいけど、何で始めればいいのか・・・？

世の中にはブログを書くためのプラットフォームがたくさんありますね。 有名なところだと、はてなブログとか、最近だとNoteも認識ですよね。

私も最初ははてなブログかWordPressにしようかなーと考えたんですが、 どうせやるなら、新しい技術に触れながらブログを作る過程も楽しみたいなぁと思って、 静的サイトジェネレータのHugoを使ってブログサイトを作ることにしました。 というか、まさにこのサイトがHugoで作ったWebサイトになります。

Hugoではあらかじめ用意されている複数テーマの中から、自分好みのテーマを選択しそれをカスタマイズしていく感じです。 テーマはブログ系の他にも、ポートフォリオ系や製品紹介系など複数のテーマが用意されています。テーマ選びのポイントはまた別途紹介しますね。

正直な話、触り始めて2時間くらいでめんどくさくなって、やっぱりやめたいと思いましたｗ
でもわかってきたら少しずつ楽しくなってきます。多少時間はかかるけど、自分好みの形にカスタマイズできるので、 記事を書くだけじゃなくてブログサイト構築自体も楽しみたい人にはおすすめです。

そんなことより早く楽にブログを始めたいという方には、はてなブログかNoteあたりをお勧めしますｗ

利用しているサービスの一覧

ブログサイト構築にあたり利用したサービスはこちらです。

種類 今回使用したもの 用途
静的サイトジェネレータ Hugo Webサイトを構築するフレームワーク。Markdownでブログをかける。これがないと始まらない。
ソースコード管理 GitHub Hugoはそのすべてをファイルで管理するから、ソースコード管理が必要だぞ。
ホスティングサービス netlify 静的サイトジェネレータで作られた静的コンテンツ(HTML/CSS/JavaScript) を配信してくれるWebサービスだぞ。
CMS Forestry.io スマホから記事書きたいときとかに使えるHugoに対応したCMSサービス。なくてもいいぞ。
Hugo Theme Robust HugoではWebサイトのデザインがテーマとして公開されていて、自分の好みのデザインを選べる。
Analytics Google Analytics 気になるよね。どのくらいの人がみてるのか。アクセス分析を簡単にやってくれるよ。
Favicon作成 ICONSFLOW 32×32のpngのみなら無料でダウンロードできます。
ロゴ作成 Maketext.io サイト名からロゴを作成できるサイト。SVGでもPNGでも出力できるし使いやすいです。
SVG素材 unDraw めちゃ重宝しそう。かっこかわいい素材ありがとうございます。
エディター Visual Studio Code なんでもいいけどVSCodeおすすめ。
Gitクライアントツール Sourcetree GUIでGitを操作できるクライアントツール。結構好き。
Gitクライアントツール Git Bash Gitのコマンドラインツール。lsコマンドとか使えるので好き。
カスタムドメイン お名前.com
ブログのコメント表示ツール Disqus

これ、ほとんど無料(カスタムドメインのみ有料)っすよ。すごいですよね。

ということで、次回以降下に挙げたようなHugoを使ったブログサイトの構築方法を順に紹介していきます。

HugoとGitHubとnetlifyでの無料ブログの構築手順

初期構築

時間はおおよそです。詰まったらもっとかかるかもしれませんのであしからず。

共通のカスタマイズ

  • Netlifyでサイト名を変える
  • NetlifyでGoogle Analyticsを設定する
  • Netlifyでカスタムドメインを設定する
  • NetlifyでHTTPSを有効化する
  • Hugoでデフォルトテーマの不要なコンテンツを削除する
  • Hugoで目次を表示する
  • Forestry.ioを設定する
  • RSSを配信する