Astro-notion-blogカスタマイズ日記

カスタムドメインで公開しました。

https://www.goodnight.blue/

もともとvercelで割り振られたurlもひきつづき使えます。

https://goodnight-blue.vercel.app

astro-notion-blogのマニュアルを見るとClourflareがおすすめされてますが、たった1日使ってみたeasy-notion-blogでvercelを使ってみて、その使い心地が気に入ったので、vercelを使っています。

無料枠は1日100回までデプロイできる。

プロジェクトは3個まで

普段scssで描いてるので使えるようにしました。

package.jsonに足さないといけない。

Webフレームワーク”Astro(アストロ)”の初期設定【Sass(SCSS記法)とリセットcssの導入方法】 | ARCUSS

超高速Webフレームワーク“Astro(アストロ)”についての第３弾は、Sass(SCSS記法)とリセットcs

https://arcuss-service.com

vite（ヴィートと読むそうな。ヴィテと読んでいた）

astro.config.mjsのdefineConfigに追記

vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "src/styles/_mixin.scss";`
        }
      }
    }
  },

<style lang=”scss”>
		---
</style>

ウェブフォントも一緒のようにpackage.json。Fontsourceで探す。

あんまり重たいフォントはどうなのかなと思っている。今サイトタイトルにだけウェブフォント

Fontsource

Download and self-host 1500+ open-source fonts in neatly bundled NPM packages. Access a comprehensive library of web typefaces for free.

https://fontsource.org

imageの呼び出し方も知りました。

srcのなかにおいて、importしないとならない

importの順番によってエラーになる。よくわかってない、わかった。
文字列リテラルが必要ですと言われていた。’’にするところ、``になってた。

https://docs.astro.build/ja/guides/images/

このページのここコピペしてたんよ。

import myImportedImage from `../assets/my-local-image.png`

文字が見づらいので目を細めてみてたけど、VSCodeにastro buildってのインストールしたら色分けしてくれるわ、場所を移動したらパスをかえてくれるわ、めっちゃ便利

astro iconでブルースカイのロゴを表示したかったのだけれど出なくて、さてはバージョンが低いせいで新しいアイコンは出ないんだなと悟って、自力でバージョンアップしようとしたら、英語で、自己責任でお願いしますって言われて、はいはいってバージョンアップしたらローカルサーバが動かなくなって、プルして再インストールしました。

蝶々のアイコンはsvgにした

ネストしたいんやけど、上手くいかなかった。

まずh1tagがtrueなら<h1>にして、そのなかでリンクがtrueかどうかでタイトルゲットして、そしてh1を閉じたかった。h1tagがfalseならh2にしたかった。

けど、タグを閉じないで、次のpropsができなかった。

やりかたはあるだろうけど、強引に全部書き換えるか（タイトルだけにリンクは使わないから）、迷うけど、やり方を調べる

↓

一覧読み込み用のコンポーネントを作った

↓

vercelでエラーでて、vercelのせいにしたけど、一覧読み込み用のコンポーネントでfilepathの定義がされてなかった。自分のせい。

フッターで読み込んでるプロフィールもコンポーネントにした

こんどやること

• 一覧の画像のサイズがバラバラなのを統一したい、自分でおんなじサイズであげるしかない？
• 一覧のページャーのみため
• 詳細のstyleを整える