Hugo を使った 個人サイトの作り方 1 インストール編Hugo を利用できるよう、Windows 10 Home にインストールします。
ここで哀しいお知らせです。Hugo は基本的にコマンドライン（ドラマでハッカーがよく入力してる黒背景の窓）で操作します。
Gitからパッケージをダウンロードし、パスを通すという方法もありますが、バージョン管理なども面倒ですし、今回はコマンドラインベースで作業していこうと思います。
参考サイト：
https://balloon-jp.vercel.app/hugo/コマンドラインは 「Windows システムツール」＞「コマンドプロンプト」が標準ですが、簡易すぎるので「Windows Powershell」を使用することにします。
-
https://learn.microsoft.com/ja-jp/powers...Powershellはおそらく標準で入っていると思いますが、なければインストールします。
続けて、ソフト管理アプリ Chocolatey
https://chocolatey.org もしくは Scoop
https://scoop.sh をインストールします。私はScoop のほうが簡単だと思いました。
Scoopはいちいちインストールに管理者権限を必要としないのでラクです。
Powershell を開いて、以下の二行コマンドを入力します。Scoopの公式サイトに書いてあるのをコピペしてきました。
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
irm get.scoop.sh | iex
実行権限を付加して、Scoopインストールを行っています。
あとは自動的に進みます。
Scoop was Installed Successfully! とコマンドプロンプトが喜んだら無事に終了です。
さて、肝心の Hugo をインストールします。二種類ありますが基本的には Hugo Extended を選びます。
CSS拡張のSASS・SCSSが利用可能で、一部のテーマでは必須の場合があるらしいです。
コマンドラインに以下のコマンドを打ちます。
scoop install hugo-extended
'hugo-extended' (0.109.0) was installed successfully!'
コマンドプロンプトが喜び、これでHugo 本体のインストールは終了しました。
続けて、コマンドラインで cd [任意の作業用フォルダの場所] と入力し、任意の作業用フォルダに移動します。そして以下を実行します。
hugo new site [サイト名]
コマンドプロンプトがまたもや喜びます。
「Congratulations! Your new Hugo site is created in C:\newsite\sitename.」
ディレクトリやファイルなど、基本的なサイトの雛形が作成されました！
構成は以下のようになっています。
C:\NEWSITE\SITENAME
│ config.toml ※サイト全体の設定ファイル。TOML形式だが、YAML、JSONでも可能。
├─archetypes ※マークダウンファイル新規作成用テンプレートが入っている。
│ default.md
├─assets ※SCSSファイル等をコンパイルするときはここに入れる。
├─content ※ここにコンテンツ本体となるmarkdownファイルを入れる。content/post/以下を指定するテーマもある。
├─data ※サイト全体から参照できるデータファイルを入れる。簡易データベースと考えよう。
├─layouts ※テーマを改造した場合、themesフォルダ内部を直接編集せず、ここにコピーして改定を行う。
├─public ※公開用ファイルがHugoによって作られるフォルダ。この中身をサーバーにアップロードすることでサイトが公開される。
├─static ※画像、CSS、Javascript、ほかプログラムなどを入れていく。Hugoによって./public/以下にコピーされる。
└─themes ※外観や構成などを制御するテーマファイルを入れる。
-
https://blog.chick-p.work/blog/hugo-site... HUGO のディレクトリ構成 | ひよこまめ
ようやく具体的な作業に入っていきます。
Hugoでサイトを表示するテーマ利用のため、Git アカウントも作っておくといいかと思います。Gitについては以下のサイトで賄えると思うので省略します。
- サル先生のGit入門
https://backlog.com/ja/git-tutorial/#サイト作成 #Hugo
Hugo を利用できるよう、Windows 10 Home にインストールします。
ここで哀しいお知らせです。Hugo は基本的にコマンドライン（ドラマでハッカーがよく入力してる黒背景の窓）で操作します。
Gitからパッケージをダウンロードし、パスを通すという方法もありますが、バージョン管理なども面倒ですし、今回はコマンドラインベースで作業していこうと思います。
参考サイト：https://balloon-jp.vercel.app/hugo/
コマンドラインは 「Windows システムツール」＞「コマンドプロンプト」が標準ですが、簡易すぎるので「Windows Powershell」を使用することにします。
- https://learn.microsoft.com/ja-jp/powers...
Powershellはおそらく標準で入っていると思いますが、なければインストールします。
続けて、ソフト管理アプリ Chocolatey https://chocolatey.org もしくは Scoop https://scoop.sh をインストールします。私はScoop のほうが簡単だと思いました。
Scoopはいちいちインストールに管理者権限を必要としないのでラクです。
Powershell を開いて、以下の二行コマンドを入力します。Scoopの公式サイトに書いてあるのをコピペしてきました。
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
irm get.scoop.sh | iex
実行権限を付加して、Scoopインストールを行っています。
あとは自動的に進みます。
Scoop was Installed Successfully! とコマンドプロンプトが喜んだら無事に終了です。
さて、肝心の Hugo をインストールします。二種類ありますが基本的には Hugo Extended を選びます。
CSS拡張のSASS・SCSSが利用可能で、一部のテーマでは必須の場合があるらしいです。
コマンドラインに以下のコマンドを打ちます。
scoop install hugo-extended
'hugo-extended' (0.109.0) was installed successfully!'
コマンドプロンプトが喜び、これでHugo 本体のインストールは終了しました。
続けて、コマンドラインで cd [任意の作業用フォルダの場所] と入力し、任意の作業用フォルダに移動します。そして以下を実行します。
hugo new site [サイト名]
コマンドプロンプトがまたもや喜びます。
「Congratulations! Your new Hugo site is created in C:\newsite\sitename.」
ディレクトリやファイルなど、基本的なサイトの雛形が作成されました！
構成は以下のようになっています。
C:\NEWSITE\SITENAME
│ config.toml ※サイト全体の設定ファイル。TOML形式だが、YAML、JSONでも可能。
├─archetypes ※マークダウンファイル新規作成用テンプレートが入っている。
│ default.md
├─assets ※SCSSファイル等をコンパイルするときはここに入れる。
├─content ※ここにコンテンツ本体となるmarkdownファイルを入れる。content/post/以下を指定するテーマもある。
├─data ※サイト全体から参照できるデータファイルを入れる。簡易データベースと考えよう。
├─layouts ※テーマを改造した場合、themesフォルダ内部を直接編集せず、ここにコピーして改定を行う。
├─public ※公開用ファイルがHugoによって作られるフォルダ。この中身をサーバーにアップロードすることでサイトが公開される。
├─static ※画像、CSS、Javascript、ほかプログラムなどを入れていく。Hugoによって./public/以下にコピーされる。
└─themes ※外観や構成などを制御するテーマファイルを入れる。
- https://blog.chick-p.work/blog/hugo-site... HUGO のディレクトリ構成 | ひよこまめ
ようやく具体的な作業に入っていきます。
Hugoでサイトを表示するテーマ利用のため、Git アカウントも作っておくといいかと思います。Gitについては以下のサイトで賄えると思うので省略します。
- サル先生のGit入門 https://backlog.com/ja/git-tutorial/
#サイト作成 #Hugo