blogを書きたい

色々なことをやりたいと日頃思っているが,好奇心旺盛な(悪く言えば集中力がない)自分はそのようなことが余りにも多すぎて発散してしまう傾向にある.
そもそもこのブログもその一つなのだが,これに関してはそのような発散し続ける様を記録可能であるという点があり,
このような大義名分により,それまでGCP,競技プログラミングに熱中していた手を止め,blog制作をはじめることにした.

さて,blogを書くためには,書く先が必要になる.自分は今までブログをした事が4回ほどありそれぞれ手段が異なっていた.

  1. スクラッチ
  2. はてなブログ
  3. wordpress
  4. hugo

これだけ挫折を繰り返しているのだが,これらの経験から自分はブログを書く際に次のこと重視することにした.

  • 無料
  • できるだけカスタマイズが可能
  • ただし手軽

こう考えると,静的サイトジェネレータでかつ手軽に無料でホスティング可能なGithub pagesを使用する方針がいい気がする.

そして当初いいかなと思っていた静的サイトジェネレータは,Sphinxだ.
Sphinxには,sphinx_rtd_themeというテーマがある.これはプログラマであればよく見るテーマであり,Sphinxを使いこなせるようになりたいと思える大きな要因だ.
またさらに,SphinxはPython製である.Pythonを扱うことはそれなりにあるため環境構築がしやすく,何回かドキュメント作りで取り組んだこともあった.

しかし,マークダウンを使いたかった.

Sphinxはマークダウンがデフォルトではない.
reStructuredTextとやらである.
一応なんとかして,マークダウンにすることが可能のようだが,地雷が多そうという理由でやる気が出なかった.

やる気が出ないというのは重要な選定ポイントである.

そこで,Sphinx以外の静的サイトジェネレータを漁っていた時に目に留まったのがhexoだ.
hexoにはとてもかっこいいテーマがあった.

Butterflyというテーマである.(https://github.com/jerryc127/hexo-theme-butterfly)

これでブログを書きたいと思い,環境構築ははじめた.

環境構築

nodejsとnpmを入れる.

以下に書き連ねているが,
anyenv経由でnodenvを使いnodeを導入するのが一番クリーンで良い環境構築方法だと思う.

1
2
3
4
sudo apt update
sudo apt upgrade
sudo apt install nodejs
sudo apt install npm

しかし、これだとnpmが入らないことがある.

libssl1.0-devが必要らしい.

1
2
3
The following packages have unmet dependencies:
npm : Depends: node-gyp (>= 0.10.9) but it is not going to be installed
E: Unable to correct problems, you have held broken packages.
1
2
sudo apt-get install nodejs-dev node-gyp libssl1.0-dev
sudo apt install npm

ただしこのようにするとlibssl-devの依存関係でrosが全て排除される。

そのため、PPAを使って最新のnodejsをインストールする.
このnodejsパッケージには、npmも入っている.

1
2
sudo curl -sL https://deb.nodesource.com/setup_10.x | sudo bash -
sudo apt install nodejs

npmを用いて本丸のhexoをインストール

1
sudo npm install -g hexo

hexoの使い方は以下だ.

1
2
3
cd ~/Documents
hexo init blog
hexo server

かっこいいテーマを導入する

こちらのサイト (https://hexo.io/themes/)
にhexoのテーマが公開されている.
早速自分が気に入ったテーマを導入することにした.

このリポジトリをフォークし以下のようにsubmodule addした.

1
git submodule add https://github.com/gusugusu1018/hexo-theme-butterfly Butterfly

そして、_config.ymlを書き換える.

1
2
3
4
- theme: landscape

+ #theme: landscape
+ theme: Butterfly

必要なパッケージをインストールし、テーマを更新してみる.

1
2
3
4
npm install hexo-renderer-jade hexo-renderer-stylus --save
hexo clean
hexo generate
hexo server

設定してみる

中国語だが、作者のこちらのページに詳しく書いてある。
(https://jerryc.me/posts/21cfbf15/#%E6%87%89%E7%94%A8%E4%B8%BB%E9%A1%8C)

今度一気に翻訳しようかな…

設定ファイルをthemeディレクトリから移動しそこで書き換える。

1
2
mkdir source/_data
cp thema/Butterfly/_config.yml source/_data/butterfly.yml

コードのハイライトテーマを変更してみる

  • default
  • darker
  • pale night
  • light
  • ocean

5つのテーマが用意されているため、butterfly.ymlを書き換え変更してみた。

1
2
3
4
5
6
# Highlight theme
# ---------------
highlight_theme: ocean
highlight_copy: true

code_word_wrap: false

Donateボタンを消す

以下のrewardという項目のenableをfalseに変えると消える。

1
2
3
4
5
6
7
8
9
reward:
enable: false
QR_code:
- itemlist:
img: /img/wechat.jpg
text: 微信
- itemlist:
img: /img/alipay.jpg
text: 支付寶

アイコン変更

設定ファイルをよく見ると画像関係は、
jsDelivr(https://www.jsdelivr.com/)
というCDNを多様している様子

あとがき

設定部分に関しては,書ききれないほどやったことがあるというのとGithub Pagesにホスティングさせるところが一番重要な部分だと認識しているので,後日追記したいと思う.

さて三日坊主の自分にこのブログはいつまで続くのだろうか.

Author: Gusugusu
Link: https://gusugusu1018.github.io/2019/09/03/blogを書きたい/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.

Comment