見出し画像

エンジニア流、ミニサイトの作り方

ミニサイトをご存知でしょうか?

著者いわく、ミニサイトの定義は以下です。

・絞り込んだニッチテーマ
・コンパクトサイズ
・全体設計かっちり

要は、ビッグワードとはずらしたテーマを絞り込んだ完結型ウェブサイトのことです。

この記事では、エンジニアっぽいブログの運用をご紹介します。

はじめに

通常ブログサービスと言うと次のような選択肢があると思います。
1. WordPressのような、自身で構築するタイプ
2. アメブロなどのブログ型のプラットフォームタイプ

1のデメリットとしては、運用の手間やサーバーコストがかかること。
2のデメリットとしては、プラットフォームの制限を受けること。

なるべくデメリットが少ないけど、気軽にサイトを構築できるシステムがほしいというわけです。

そこで、Hugoを使ってサイトを構築し、Github Pagesでホストします。
Hugoは静的サイトジェネレーターで、ミニサイトと相性抜群。
更に、Github Pagesでは無料で静的サイトをホスティングできます。
実質かかる費用はドメイン代だけです。

Hugoでサイトを作成する

環境
・macOS Big Sur
・Homebrew インストール済み

Hugoのインストール

brew install hugo

サイト作成
sample_site というサイトを作成します。

hugo new site sample
cd sample

テーマ適用
https://themes.gohugo.io/ から好きなテーマを選び、DownloadボタンからGithubに行って、以下の要領でテーマを追加します。
今回はmainoadというテーマにしました。

git submodule add https://github.com/vimux/mainroad themes/mainroad

config.toml(Hugoの設定ファイル)に以下のように追記して、テーマを適用します。

theme = "mainroad"

ページ追加
first_page.md というテンプレートからコピーされたページのが作成されます。

hugo new posts/first_page.md

ローカルでサーバー起動

hugo server -D

静的サイトのビルド

hugo

後は、これをGithubPagesにホストすれば完了です。

最後に

実際は以下もすべきですが、まずは一旦スモールスタートで。
・検索システムを追加
・ページをGoogleにインデックスさせる
・GoogleAnalyticsの導入
・アドセンスなどマネタイズ対応
・SEO対応
・独自ドメイン設定(githubがコピーサイトにならないように設定)


この記事が参加している募集

読書感想文

この記事が気に入ったらサポートをしてみませんか?