Y's note

愛と夢と人生について書きます

スポンサーリンク

Hugo + Github PagesでMarkdownで書いた記事を公開する

Ref

Goal

Hugo, Github Pages

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

Movable Type型をHugoの形式(Markdown型)に変換

$ 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つ紹介されている
    1. 公開用の静的ページをmasterのdocsディレクトリ配下に置く
    2. 公開用の静的ページをgh-branchの直下に置く
    3. 公開用静的ページを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.tomlcontent に対して手を加えていく。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に登録し、Github Pagesを公開する

  • 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

Github

スポンサーリンク