サイト更新した

投稿日 編集日 カテゴリ Disqus： 単語数： 1.7k 読書の時間 ≈ 2 分

年末のため実家に帰省したところ、暇すぎたのでサイトを更新しようと思った。
このサイトはNode.js＋HexoというBlogシステムをベースにしており、テーマはNexT、ホスティングはNetlifyを使用している。
3年更新していない間に各々大分バージョンアップが入っていた。
別に放置でもいいのだが、これから少し更新していこうかとも思っていたので、このタイミングでシステムのアップデートをはかった。
適当にnpm updateすればいけるか？と安易に考えていたが、いくつか障害があった。

NexTの_config.yaml更新（NexT）

記述が色々変更されていたので、新しい設定ファイルをベースに、元の設定に近い設定にした。
あと、テーマに微妙に手を加えていたのだが、元はテーマフォルダのcssに直接変更を加えていた。ただこれだとテーマを更新したいときに上書きされてしまう懸念があったので、今回を気に変更。
NexTの_config.yamlファイルに下記の変更を加え、hexoにsource/_data/styles.stylを追加した。
これでオーバーライドしてCSSを弄りたいところは、styles.stylを弄るようにすればOK。

1
2
3
4
5
6
7
8
9
10
11
12
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyStart: source/_data/post-body-start.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  #bodyEnd: source/_data/body-end.njk
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.post-body{
    a{
        color: #38b48b;
        border-bottom: 0px solid transparent;
    }
    a:hover{
        color: #fff;
        background-color: #38b48b;
    }
    h2{
        padding-left: 0.25em;
        border-left: solid 0.25em #38b48b;
    }
}

.site-title{
   letter-spacing: 0.25em;
}

参考：Custom Files | NexT

imageタグの廃止（NexT）

Nextで、高機能なイメージタグが用意されていたのだが廃止されたらしい。
markdownが汚れるのが嫌だったので、普通に![]()で対応するように変更した。
ただ、そうすると画像リンクが上手く張れなくなってしまった。
hexoでは、サイトルートパスに/imagesフォルダを作って、そこに画像をぶっこんでおけば、deployしたときに公開用フォルダ/publicにimagesフォルダを自動コピーしてくれる。ということで、画像をすべてimagesフォルダに移行して、リンクも張り直した。

参考：NexT 7.4.0 Released | NexT

Netlify上のNode.jsバージョンアップ（Netlify）

このサイトは静的ホスティングサイトのNetlifyを利用している。
Hexoのバージョン5あたりから、対応するNode.jsのバージョンも上げなくてはならなくなったらしい。ということで、環境変数NODE_VERSION=v 20.10.0を追加した。
環境変数追加

ということで、ちょっとスッキリした。あとは日記を書くだけです。