Table of Contents

導入の際のメモも兼ねてスクリプトに慣れる練習にと作成しました。

1.目的

windowsでhugoを利用できる環境を作成し、サイトの基本構造を作り記事を作成する。

farebaseにデプロイしホームページを公開する。
黒い画面はなるべく使わないように

2.概要

  • 静的サイトジェネレーター
    作成した記事にテンプレートを適応しhtmlを出力してくれる。ブログなどの静的サイトでは面倒くさいことも気軽にできる。
    軽量でデータベースも不要なのでサーバー代が安い(広告なしで無料)。 知識があればホームページを自由に制作できる。

  • hugo
    https://gohugo.io/
    go言語で作られた静的ホームページジェネレーター。 markdwonで書いた記事にテンプレートが適応されるので簡単に制作可能。 自分で制作改変するには少し知識が必要になるが公式が必要なことを網羅してくれているので大丈夫なはず。
    出力が高速でストレスフリー。ただテーマが少ないかも。

  • firebasae
    https://firebase.google.com/
    グーグルが提供するプラットフォームで今回はホスティングサービスを利用する。 制限があるものの小規模な静的ホームページは完全無料で利用できる。
    利用規約は確認すること。

3.手順

3.1.hugoを利用するための環境作り

https://github.com/gohugoio/hugo/releases
上記からWindows-64bit.zipをダウンロード。
C:\Hugo\binという階層のフォルダを作成しhugo.exeを解凍(どこでもいいが管理が楽なので)

コントロールパネル>システムとセキュリティ>システム>システムの詳細設定>環境変数
と進みpathを開き、新規からC:\Hugo\binを追加する。

環境変数にhugoを追加

コマンドプロンプトを開きhugo versionと入力して導入できているか確認する。

3.2.テンプレートを導入し、基本構造を作る。

コマンドプロンプトからcdで作業するディレクトリに移り、
hugo new site サイト名と入力。

(例)  
C:\Hugo\site>hugo yukioke

ディレクトリにファイルが生成されます。

https://themes.gohugo.io/
から好きなテーマをダウンロード。解凍しthemesに入れます。
C:Hugo\yukioke\themes\hugo-tranquilpeak-theme
みたいな感じ。
exampleSiteというフォルダの中身を生成したディレクトリに上書きする。

コマンドプロンプトでサイトのディレクトリで hugo server --watch
と入力しブラウザで http://localhost:1313/ を開くと見事にサイトが完成しているはず。変更はリアルタイムで反映される。

config.tomlを編集することでサイトの名前や説明、SNSアカウントを変更できる。

3.3.記事を制作する

基本的に生成されたフォルダcontent/postに記事のファイルを作っていく。
コマンドプロンプトから
hugo new post/タイトル.md
と入力するとファイルが生成される。

(例)
C:\Hugo\yukioke>hugo new /hello.md

中身はこんなはず

---
title: "hello"
date: 2018-04-05T05:20:56+09:00
draft: true
---

この---の下に記事をmarkdown記法で書く。htmlとの共存も可能。
適当に記事を書いたらまたプレビューして確認してみる。

ホームページが完成したらコマンドプロンプトで
hugo
と入力するとC:\Hugo\yukioke\publicにhtmlなどが出力されるのでそれをホスティングサービスにデプロイする

3.4.farebaseを導入しデプロイする

node.jsが必要なのでインストールしておく https://nodejs.org/ja/download/

firebaseにアクセス
https://console.firebase.google.com
グーグルアカウントが必要。 プロジェクトを新規作成する。
コンソールをインストール。コマンドプロンプトから
npm install -g firebase-tools
と入力するとインストールされる。ブラウザが開かれるので先程のアカウントで認証する。

次に作ったサイトのディレクトリで
firebase init
を実行。途中で止まるので以下の様に入力していく。

 ◯ Hosting: Configure and deploy Firebase Hosting sites <-これを選択(カーソルキーで移動してSpaceキーで選択。Enterで決定)
? What do you want to use as your public directory? public <- 変更しない
? Configure as a single-page app (rewrite all urls to /index.html)? y <- 「y」と入力
? File public/index.html already exists. Overwrite? y <- ビルド後の場合「n」と入力

これで準備は完了。後は
firebase deploy と入力するとpublic内のファイルがデプロイされる。

4.感想

意外と簡単。黒い画面もあまり使わずに作ることができました。
このホームページもhugoを使って作ってます。