さよならQiita、こんにちはhugo × github pages
対象
- Qiitaから脱したい
- Qiitaにはエモ記事が書けないので、そういった記事を独自のブログの方に書きたい
hugoとは
https://gohugo.io/
Hugo is one of the most popular open-source static site generators.
With its amazing speed and flexibility, Hugo makes building websites fun again.
Hugoは人気のあるオープンソースの静的サイトジェネレータの1つである。 半端ないスピードと柔軟性で、Hugoは再びウェブサイトの構築を楽しくするぜ。
と公式HPには書いてあります。
インストール
プラットフォームによってインストール方法が異なります。 Mac
$ brew install hugo
Win choco
$ choco install hugo -confirm
Win scoop
$ scoop install hugo
Linux snap
$ snap install hugo
などなど、、、。さまざまなPFに対応しています。 https://gohugo.io/getting-started/installing
さっそくブログを作ってみる
雛形作成
雛形を作成するために以下のコマンドを実行します。
$ hugo new site site-demo && cd site-demo
なにやら生成されたようです
$ tree
.
├── archetypes
│ └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
6 directories, 2 files
できました。現時点だと空のディレクトリが掘られているだけのようです。
テーマの選定
なんと、サイトの雛形は完成しました。これからどんなデザインのページにするかを決定していきます。https://themes.gohugo.io/ に主要なテーマが列挙されています。今回は hugo-classicでdemoを進めたいと思います。
先ほど作成したthemesというディレクトリにテーマをgit submoduleの形として入れるとGOODです。
$ git init && git submodule add https://github.com/goodroot/hugo-classic.git themes/hugo-classic;
themesにはhugo-classic以外にも使いたいテーマをどんどん追加していっても良いでしょう。ただ、そのままだとどのテーマを使って良いかわからいので、config.tomlにhugo-classicを使いますということを宣言しておきましょう。
baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "hugo-classic" #######################ここが追加した行
テーマの選定はなんと、以上です。
これで記事はまだないですが画面になにかしら表示されるようにはなります。早速画面を表示して見ます。
hugo server
localhost:1313にアクセス！！
何か表示されました。まぁ、記事も書いてませんし、テーマのカスタムも行なっておりませんので、及第点とさせてください。
記事をついに書く
雛形作成 -> テーマ選定まで終わりました。ので、あとは記事を書くだけです。markdownで記事を書いていきます。
$ hugo new post/starting-demo.md
content/post直下にコマンドで指定したファイルが生成されました。
$ tree
.
├── archetypes
│ └── default.md
├── config.toml
├── content
│ └── post
│ └── starting-demo.md ######################################ここ
├── data
├── layouts
├── resources
│ └── _gen
│ ├── assets
│ └── images
├── static
└── themes
└── hugo-classic
├── LICENSE.md
├── README.md
├── archetypes
│ └── default.md
├── exampleSite
│ ├── config.toml
│ ├── content
│ │ ├── _index.md
│ │ └── post
│ │ ├── 2012-01-23-juicy-code.md
│ │ ├── 2012-04-23-hacker-with-horn.md
│ │ ├── 2015-07-23-command-line-awesomeness.md
│ │ └── 2018-08-30-markdown-guide.md
│ └── static
│ └── css
│ └── theme-override.css
├── images
│ ├── partywizard.gif
│ ├── screenshot.png
│ └── tn.png
├── layouts
│ ├── 404.html
│ ├── _default
│ │ ├── list.html
│ │ ├── single.html
│ │ └── terms.html
│ └── partials
│ ├── foot_custom.html
│ ├── footer.html
│ ├── head_custom.html
│ └── header.html
├── static
│ └── css
│ ├── fonts.css
│ └── style.css
└── theme.toml
24 directories, 27 files
初期状態は以下のような状態です。下書き状態のようです。
---
title: "Starting Demo"
date: 生成した日時
draft: true
---
適当に内容を書いた後、draft: falseにして
$ hugo
で、記事の内容を反映させます。
$ tree
.
├── archetypes
│ └── default.md
├── config.toml
├── content
│ └── post
│ └── starting-demo.md
├── data
├── layouts
├── public
│ ├── 404.html
│ ├── categories
│ │ ├── index.html
│ │ └── index.xml
│ ├── css
│ │ ├── fonts.css
│ │ └── style.css
│ ├── index.html
│ ├── index.xml
│ ├── sitemap.xml
│ └── tags
│ ├── index.html
│ └── index.xml
├── resources
│ └── _gen
│ ├── assets
│ └── images
├── static
└── themes
└── hugo-classic
├── LICENSE.md
├── README.md
├── archetypes
│ └── default.md
├── exampleSite
│ ├── config.toml
│ ├── content
│ │ ├── _index.md
│ │ └── post
│ │ ├── 2012-01-23-juicy-code.md
│ │ ├── 2012-04-23-hacker-with-horn.md
│ │ ├── 2015-07-23-command-line-awesomeness.md
│ │ └── 2018-08-30-markdown-guide.md
│ └── static
│ └── css
│ └── theme-override.css
├── images
│ ├── partywizard.gif
│ ├── screenshot.png
│ └── tn.png
├── layouts
│ ├── 404.html
│ ├── _default
│ │ ├── list.html
│ │ ├── single.html
│ │ └── terms.html
│ └── partials
│ ├── foot_custom.html
│ ├── footer.html
│ ├── head_custom.html
│ └── header.html
├── static
│ └── css
│ ├── fonts.css
│ └── style.css
└── theme.toml
28 directories, 37 files
新たにpublicディレクトリが生成され、その中にいろいろとファイルができました。
トップページにも記事が出てきました。このリンクをクリックすると記事のページに遷移することができます。
github pagesで公開
いままでのプロセスで記事を簡単に書くことができます。あとはアクセスできるようにするだけです。VPSを借りて己でWEBサーバーを立てるのもひとつの手段ではあると思いますが、今回はもっと簡単なgithub pagesを利用して秒速で構築したいと思います。
公開ディレクトリを指定
今回はmasterブランチのdocsディレクトリ直下を公開ディレクトリとして指定します。その宣言をconfig.tomlに書きます。
baseURL = "https://katamotokosuke.github.io/site-demo/" ####### 追加: {user_name}.github.io/{repository_name}/ を指定する
languageCode = "en-us"
title = "My New Hugo Site"
theme = "hugo-classic"
publishDir = "docs" ######################### 追加
canonifyurls = true ######################## 追加(相対URLを絶対URLに変換できるようにします。)
記述を変更した後hugoコマンドを実行します。
$ tree
.
├── archetypes
│ └── default.md
├── config.toml
├── content
│ └── post
│ └── starting-demo.md
├── data
├── docs
│ ├── 404.html
│ ├── categories
│ │ ├── index.html
│ │ └── index.xml
│ ├── css
│ │ ├── fonts.css
│ │ └── style.css
│ ├── index.html
│ ├── index.xml
│ ├── post
│ │ ├── index.html
│ │ ├── index.xml
│ │ └── starting-demo
│ │ └── index.html
│ ├── sitemap.xml
│ └── tags
│ ├── index.html
│ └── index.xml
├── layouts
├── public
│ ├── 404.html
│ ├── categories
│ │ ├── index.html
│ │ └── index.xml
│ ├── css
│ │ ├── fonts.css
│ │ └── style.css
│ ├── index.html
│ ├── index.xml
│ ├── post
│ │ ├── index.html
│ │ ├── index.xml
│ │ └── starting-demo
│ │ └── index.html
│ ├── sitemap.xml
│ └── tags
│ ├── index.html
│ └── index.xml
├── resources
│ └── _gen
│ ├── assets
│ └── images
├── static
└── themes
└── hugo-classic
├── LICENSE.md
├── README.md
├── archetypes
│ └── default.md
├── exampleSite
│ ├── config.toml
│ ├── content
│ │ ├── _index.md
│ │ └── post
│ │ ├── 2012-01-23-juicy-code.md
│ │ ├── 2012-04-23-hacker-with-horn.md
│ │ ├── 2015-07-23-command-line-awesomeness.md
│ │ └── 2018-08-30-markdown-guide.md
│ └── static
│ └── css
│ └── theme-override.css
├── images
│ ├── partywizard.gif
│ ├── screenshot.png
│ └── tn.png
├── layouts
│ ├── 404.html
│ ├── _default
│ │ ├── list.html
│ │ ├── single.html
│ │ └── terms.html
│ └── partials
│ ├── foot_custom.html
│ ├── footer.html
│ ├── head_custom.html
│ └── header.html
├── static
│ └── css
│ ├── fonts.css
│ └── style.css
└── theme.toml
36 directories, 53 files
docsディレクトリが生成されました。宣言をしなければpublicディレクトリが生成されます。なので、すでに作られているpublicディレクトリはこれから不要となりますので、削除しても良いと思います。
github側の設定
- 以上の成果物をgithub上にpushします。
- リポジトリの
Setting(https://github.com/#{user_name}/#{repositoryn_name}/settings )のGitHub Pagesという設定の項目を見つける。(おそらく設定を指定なければNoneという値が選択されていると思います。) master branch docs/ folderを選択- save
少し時間をおくと https://katamotokosuke.github.io/site-demo/ にアクセスできるようになりました。
まとめ
hugoとgithub pagesを用いて簡単にQiitaを脱することができました。これでエモ記事が書けるようになりました。 この記事では扱いませんでしたが、テーマをカスタマイズすることも可能です。そうすることでよりオリジナリティのあるWebページが構築できます。
参考
今回のデモで作成したgithubのソース: https://github.com/katamotokosuke/site-demo デモで作成したWebページ: https://katamotokosuke.github.io/site-demo/ Hugo: https://gohugo.io/