はじめに
こんにちは
記念すべき１つ目の記事です。
Aboutにも書いてあるとおり、このブログはAdvent Calenderのネタで使うためだけに作ったものですが、いい感じにできたら普通に使っていこうかなと思っています。
Advent Calenderというものを最近知ったばかりなのですが、
何かお題を決めて、それを外部からも見れるようにブログなどに記事を書いて自分の登録した日にちに投稿するというものらしく、なにかおもしろいものが書ければとゆっくり考えていたらいつの間にか自分の番がきていました。
特に面白いことも思い浮かばなかったので、hugoを使ってブログサイトを作ることにしました。
hugoとは
このサイトを見れば分かるのですが、
hugoとは、GO言語で作られた静的ページジェネレータです。
サーバサイドの処理を含まないので、サイトの表示速度が高速で、セキュリティリスクが少ないらしいです。
hugoのインストール
まず初めにhugoをインストールします。自分はArchLinuxを使っているので、
$ sudo pacman -S hugo
でインストールしました。
サイト作成までの手順
サイトの作成
$ hugo new site hoge
これで、hogeというサイト(ディレクトリ)が作られたと思います。
中に色々入っていますが、何がどういうものなのかは各自調べてください…
hugoのテーマをインストールする
このページからテーマをダウンロードすることができます。
すべてのhugoテーマを一度にDownloadすることも可能ですが、時間もかかるし全部はいらないので個別でDownloadします。
気になるテーマがあったら、それをクリックしてDownloadをクリックしてください。
Demoをクリックするとサンプルページを見ることができます。
Downloadを押したらGithubのページに移動するので、themesディレクトリにクローンしてきます。
$ cd themes
$ git clone URL
終わったら、そのテーマを反映させます。
使うテーマはすでに決まっているので、config.tomlの中に
theme = "hoge"
と記入します。
記事を作成する
2番目の手順の最後に出てきたconfig.tomlファイルとはなんなのかというと、サイトの設定ファイルです。
baseurl = "http://xxx.com/"
languageCode = "en-us"
title = "My New Hugo Site"
最初は上記のようになっていると思います。 それぞれ
| コード | 意味 |
|---|---|
| baseurl | このサイトのURL |
| languageCode | このサイトの言語 |
| title | このサイトのタイトル |
ということなので、任意のものに変えます。
languageCodeは日本語にする場合はjaです。
次に、コンテンツを追加します。
$ hugo new hoge/hoge.md
と入力します。これをやると、contentファイルの中にhogeというディレクトリが作られて、その中にhoge.mdファイルが作られます。
hugoコマンドはconfig.tomlが存在する場所で使用します。
作ったフォルダを開くと、
---
title: "hoge"
date: 日時
draft: true
---
の３つが書いてあると思います。
titleを任意のものに変えます。
draftのtrueというのは、下書き状態という意味で、このままビルドしてもサイトに表示されません。公開するためにはfalseに書き換えます。
本文は---の下から書き始めます
$ hugo server
記事を書いて保存した後、上記のコマンドでローカルサーバーを立ち上げて、http://localhost:1313/にアクセスするとプレビューを見ることができます。-Dというオプションを付けるとビルドもしてくれます。
ちなみに、config.tomlのthemeにテーマを指定していないときは-tオプションでテーマを指定します。
公開ファイル、Githubにpush
実際に公開する場合、pubulicディレクトリ内にできたファイル一式をサーバーにアップすることで公開することができます。hugo serverで生成されるURLはhttp://localhost:1313/なので公開前に以下コマンドで生成し直します。
$ hugo
これでconfig.tomlで指定したURLになり、pubulicディレクトリが生成されます。
自分はURLをhttps://[ユーザ名].github.ioにしたかったので、リポジトリを作ってGithubにpushしました。
なので流れとしては
1. Githubでリポジトリを作る
2. URLをhttps://[ユーザー名].github.ioにする
3. コマンドをうつ
$ hugo
$ cd pubulic
$ git init
$ git remote add origin [URL]
$ git add --all
$ git commit -m "commit name"
$ git push origin master
という流れになりました。
まとめ
こんな感じで説明を書いたんですが、多分色々おかしいところがあると思います。すいません
自分はcloneしてきたテーマのファイルをコピーして、サンプルと同じものを生成してから自分用に書き換えていくってやり方をしました。（上手くいかなかったので…）
テーマは自作できるらしいので、機会があったら元々あるテーマを使うんじゃなくて自分で作ってみたいです。