shonen.hateblo.jp

やったこと,しらべたことを書く.

Hugoを導入してみた

Hugoとは?

gohugo.io

  • 静的なwebサイトを作ることができる
  • markdownで書ける
  • syntax highlightも豊富(もちろんjsなしの静的生成)

インストール

gohugo.io

書いてありますね.

多すぎて戸惑いますが,例えばubuntuならば,sudo apt-get install hugo です.

表示

https://gohugo.io/getting-started/quick-start/

を見ていきます.

作業ディレクトリ構築

hugo new site hello
cd hello

helloという名前でwebサイトを生成.

記事作成

hugo new posts/my-first-post.md

posts/my-first-post.md という記事を作る.

テスト(サーバを立てる)

hugo server

サーバが立ちます.が,何も表示されない…

テーマを何も設定していないから?

テーマの設定

git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

上のコマンドでanankeというテーマをロード

config.tomlに次の1行を追加.

theme = "ananke"
hugo server

もう一度サーバを立てた.するとブログっぽいものが表示された.

Draft設定

が,先ほど挿入したはずの記事が無い.

これは,-Dというオプションを付けると解決する.-D というのは,下書き指定された記事も含めるフラグ.

hugo server -D

content/posts/my-first-post.md を開く.

---
title: "My First Post"
date: 2019-03-30T17:01:48+09:00
draft: true
---

次のように書き換えてみた.*1

draftをfalseにしている点に注意.

---
title: "My First Post"
date: 2019-03-30T17:01:48+09:00
draft: false
---

My First Post.

C++ の HelloWorld のコードを
次に示す.

 ```cpp
#include <iostream>
int main(){
    std::cout << "Hello World" << std::endl;
    return 0;
}
 ```

- たまご
- まぐろ
- はまち

もう一度サーバを立てて確認.

hugo server

記事が表示されるはず.

今は出来ていないけれども,syntax-highlight も設定次第で出来る.

生成

hugo

と打つと,public 下にcssやhtml等の静的ファイルが出力されるので,これをサーバにアップロードすれば完了. もちろん,Hugoのサーバを使っても良い.

公式サイトにgithub.ioにデプロイする方法についての説明がある.

gohugo.io

感想

はてなブログ辞めようかなあ…重い…

*1:markdownにおけるソースコード中のエスケープが分からないので,C++ソースコード前後に半角スペースを挿入しています…