GitHub PagesにBlog作成 • Malven520's Tech Blog

はじめに

この記事はPyLadies Advent Calendar 2018の17日目の記事です。 …なんですが、大幅な遅刻をしてしまいました。精神的な余裕がない時に安請け合いをするものではないですね。申し訳ございません。アウトプット手段、ということで、昨年のchanmitsu55さんの記事を参考にブログを作成していきます。 Pythonは今回関係ありませんが、PyLadiesのもくもく会＋αで作成していますということで。

Hugoのインストール

PCがWindowsなので…

Hugoの公式からファイルを落として解凍
PATHを通す(Windows10)

この辺りは公式ドキュメントを参考にサクッと。

Blog作成

hugo new site MyBlog
cd ./MyBolog/themes
git clone {好きなテーマのリポジトリURL}

テーマはMinimoにしました。 Minimoのインストールガイドはここです。
SampleSiteのconfig.tomlをMyBlogのconfig.tomlと置き換えます。

設定ファイルをいじる

適当にカスタマイズしていきます。

minimo公式ドキュメントのここなども参考にしつつ。

サイドバーのアバウトのロゴを変えたい

フロント側に詳しくないので少しハマりました。

wigets.tomlの[about]のlogoを編集します。

[about]
title = ""
description = ""
logo = "images/Malven520_icon_circle.png"

MyBlog配下の/themes/minimo/static/imagesにファイルを置いてあげればOKでした。

コマンドとか(備忘録を兼ねて）

この記事を作成しましょう。

hugo new content/posts/GitHubPages_Blog.md

記事のdraftをFalseにしないと公開されないので、気を付けます。 YAMLなので、タグ付けやカテゴライズについては下記のように書きます。

---
title: "GitHub PagesにBlog作成"
date: 2018-12-24T09:32:00+09:00
draft: False
categories: ["Tech"]
tags: ["Hugo", "Advent Calendar"]
---

画面を見て確認したいとき(http://localhost:1313で見られるようになります)

hugo server -D

ビルドします

hugo

チキンなのでリポジトリを分ける

このBlogはGitHub Pagesで公開していますが、編集中のものをごちゃごちゃ置くのはちょっと…ということで、設定ファイル等を置くプライベートリポジトリをBitbucketに作成し、Publicの部分だけGitHubに置きます。

リポジトリの分け方については、先述のChanmitsu55さんの記事に詳しく記載されていますので、そちらをご参照ください。

また、Hugoに関してGitHubとBitbucketを使い分ける方法については下記のブログが詳しいです。
http://blog.shotarok.com/post/2015-12-15_my-first-post/

そうだ、CircleCIで自動化しよう

とはいえ、2つもリポジトリがあると記事執筆が面倒です。事実、カスタマイズやビルドの負担が大きく、放置してしまったという前科があります。色々とリサーチした結果、CircleCIで自動化するのがモダンでイケているのでは？という結論に至りました。お察しの通りミーハーです。

GitHubとBitbucketを使い分け、かつCircleCIを使う方法については下記のブログを参考にしています。
http://blog.shotarok.com/post/hugo-with-bitbucket-and-circleci/

CicleCIとの連携について準備編

今回作成したリポジトリをCircleCIと連携させます。

まず、今回のブログの秘密鍵＆公開鍵を作成していきます。 WindowsなのでこちらのQiita記事を参考にしています。公開鍵作成時にSaving key "~/.ssh/id_rsa" failed: No such file or directoryというエラーが出ましたが、 -f ~/.ssh/id_rsaという形ではなく、-f id_rsaという形で指定して実行したところうまくいきました。ちなみにパスワードは空にしないと後で上手くいかないという記述を見落としてやり直しました…。

CicleCIとの連携について GitHub側

GitHubのリポジトリに作成した公開鍵を登録します。

作成したリポジトリ>Settings>Deploy Keys>Add Deploy Key

Titleに識別できる名前を入れて、Keyに.pubの中身をコピペすればOKです。 Allow write accessにも忘れずにチェックしましょう。

CicleCIとの連携について Bitbucket側

テキトーにGitHubでログインしてしまったのですが、今回はBitbucketをConnectする必要があります。 User SettingsのAccount IntegrationsでBitbucketと接続します。

ConnectするとProjectをフォローできるようになるので、Bitbucketの方のリポジトリをフォローします。 Jobsからフォローしたプロジェクトに飛べるようになるので、歯車アイコンをクリックすると設定画面に飛びます。 SSH PermissionsページのAdd SSH Keyから先ほど作成した秘密鍵を登録します。 Hostnameはgithub.comを入力し、Private Keyに秘密鍵の中身をコピペします。

設定ファイルを作成

CircleCIの設定ファイルについては以下のブログを参考にしています。 https://t32k.me/mol/log/hugo-circleci-ghpages-2018/

CircleCIは2.0と1.0で大きく異なるので、その辺りを注意しないとハマります。ハマりました…。あと、改行コードとか基本的なことを押さえておけば大丈夫かと思われます。

確認

CircleCIがSuccess、GitHubにCommitできていればOKです！

と思いきや、

コミット先のディレクトリが違っていたり、Publicの中身が違っていたりしているので調査中です…。慣れないことはするものではないなと思いつつ、後日加筆修正します。申し訳ございません。