虎視眈々と

Flutter × Firebaseを研究するアプリエンジニア

トップ > Firebase > Firebase Hostingと、hugoを使って個人ブログをはじめるまで

Firebase Hostingと、hugoを使って個人ブログをはじめるまで

Firebase

なぜhugo？？

なぜhugoを選択したかというと、テーマ一覧が豊富でテーマがWordpressより好きな感じだったので選択しました。

テーマの一覧が海外技術ブログで使われてるようで、エンジニアがブログをはじめるにはベストな選択だと思います。

全テーマオープンソースなので無料です。

なぜFirebase

自分はFirebaseが大好きなんで選択しましたが、実際やってみるとawsやオンプレサーバーより圧倒的に設定が楽なので選択しました。

Hugoのセットアップ

まずは、hugoのセットアップを行います。

ツールをインストールしましょう。

エンジニアでない方はコマンドラインを使うので頑張っていきましょう。基本的したのコマンドラインをコピペしていくだけです。

この機会にぜひプログラミングを！！

homebrewのインストール

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

npmをインストール

brew install nodebrew

hugoのインストール

brew install hugo

サイトの作成

ここまでできたらサイトを作成します

hugo new site hoge

hoge の方は自分の好きなファイル名を指定しましょう

これがこの前ブログの名前になるわけではないので好きなものでいいと思います

テーマの指定

ここまできたらテーマを設定します。

下記のサイトからテーマを探しましょう

https://themes.gohugo.io/

テーマを決めたらそこからそのテーマをダウンロードします。

ダウンロードもコマンドでやります。

cd hoge/themes

今回はこちらを使用します

Cactus

Installationにあるように下記のコマンドを実行しましょう。

git clone https://github.com/digitalcraftsman/hugo-cactus-theme.git

config.tomlの編集

この設定ファイルを編集することでサイトを修正することができます。

テーマをダウンロードしたGithubにexamleの中にconfig.tomlがあるのでそのに書かれてるコードを全てコピーしてhogeの下にあるconfig.tomlに貼り付けましょう。

貼り付けたら、タイトルとか、コメントで書かれている英文を参考に設定を変更していきましょう。

例えばこんな感じ

# Site settings
baseURL = "https://shogogeek.com/"
languageCode = "ja"
DefaultContentLanguage = "ja"
publishdir = "public" # 公開用ディレクトリ（この名前を推奨）
contentdir = "content" # コンテンツのディレクトリ
title = "虎視眈々と"
canonifyurls = true # 絶対パス指定
hasCJKLanguage = true # 記事の要約を正しく機能させるために必要
googleAnalytics = "your_baidu_analysis_code"
[params]
author = "shogo.yamada"
description = "モバイルアプリエンジニア"
bio = "shogo.yamada"
twitter = "yshogo87"
enableRSS = true
enableToc = true
enableDisqus = true
disqusShortname = "shogo.yamada"

enableSummary = true
# Set the value to true if use description in post front matter replace content summary
useDescriptionReplaceSummary = false

enableGoogleAnalytics = true
enableBaiduAnalytics = false
# Set the value to your baidu analysis code if you want to use baidu analytics
baiduAnalytics = 'your_baidu_analysis_code'
enableTwitterCard = true
# The url for twitter card image, default is avatar.png in static/images directory
twitterCardImage = ""
# Add custom assets with their paths relative to the static folder
customCSS = []
customJS = []
# The variables below are optionally too and can be used to
# translate or customize each string of the theme.
# Navigation links
home = ""
about = ""
archive = ""
subscribe = ""
olderPosts = ""
newerPosts = ""
copyright = ""
# show latest posts in single page
showLatestPosts = false
readMore = ""
# Share
enableShare = true
tweet = ""
share = ""
# 404 page
title404 = ""
subtitle404 = ""
# Choose a font for the social icons in the footer. Either "mono-social" or "font-awesome"
iconFont = "font-awesome"
# The social icons can be styled differently if you use mono as font - circle, rounded, or empty
socialIconStyle = ""

# Add additional social link entries underneath
[social]
twitter-square = "https://twitter.com/yshogo87"
github-square = "https://github.com/yshogo"

プレビューで確認する

下記のコード確認します

hugo server -t hugo-nuo -w

hoge-nuo は自分の選んだテーマ名を入力してください。

そしたらブラウザで http://localhost:1313/ にアクセスすると表示されます。

Firebase Hostingのセットアップ

それではFirebaseのセットアップを行います。

プロジェクト作成

https://console.firebase.google.com/u/0/?hl=ja

上のFirebaseコンソールから「プロジェクトを追加」を選択してプロジェクトを作成します。

Preview

プロジェクト名は任意、地域は日本を設定しましょう。

コンソールが出てきたら、左メニューの「Hosting」をクリック

Firebaseのツールをインストール

npm install -g firebase-tools
firebase login

このあと、ログイン情報が聞かれますので、先ほど作成してGoogleアカウントでログインしてください。

firebase init

What do you want to use as your public directory? (public)

上が聞かれたらそのままreturnしてください これでFirebaseのセットアップ完了です。

デプロイ

hugo -t `選択したテーマ名` && firebase deploy

deploy

これだけでは作成したページは表示されません。

Hosting URL: で表示されているURLをconfig.tomlの　baseURL= のあとに貼り付けて再度デプロイします。

hugo -t `選択したテーマ名` && firebase deploy

これで完成です。

complete

個人的にブログのデザインはWordPressより好きです。エンジニアの間で広まればいいな。

自作ドメインを設定した場合は下の記事を参考にするといいと思います。 (自分はこれでやりました)

.appドメインはFirebase hostingとの相性が抜群

少しハマったりもしましたが、、、

いろいろハマってもがいていた時のツイート

宣伝

ツイッターのフォローよろしくお願いします。

https://twitter.com/yshogo87