Ref
@yutakikuchi_です。
Goal
MacへHugoをinstall
$ sw_vers
ProductName: Mac OS X
ProductVersion: 10.14.4
BuildVersion: 18E226
$ brew install hugo
$ hugo version
hugo version
Hugo Static Site Generator v0.55.4/extended darwin/amd64 BuildDate: unknown
- Hatena Blogのpostをexportしたい
- Hatena BlogのExport機能はMovable Type型でしかできない。よってHugo形式のMarkdownに合わせる必要がある
- 以下にsampleコードがあるので、Movable Type形式から変換するように改修する
- 改修したファイルは次の名前で定義。hatena_2_hugo.rb
$ rbenv exec bundle exec ruby hatena_2_hugo.rb hatena_export.txt md_output
- md_outputのディレクトリに各post毎に
YYYYmmddHHMM.md として出力される
$ head -n 10 md_output/_posts/201904292103.md
---
title: "Docker for Macのメモリ制限の調整"
date: 2019-04-29T21:03:52+00:00
category : [etc]
canonicalurl: http://yut.hatenablog.com/entry/2019/04/29/210352
---
## [etc] : Docker for Macのメモリ制限の調整
- 元のHatena Blogの検索インデックスに悪影響を及ぼさないようにMovable Typeで出力されたBASENAMEからcanonicalurlを設定している
- canonicalurlのパラメータをHugoのtemplateからparameterとして読み込むことができる
Gitの設定、Hugoのファイル構成設定
- Github Pagesでprojectの静的ページを公開する方法は3つ紹介されている
- 公開用の静的ページをmasterのdocsディレクトリ配下に置く
- 公開用の静的ページをgh-branchの直下に置く
- 公開用静的ページをmasterの直下に置く
- 今回は1.の方法で実施。
- Hugoのtemplateを作成する。ディレクトリの名前は
blog
- github上に適当な名前のrepositoryを作成する
- 今回はディレクトリ名に合わせて
blog という名前で作成
- Postのソースを管理するbranchを
gh-pages として作成
- Hugoのthemeである
blackburn を利用する
$ hugo new blog
$ git init blog
$ cd blog
$ git add --all
$ git commit -m "first commit"
$ git remote add origin git@github.com:yutakikuchi/blog.git
$ git push -u origin master
$ git checkout -b gh-pages
$ cd themes
$ git clone https://github.com/yoshiharuyamashita/blackburn.git
$ cd ../
$ mkdir -p content/post
- hugoディレクトリの下にできる
config.toml と content に対して手を加えていく。blackburnのthemeのconfig.tomlを以下のように設定
$ cat config.toml | pbcopy
baseurl = "https://yutakikuchi.github.io/blog/" # Make sure to end baseurl with a '/'
languageCode = "ja-jp"
title = "Y's note"
author = "菊池佑太"
# Shown in the side menu
copyright = "© 2019. All rights reserved."
canonifyurls = true
paginate = 10
publishDir="docs"
[indexes]
tag = "startup,AI"
topic = "スタートアップ,AIに関わる内容を書きます"
[params]
# Shown in the home page
brand = "Y's note"
googleAnalytics = "UA-20616165-3"
# CSS name for highlight.js
highlightjs = "androidstudio"
highlightjs_extra_languages = ["yaml"]
# dateFormat = "02 Jan 2006, 15:04"
dateFormat = "2006 Jan 02, 15:04"
# Include any custom CSS and/or JS files
# (relative to /static folder)
custom_css = ["css/my.css"]
custom_js = ["js/my.js"]
# canonicalurl
canonicalurl = "http://yut.hatenablog.com"
#[params.piwikAnalytics]
# siteid = 2
# piwikroot = "//analytics.example.com/"
[menu]
# Shown in the side menu.
[[menu.main]]
name = "Home"
pre = "<i class='fa fa-home fa-fw'></i>"
weight = 1
identifier = "home"
url = "/"
[[menu.main]]
name = "Posts"
pre = "<i class='fa fa-list fa-fw'></i>"
weight = 2
identifier = "post"
url = "/post/"
[[menu.main]]
name = "About"
pre = "<i class='fa fa-user fa-fw'></i>"
weight = 3
identifier = "about"
url = "/about/"
#[[menu.main]]
# name = "Contact"
# pre = "<i class='fa fa-phone fa-fw'></i>"
# weight = 4
# url = "/contact/"
[social]
# Link your social networking accounts to the side menu
# by entering your username or ID.
# SNS microblogging
twitter = "yutakikuchi_"
# gnusocial = "*" # Specify href (e.g. https://quitter.se/yourusername)
facebook = "yuta.kikuchi.007"
# googleplus = "*"
# weibo = "*"
# tumblr = "*"
# SNS photo/video sharing
# Instagram = "*"
# Flickr = "*"
# Photo500px = "*"
# Pinterest = "*"
# Youtube = "*"
# Vimeo = "*"
# Vine = "*"
slideshare = "https://www.slideshare.net/yutakikuchi58/"
# SNS career oriented
linkedin = "https://www.linkedin.com/in/%E4%BD%91%E5%A4%AA-%E8%8F%8A%E6%B1%A0-36291a44/"
# xing = "*"
# SNS news
# reddit = "*"
# hackernews = "*"
# Techie
github = "yutakikuchi"
# gitlab = "*"
# bitbucket = "*"
# stackoverflow = "*"
# serverfault = "*"
# Gaming
# steam = "*"
# mobygames = "*"
# Music
# lastfm = "*"
# discogs = "*"
# Other
# keybase = "*"
- またcontent/postのディレクトリに対して
hatena_2_hugo.rb で生成されたmdファイルを設置
themes/blackburn/layouts/partials/head.html をcanonicalurl変数を読み込めるようにheaderを修正- hugoのserverを起動し、ページが閲覧できるか確認
- http://localhost:1313/ を見てみるとページを確認することができる
$ cp ~/md_output/* content/post/
$ ls -la content/post | head -n 5
total 9624
drwxr-xr-x 208 yuta staff 6656 5 2 11:36 ./
drwxr-xr-x 3 yuta staff 96 5 2 11:36 ../
-rw-r--r-- 1 yuta staff 1926 5 2 11:37 201009060134.md
-rw-r--r-- 1 yuta staff 15876 5 2 11:37 201009232329.md
$ vim themes/blackburn/layouts/partials/head.html
<!-- add canonical -->
<link rel="canonical" href="{{ if .IsHome }}{{ .Site.Params.Canonicalurl }}{{ else }}{{ $.Params.Canonicalurl }}{{ end }}" />
$ hugo server -t blackburn -D -w
...
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
- Githubに登録する公開用静的ページを生成する。そうするとconfig.tomlで設定した
docs というディレクトリが作成される
- Githubに登録不要なファイルを.gitignoreで設定する
- Githubにaddし、gh-pagesのbranchをremoteに反映
$ hugo -t blackburn
$ ls docs
total 1352
drwxr-xr-x 12 yuta staff 384 5 2 12:32 ./
drwxr-xr-x 12 yuta staff 384 5 2 12:26 ../
drwxr-xr-x 5 yuta staff 160 5 2 12:21 css/
drwxr-xr-x 3 yuta staff 96 5 2 12:21 img/
-rw-r--r-- 1 yuta staff 36870 5 2 12:32 index.html
-rw-r--r-- 1 yuta staff 622268 5 2 12:32 index.xml
drwxr-xr-x 4 yuta staff 128 5 2 12:21 js/
drwxr-xr-x 23 yuta staff 736 5 2 12:32 page/
drwxr-xr-x 210 yuta staff 6720 5 2 12:32 post/
-rw-r--r-- 1 yuta staff 28223 5 2 12:32 sitemap.xml
drwxr-xr-x 4 yuta staff 128 5 2 12:32 startupai/
drwxr-xr-x 4 yuta staff 128 5 2 12:32 スタートアップaiに関わる内容を書きます/
$ cat .gitignore
themes
resources
$ git add --all
$ git push -u origin gh-pages
