趣味で始めたアプリ作りですが、数が増えてきたので今までアプリの連絡先やらなんやらを無料ブログで済ませていたのを一本化すべく勉強も兼ねて自前で作ってみました。ホームページ自体、あんまり作ったことがなかったのでどうやってやるのかすらわからず、お金はかけたくないなーと思いながら漠然と調べていました。けれども実際調べてみると素晴らしい情報を公開してる方々のページがたくさんあったため、それを参考にさせてもらい、なんとか作ることができました。今回はその流れを忘れないようにメモしようと思います。
ページを編集したりするのにローカルサーバーを作ってその中で作業するみたいなんだけどHugoは他にそういう機能を提供してるDockerとかなくてもできるから便利みたいです。ターミナルでの操作が結構あったので使ったコマンドをメモる
使ったもの
macOS
firebaseHostingServer
hugo
//homebrewとnpmがないとhugoとかのパッケージをパソコンに組み込むのが大変みたいです
homebrew
npm
運営のページ
//原則ここに全部書いてあるのでここを読む
firebase https://firebase.google.com
homebrew https://brew.sh/index_ja
hugo https://gohugo.io/getting-started/quick-start/
npm https://www.npmjs.com/
参考にさせてもらったところ
https://dev.classmethod.jp/articles/hugo-super-fast-static-webpage/
よくターミナルで使ったコマンド
Hugo
//基本的にターミナルでは操作をするのにcdで操作する階層まで行かないといけない
cd ..
cd "ファイルの名前"
//指定した階層に必要な基本的なファイルを作る
git init
//“https://github.com/budparr/gohugo-theme-ananke.git"からテーマをダウンロードしてきてthemesの中にanankeフォルダを作ってそこに入れる処理をしてくれる。ドラッグアンドドロップで手動でやることもできる。
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
//config.tomlファイルの中に使うテーマは"ananke” ですとコードから書いてくれる。手動でも訂正できる
echo 'theme = "ananke"' >> config.toml
hugo server
hugo new site "作るサイトの名前"
hugo new post/"記事の名前".md
//静的サイトとやらをpublicフォルダの中に作ってくれる。この中身を全部firebaseのホスティングサーバーのフォルダにコピペする。
hugo
Firebase
//ターミナルで指定した階層のファイルをサーバーにアップロードする
firebase deploy
詰まったところ
サンプルページが表示できない
テーマをダウンロードして組み込んだら勝手にやってくれるのかなとふわっと思ってたらthemaフォルダの中にあるexampleSiteの中身を自分が作った一番上の階層の同じ名前のフォルダにコピペしないとだめでした。テーマによって違うっぽい。自分はbeautifulhugo-masterを使いました。
とりあえずそれっぽいホームページが比較的簡単にできました(^o^)