開業届を作ったのでいよいよ個人事業主になるわけですが、自分のポートフォリオを整理したいなーついでに情報発信したいなーと思ったのでブログを始めることにしました！
まわりの強いエンジニアに聞くところによると、Hugoがいけてるんじゃね？という話になったのでGoの勉強のしたさもあり(なおほとんど使わない模様)Hugoでやることにしました。
ホスティングはgithub pagesです。SEO的にも多分問題ない(はず)
Hugoとは
静的なhtmlを生成する静的ページジェネレータの一つ。ほかにもGatsbyとかある。
コンパイルが早い。Go神。
動的処理は基本的にjavascriptで行う。
Hugoを使うのに適している人
html, javascriptがある程度わかっていて、ブログ始めたいなーでもはてブとかちょっとなーという人に向いてます。
コマンドラインとか全くわからないとかだとちょっとキツイかも
Github pagesとは
自身やプロジェクトのwebページをGithubリポジトリを用いて公開することができるホスティングサービス。基本無料。
SEOとかそこらへんはもう少し詳しく調べたい。
公開するまでの基本的な流れ
Hugoで記事作成してGithubにpushするだけ。おわり。
Hugoのインストール
環境
mac OS High Sierra バージョン10.13.6
Homebrew 1.7.1
Homebrewからhugoをインストールします($は打ちません)
$ brew install hugo
作業ディレクトリを作成
任意のディレクトリでhugo new site hogehogeコマンドを打つことで作業ディレクトリが作成できます。
自分の場合はデスクトップのworkspaceディレクトリで作成しました。hogehogeは自分のブログ名でいいです。
$ cd Desktop
$ cd workspace
$ hugo new site myblog
Hugoのテーマをインストール
他サイトを見てもここら辺からいろいろやる順序が変わってきてるが、やってる内容は基本的に同じなので自分が理解しやすい順序でやった方がいいと思う。
Hugoのテーマ一覧から好きなテーマを選んでDownloadボタンからGithubに飛びます。
git cloneしたら完了です。自分はanankeを選びました。
$ cd themes
$ git clone https://github.com/budparr/gohugo-theme-ananke.git
記事作成
hugo new posts/hogehoge.mdコマンドで記事の作成ができます。
作業ディレクトリ直下でコマンドを打つ必要があるので、今の位置をlsコマンドで確認してからにしましょう。
firstpost.mdは記事のタイトルなので適宜名前を変えてください。
$ ls
$ hugo new posts/firstpost.md
するとcontentディレクトリ配下にpostsディレクトリが作成され、firstpost.mdが作成されます。
firstpost.mdの中身を見てみると、
---
title: "firstpost"
date: 2018-08-08T17:06:24+09:00
draft: true
---
titleは記事のタイトルなので自由に書き換えてください。
dateは作成時刻です
draftは未公開にするかどうかなので、公開するためにfalseにします
この下にマークダウン形式でブログを書いていくことができます。
↓こうなりました
---
title: "ブログ始めました"
date: 2018-08-08T17:06:24+09:00
draft: false
---
## 今日はいい天気でした（台風）
いいですね（白目）
hugo serverコマンドでローカルでサーバーを立ち上げます。するとプレビューが見れるようになります。
ちなみに -Dオプションをつけることでビルドもしてくれます
$ hugo server -D
最後にhugo コマンドでビルドをします。これでpublicディレクトリが作成され、公開用ファイル一式が生成されます。categoriesフォルダとかimagesフォルダとかのことです。
ここでブランチを切ってgithubにpushします。ブランチ名はなんでもいいですが、記事作成用のブランチなのでわかりやすくwriteにします。
リポジトリは新規作成しておきます。リポジトリ名はなんでもいいですが、
ブログURLをhttps://[ユーザ名].github.ioにしたいなら、
[ユーザー名].github.ioというリポジトリ名にしてください。
これはそういう決まりなのでどうしようもないです。
$ hugo
$ git init
$ git checkout -b write
$ git remote set-url origin git@github.com:ryoma-tokushige/ryoma-tokushige.github.io.git
$ git add .
$ git commit -m "initial commit"
$ git push -u origin write
CircleCIを設定する
そもそもCircleCIとは？
CI（継続的インテグレーション）してくれるサービス。
詳しくは【CircleCI】CircleCI 2.0からはじめる個人での簡単なCI導入方法 - githubとの連携まで
今回ははてブとかと違って、writeブランチで記事作成後にpushしただけでは公開されません。hugoコマンドでコンパイルして生成されたpublic以下のファイル一式をmasterにpushする必要があります。
しかし、記事作成のたびにこの作業を行うのは面倒くさいので、CiecleCIを使ってここを自動化しようというお話です。
config.ymlにしてほしい処理を書くとCircleCIがいい感じに読み取ってくれます。
version: 2
jobs:
build:
docker:
# specify the version
- image: circleci/golang:1.9
# Specify service dependencies here if necessary
# CircleCI maintains a library of pre-built images
# documented at https://circleci.com/docs/2.0/circleci-images/
# - image: circleci/postgres:9.4
#### TEMPLATE_NOTE: go expects specific checkout path representing url
#### expecting it in the form of
#### /go/src/github.com/circleci/go-tool
#### /go/src/bitbucket.org/circleci/go-tool
working_directory: /go/src/github.com/{{ORG_NAME}}/{{REPO_NAME}}
steps:
- checkout
- run:
name: hugo install
command: |
go get -v github.com/spf13/hugo
git config --global user.name "ryoma-tokushige"
git config --global user.email "ryoma.tokushige@gmail.com"
- run:
name: push to master
command: |
hugo
git clone https://github.com/ryoma-tokushige/ryoma-tokushige.github.io.git
ls
cp -rp public/* ryoma-tokushige.github.io/
cd ryoma-tokushige.github.io
ls
git remote set-url origin git@github.com:ryoma-tokushige/ryoma-tokushige.github.io.git
git add .
git commit -m "[ci skip] publish"
git push origin master
runのhugo install部分(青字)とpush to master部分が今回設定したとこです。なんとなーくやってることがわかればおっけーです。
これでCIも回るはず！
とりあえずこんなもんです。ページごとにテーマとかも変えられるっぽいけどそれはまた今度で。