サイト開設

Aug 10, 2020 blog howto hugo homepage

Why?

詳細は伏すが，サーバーの保守を行っており，ホームページのリプレースをする必要が生じた． しかし，ホームページの作成や公開に関しては全くの素人なので，個人的にサイトを作り知見を深めようとした．

How?

昨今ではWordPressなるものが流行っているようだが，ここでは

という理由で静的サイトを作る．静的サイトジェネレータとしては，人気のある Hugoを使った．PukiWikiを使うことも考えたが，phpを走らせる必要があるため断念した．

What?

静的サイトとは，htmlファイルやcssファイルで構成されたサイトである．外部からのアクセスに対し これらのデータを直接渡すので軽量である．WordPress等はPHPやJavaScriptがサーバ上で走っており， サーバ側に負担がかかる．もっとも個人的なサイトで気にする程のことでもないと思うが．

Purpose

作業環境

ローカルPC

サーバ(さくらインターネット)

これいる？

中の人のスペック

最近はプログラミングよりシェル芸にお熱．

やったこと

Hugoのインストール

とても簡単

最近のChromeBookではcrostiniというLinuxの仮想環境がデフォルトで使える． 少し前まではChromeBookをデベロッパーモードにしてCroutonをインストールしたり，SDcardかemmcに リナックスを入れてデュアルブートをする必要があった．しかしながら，

という点でどちらも実用的ではなかった．そのためChromeBookで開発環境を構築することは茨の道であった．

その点crostiniは公式がサポートしており（ずっとベータ版であるが）安定性が高く，またリソースの消費も少ないという点で非常に優れている．Debianのリポジトリが使えるので当然Hugoもaptでインストールできる．

って思うじゃん？

しかしながらここで大きく躓いた．というのもDebianのリポジトリにあるHugoはバージョンが古いのである． BusterのリポジトリからインストールできるHugoばバージョン0.55.6であるのだが，これはかなり古いらしく 後述のビルドで問題が発生した．

どちらかというとDebianの問題だが．

しかし，ここからChromeBookであることが響いてくる．

sidリリースが使えない

Debianのリポジトリに存在するアプリは基本的にバージョンが古い．これはDebianでは安定性を重視し 各パッケージがしっかりとテストされているためで一概に問題とは言えない． よく有る解決方法としては，

の3つがある．backportsからインストール出来ればそれに越したことはないが，backportsには あまりパッケージがない．案の定Hugoもなかった．

次に（testing）,（sid）を使う場合だが，大抵の場合はお目当てのパッケージだけでなく依存パッケージも これらのリリースからインストールしなければならない．

大規模でシステムの根幹に関わるようなアプリならともかく，Hugoのインストールに大量の依存パッケージが要求されるとは思えないのでsidのリリースからインストールしようとしたが，2つばかり依存パッケージのバージョンが古いと怒られた．

さらには，変更が禁止されたパッケージであるため，これらを無理やり更新することもできなかった． よって別の方法でHugoを入れようと悪戦苦闘することになった．

Dockerが使えない

僕らの味方，Dockerでは当然の権利のようにHugoのイメージが公開されている． これが使えたら環境も汚さなくて済むので万々歳である．しかしながらこの方法も失敗した．

crostiniは厳密にはlxcという仮想環境でDebianコンテナを走らせている．そのため仮想環境特有の制約があり Dockerを起動することは出来なかった．

Snapも！

Dockerが使えない時点で察しろという話だが，性懲りもなくSnapという別の仮想環境ツールで Hugoを実行しようとし，案の定失敗した．

Snapとは，アプリの依存パッケージごとコンテナ化して配布するというDockerと似たようなツールとなっている． ここまで書けばおわかりだと思うがcrostiniは厳密には(ry

debパッケージがあるじゃん

Githubで普通にdebパッケージがありました． 良い子の皆もまずはGitHubを確認しよう！（当たり前）

サイトを作る

新しいサイトを作る

まずは新しいサイトを作る．

hugo new site hoge

で自動的にディレクトリが作られる．

hoge
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

ちなみにこんな感じでディレクトリの階層構造を表示するにはtreeコマンドを使うと吉．

tree hoge

で上の結果が表示される．皆も友だちに自慢しよう！

次にディレクトリ内で

git init

を実行する．別に筆者がgitの回し者という訳ではなく，この後のステップで必要になってくる． 次に，公式サイトから好きなテーマを選び，ダウンロードする． お気に入りのテーマが見つかったら，そのページ内に書かれているインストール手順に従う． 基本的には

git submodule add https://github.com/hogehoge/fugafuga.git themes/fugafuga

でテーマディレクトリ内にダウンロードする．git submoduleコマンドは，特定のリポジトリのコミットを プロジェクト内に追加する．そのため，gitで管理されているディレクトリ内でないと怒られてしまいます． だから、git initでgitのリポジトリを作る必要があったんですね。

config.tomlをいじる

ディレクトリの直下にconfig.tomlが有る．これがホームページの名前や構造を決めるファイルとなっている． しかし，一からこれを書き上げるのはしんどいのでthemeディレクトリの中にあるexampleSiteを参考にしよう．

baseURL = "https://hogehoge.ne.jp/"
languageCode = "ja"
hasCJKLanguage = "true"
title = "ホームページのタイトルです"
theme = "テーマのインストールページを参考にする"
enableRobotsTXT = true

一応これだけ書けばホームページの体裁は保てる．

記事を書く

次に，実際に記事を書いていく．

hugo new hoge/huga.md

コマンドで，contentディレクトリ内に

content/
└── hoge
      └── huga.md

の形でファイルが生成される．これを編集して記事を作ることになる． マークダウンの記法はここが詳しい．

ある程度形になったら

hugo server -D

でサーバを立てて確認しよう．localhost:1313にアクセスすると閲覧できる．

ビルドをする…その前に

上の手順である程度サイトが形になったら静的サイトをビルドしたくなってくるはずだ． ていうかならなきゃおかしい．なんのためにここまでやってきたんだ． というわけで早速静的サイトをビルドしよう．

hugo

でpublicディレクトリ内に静的コンテンツが生成される．後はこれをアップロードすれば…

そのページ、消えるよ

実際にnginxで表示するなりサーバに上げるなりすればわかるが， 今まで書いてきたページが本番環境では表示されないのである． これはmdファイルの設定で，デフォルトではビルドされないようになっているのである． mdファイルの一番上に

---
title: "新しいサイト"
date: 2020-08-10T03:39:35+09:00
---

と有ると思われるが，ここに

---
title: "新しいサイト"
date: 2020-08-10T03:39:35+09:00
draft: false
---

draft: falseを追加すれば無事にビルドされる．

今日はもう疲れたので続きは明日書くことにする．

お前ももうおやすみ・・・

comments powered by Disqus