Hugo | エンジニアのひきだし

Academicテーマ（Hugo）のカスタマイズ

Wed, 22 Apr 2020 22:00:10 +0900

Academicのカスタマイズでやったことを備忘録。

Authorの編集

content/authors/admin/ を content/authors/{ユーザー名}/ に変更して

_index.md を編集する。
avatar.jpg にアイコン画像を設定

# 表示名
< name: Nelson Bighetti
---
> name: nattokinxxxx
# フォルダ名と同じ
authors:
< - admin
---
> - nattokinxxxx
# 個人ブログなので不要
< role: Professor of Artificial Intelligence
<
< organizations:
< - name: Stanford University
< url: ""
<
# 簡単な自己紹介
< bio: My research interests include distributed robotics, mobile computing and programmable matter.
---
> bio: Gopherくんかわいい
# 興味
interests:
< - Artificial Intelligence
< - Computational Linguistics
< - Information Retrieval
---
> - Golang
> - K8s
> - Vue.js
> - etc...
# 学歴は削除
< education:
< courses:
< - course: PhD in Artificial Intelligence
< institution: Stanford University
< year: 2012
< - course: MEng in Artificial Intelligence
< institution: Massachusetts Institute of Technology
< year: 2009
< - course: BSc in Artificial Intelligence
< institution: Massachusetts Institute of Technology
< year: 2008
# SNSやGitHub
social:
< link: https://twitter.com/GeorgeCushen
---
> link: https://twitter.com/nattokinxxxx
< link: https://github.com/gcushen
---
> link: https://github.com/nattokin
# Gravatarは使わないので削除
< email: ""
# People widgetは使わないので削除
< user_groups:
< - Researchers
< - Visitors
# 自己紹介（使わないので書いてない /authors/{ユーザー名}/ に表示される）
< Nelson Bighetti is a professor of artificial intelligence at the Stanford AI Lab. His research interests include distributed robotics, mobile computing and programmable matter. He leads the Robotic Neurobiology group, which develops self-reconfiguring robots, systems of self-organizing robots, and mobile sensor networks.
<
< Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
<

トップページの編集

content/home/ 配下の使わない項目は削除
- active に true をセットすると有効になる
- weight に入れた数値によって並び順が変わる
トップメニューは config/_default/menus.toml を編集
- weight に入れた数値によって並び順が変わる
- 不要な項目は削除する
content/home/posts.md の編集
- content.filters.author は個人ブログで不要なので削除
- design.view で表示タイプが変更できる（1: リスト 2: コンパクト 3: カード）

CSSのカスタマイズ

assets に scss フォルダを作成して custom.scss を作成。拡張子は css ではなく scss なので注意。

Scssは煩雑になりがちなCSSを効率的に記述・管理できるメタ言語です。

例

// assets/scss/custom.scss
// プロフィール画像のサイズ調整
.avatar {
width: 150px;
height: 150px;
}
// 記事トップのスペースを開ける
h1 {
margin-top: 2rem;
}
// サブタイトルとメタデータの間の隙間をなくす
p.page-subtitle {
margin-bottom: 0;
}
// メタデータを右寄せして本文との間にスペースを開ける
div.article-metadata {
margin-bottom: 5rem;
text-align: right;
}
// ヘッダー前後の余白が詰まっていたので広げる
h2,
h3,
h4,
h5,
h6 {
margin-top: 2rem;
margin-bottom: 2rem;
}
// 記事内の画像の前後の余白を広げる
.article-style img,
.article-style video {
margin-top: 3rem;
margin-bottom: 3rem;
}

ハイライトスタイルの変更

ここで色合いを確認して

ここで名前を探す（cssのタブ）

# tomorrow-night-bright.css を利用
< # highlight_style = "github" # For supported styles, see https://cdnjs.com/libraries/highlight.js/
> highlight_style = "tomorrow-night-bright" # For supported styles, see https://cdnjs.com/libraries/highlight.js/

Hugo(Academic) + Netlifyで無料のブログ構築

Wed, 01 Apr 2020 22:00:10 +0900

HugoとNetlifyでブログ構築したので備忘録。

なぜHugoとNetlifyなのか？

無料でできる（大事）
ブログの執筆は書き慣れたMarkdownで気軽に行いたい
いい感じのテンプレートがあった（Academic）
NetlifyはCIがついていてデフォルトでHugoに対応している
GitHubのプライベートリポジトリでも無料で使える

静的サイトジェネレータには他にもGatsbyとかHexoとかJekyllとかありますが、Go製だったのでHugoにしました。 HugoはGoの html/template と text/template をベースに作られてるらしいのでカスタムしやすそうだと思ったのも理由の一つです。

Hugoのインストール

まずは前準備

$ brew install hugo

テンプレートのインストール

こちらを参考に。

$ git clone https://github.com/sourcethemes/academic-kickstart.git My_Website
# サブモジュールの更新
$ cd My_Website
$ git submodule update --init --recursive

ローカルで確認してみる

$ hugo server
| EN
-------------------+-----
Pages | 36
Paginator pages | 0
Non-page files | 1
Static files | 5
Processed images | 11
Aliases | 5
Sitemaps | 1
Cleaned | 0
Built in 468 ms
Watching for changes in /Users/jun/project/My_Website/{assets,content,data,static,themes}
Watching for config changes in /Users/jun/project/My_Website/config.toml, /Users/jun/project/My_Website/config/_default
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at //localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

http://localhost:1313 で確認

GitHubにpush

リポジトリはプライベートでもパブリックでもいいです。

$ rm -rf .git
$ git init
# hubコマンドを利用する場合（パブリックの場合は -p なし）
$ hub create -p
$ git remote -v
origin git@github.com:xxx/My_Website.git (fetch)
origin git@github.com:xxx/My_Website.git (push)
# 手動でリポジトリを作成する場合
$ git remote add origin git@github.com:nattokin/My_Website.git
$ git remote -v
origin git@github.com:xxx/My_Website.git (fetch)
origin git@github.com:xxx/My_Website.git (push)
$ git add .
$ git commit -m "first commit"
$ git push origin master

Netlify登録&デプロイ

リポジトリの選択

New Site from Git から対象のGitHub>リポジトリを選択します。

デプロイ

デフォルトのままでok。設定ファイル netlify.toml の内容が優先されるので無視されます。

Branch to deploy : master
Build command : hugo
Publish directory : public

Deploy site を押す。

デプロイ完了。リンク先で確認。

Academicの設定

基本設定の変更はこんな感じ

# config/_default/config.toml
# 最下部のコピーライトに表示されるやつ
- copyright = ""
+ copyright = "&copy; 2020 nattokinxxxx All Rights Reserved."
# 言語設定
- defaultContentLanguage = "en"
- hasCJKLanguage = false # Set `true` for Chinese/Japanese/Korean languages.
+ defaultContentLanguage = "ja"
+ hasCJKLanguage = true # Set `true` for Chinese/Japanese/Korean languages.
# 記事のフィルタなどに使用するようだが自分しか投稿しないので不要
[taxonomies]
tag = "tags"
category = "categories"
publication_type = "publication_types"
- author = "authors"

# config/_default/languages.toml
- [en]
- languageCode = "en-us"
+　[ja]
+ languageCode = "ja"

# config/_default/params.toml
# サイトの文字サイズ
- font_size = "L"
+ font_size = "M"
# ヘッダーのdescription
- description = ""
+ description = "エンジニアのブログ"

まとめ

Netlifyへのデプロイ周りはすごく簡単
テンプレートのカスタマイズについてはこちら