<tltp label="Socket.IO">クライアント-サーバ間の双方向通信ができる JS ライブラリ [公式サイト](https://socket.io/)</tltp>
 で作成した通信対戦アプリをデプロイするときに結構苦労したので、その記録を書いておきます。



当該のアプリはこちらです。

→ [Geister Online](https://geister-online.netlify.app)

 

<toc />

## アプリの構造

Socket.IO を使用して、クライアント-サーバ間で通信をするアプリです。

コードは TypeScript で書き、Webpack を使って、

クライアントのコードは`public/bundle.js`として、サーバのコードは`dist/main.js`としてコンパイルしています。

`public`配下の HTML の`script`タグから`bundle.js`を読み込み、

ローカルでは`node dist/main.js`をターミナルから入力することでサーバのコードを動かしていました。

ディレクトリ構成は、このようになっていました。

```yml hide_nums
# 静的ファイル
public/
 # css、画像、音声など
 - static/
 - bundle.js
 - index.html
# サーバのコードがコンパイルされたやつ
dist/
 - main.js
# クライアントのコード
src/
# サーバのコード
server.ts
package.json
tsconfig.json
webpack.config.js
...
```

 

## デプロイ方法

`public`配下の静的ファイルは [Netlify](https://www.netlify.com/)、`dist`配下のサーバのファイルは [Heroku](https://jp.heroku.com/) で動かしています。

以下の図のように、クライアントサイドは Netlify、サーバサイドは Heroku っていう感じです。

<postimage src="relation" ext="svg" alt="デプロイの構造" />

おそらく Netlify は静的専用なので、動的なことはできないんだと思います。

この動画を参考にしながらデプロイを進めていきました。

<yout id="M9RDYkFs-EQ" />

 

しかし、ここでいくつか問題が発生してしまいました。

 

## 問題点

### Heroku でビルドできない

Heroku でビルドできなかったので、デプロイログを見ると、`package.json`がないとのこと。

Heroku のプロジェクトパスには`dist`を指定しているのですが、その中には`main.js`しかないからです。

仕方ないのでルートにあった`package.json`を`dist`に移動すると、ビルドできるようになりました。

<fukidashi face="ase">

こんなところにあっていいんだろうか…

</fukidashi>

### Heroku で Application error

`heroku logs --tail`すると、`code=H10 desc=App crashed status=503`なエラー。

ログを遡ると、`npm start`でこけてるっぽい。

実は`package.json`の中身はこうなっていました。

```json name=package.json
{
 ...
 "scripts": {
 "start": "npx webpack && node dist/main.js"
 },
 ...
}
```

このファイルのパスをさきほど変えたので、この部分のパスも変えなくてはなりません。

`webpack.config.js`をこの`dist`ディレクトリに入れてもいいかもしれないですが、

このファイルはクライアントのコードもコンパイルしているし、いろいろ面倒そうなので、

ローカルで`npx webpack`して、`npm start`には`node main.js`だけ載せることにしました。

```json name=package.json
{
 ...
 "scripts": {
 "start": "node main.js"
 },
 ...
}
```

これで Heroku 側の 503 エラーはなくなりました。

いまだに Heroku の URL には Not Found と表示されますが、本体は Netlify 側の URL なので問題ないと思います。

<fukidashi face="neut">

コードの変更があるとデプロイのたびにローカルでいちいちコンパイルしないといけないのがつらいけど、仕方ないか

</fukidashi>

### ブラウザで CORS エラー

これが一番煩わしかったです。

ブラウザで Netlify の URL にアクセスして、デベロッパーツールのコンソールを開くと、

[このエラー](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin)が表示されました。

セキュリティ的な意味で、**ドメインが違うサイト間で通信するには明示が必要**だということです。

さて、困ったのはどこにそれを書けばいいのかわからないということでした。

クライアント側か？サーバ側か？

 

クライアント側だとすれば、Netlify の`netlify.toml`や`_headers`ファイルで HTTP ヘッダを指定することができます。

ところがこれを追加してもうまくいかず…

ということはサーバ側かと思って、Express.js の CORS について調べていろいろ書いてみるも、うまくいかず…

先の動画でもそのコードでも何か特別なことをしているようには見えなかったし、八方塞がりでありました。

 

ところが、ふと「Socket.IO CORS」で調べると、

なんと**バージョンが変わってからは明示的な CORS 設定が必要**とか言うじゃないですか。

→ [Handling CORS | Socket.IO](https://socket.io/docs/v3/handling-cors/)

<fukidashi face="ase">

そんなところに原因があるとは思わなかったよ…

</fukidashi>

Netlify の設定ファイルも Express の CORS のコードも必要なく、これだけでヘッダを認識するようになりました。

 

それで、origin として設定する URL は Netlify の URL にすべきだったのですが、

Heroku の URL にするものだと勘違いしていたため、またも[エラー](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin)。

よく考えれば Socket.IO の CORS 設定のコード（サーバのコード）は Heroku 側だし、

Heroku 側が Netlify 側をブロックしてるんだから、Netlify の URL を書くべきだったんですね。

 

これでエラーもきれいになくなり、期待通りに動くようになりました。

---

お役に立てれば幸いです。

では<img className="emoji" draggable="false" alt="👋" src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f44b.png"/>

Socket.IO
で作成した通信対戦アプリをデプロイするときに結構苦労したので、その記録を書いておきます。
…

【Netlify + Heroku】Socket.IO アプリのデプロイ

例えば`example.com`という URL を持っていたとして、

`example.com/subdir`というサブディレクトリの URL にデプロイしたいときに

どうすればいいのかというお話です。

Netlify での場合を説明しています。



 

<toc />

## サイトを２つデプロイする

ここでは例として`example.com/subdir`という URL にデプロイをしていくことを考えます。

まずは`example.com`のサイトと`example.com/subdir`にする予定のサイトのデプロイを完了させます。

 

この時点では`example.com/subdir`にする予定のサイトの URL は別のもの、

例えば`marvellous-sheep.netlify.app`のようになっていると思います。

 

これは変更してもいいですし、そのままにしておいても構いません。

 

## リダイレクトを設定する

次に、`example.com`のサイトのルートディレクトリに`netlify.toml`を作成し、

次のように記述します。

```toml name=netlify.toml
[[redirects]]
	from = "/static/*"
	to = "https://marvellous-sheep.netlify.com/static/:splat"
	status = 200
	force = true

[[redirects]]
	from = "/subdir"
	to = "https://marvellous-sheep.netlify.com"
	status = 200
	force = true
```

200 リダイレクトによって、

アドレスバーの URL の表示を変更させることなく目的のサイトに飛ばすことができ、

見た目上はサブディレクトリにそのサイトが配置される形になります。

 

Netlify では [200 リダイレクトを rewrite としてくれる](https://docs.netlify.com/routing/redirects/rewrites-proxies/)のですが、

他のサービスだと rewrite を設定する必要がありそうです。

 

7-11 行目は、`example.com/subdir`にアクセスがあると、

`https://marvellous-sheep.netlify.com`に 200 リダイレクトするという意味になります。

 

<postimage src="404err" alt="CSS や画像が見つからない" />

サイトだけリダイレクトしても、CSS や画像のパスがおかしくなって表示されないので、

1-5 行目で`example.com/subdir/static`以下にあるすべてのファイルを

`https://marvellous-sheep.netlify.com/static`以下に移しています。

 

`:splat`というのは`*`（ワイルドカード）の部分を展開しているので、

例えば`example.com/subdir/static/app.css`は

`https://marvellous-sheep.netlify.com/static/app.css`に、

`example.com/subdir/static/images/image1.png`は

`https://marvellous-sheep.netlify.com/static/images/image1.png`に移ります。

 

これでリソースの読み込みも正常に行われます。

 

## ユースケース

例えば、`example.com/works/react`には React 製のサイトを、

`example.com/works/gatsby`には Gatsby 製のサイトを、

`example.com/works/hugo`には Hugo 製のサイトを置く、

というようなことができるようになります。

 

とはいえ、そう見えているだけであって、実際には他の URL が存在しているので、

管理はサイトごとに行うことになります。

---

ドメインを追加購入しているわけでもないので、無料でできます。

お役に立てれば幸いです。

では<img className="emoji" draggable="false" alt="👋" src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f44b.png"/>

例えば<code>example.com</code>という URL を持っていたとして、
<code>example.com/subdir</code>というサブディレクトリの URL にデプロイしたいときに
どうすればいいのかというお話です。
Netlify での場合を説明しています。
…

【Netlify】サブディレクトリにページをデプロイする方法

フリーランスとして活動する場合、信頼性の観点から独自ドメインのメールアドレスを使用したいというときがあると思います。

すでにドメインを取得していて、それを使って自身のホームページを運営しているさいに、

同じドメインを使ってメールアドレスを作りたい！

でもネームサーバは変更したくない！

というときにどうすればいいのかお話します。



すでにドメインは取得済みであり、さくらのメールボックスの契約も完了しているものとして話を進めていきます。

 

<toc />

## まずはさくらのメールボックスでメールアドレスを作成する

[さくらのメールボックス](https://www.sakura.ne.jp/mail/)は初期費用無料、年間1,048円で運用できるメール専用サーバです。

月額87円とかなり優しいお値段で、２週間のお試し期間もあります。

とりあえず形だけでも独自ドメインのメールアドレスがほしいというときに気軽に試すことができます。

私のようにサーバレスでブログを運営している人にはうれしいサービスです。

さくらのメールボックスの契約が完了したら、[こちら](https://help.sakura.ad.jp/360000237321/#03)を参考にドメインを登録してから、[こちら](https://help.sakura.ad.jp/360000225362/#02)の手順の通りにメールアドレスを作成します。

しかし、これだけではまだメールを受信することができません。

<relpos link="ssg-toha" />

 

## ネームサーバを変更したくないなら、DNS レコードを追加する

ネームサーバは、ドメインを Web サーバやメールサーバと結び付けるためのものです。

ドメインのネームサーバ設定を変更することで、メールの使用が可能となりますが、

[Netlify](https://www.netlify.com/) などのホスティングサービス用にすでにネームサーバを設定している場合、

これを書き換えてしまうと運営しているウェブサイトが動かなくなってしまうでしょう。

そこで**ドメインの DNS レコードを設定する**ことになります。

 

## ドメインを取得したサービスで DNS レコードが管理できない

ならばと思ってドメインを取得したサービスの管理画面に入っても、問題が発生することがあります。

私はエックスドメインを使っているのですが、そこからドメインの設定をしようとしてもできませんでした。

<postimage src="dns-setting" alt="ドメイン DNS 設定" />

エックスサーバーは契約していないのでサーバーパネルにログインすることもできないし、

さくらのメールボックスのほうでも DNS 設定はできないようでした。

しかし、**ネームサーバの設定先にドメインの DNS レコードを設定できる場所がありました。**

Netlify の場合は Netlify DNS です。

 

## Netlify DNS で MX レコードを設定する

Netlify の team 画面から`Domains`を選択し、対象のドメインを選びます。

`DNS settings > DNS records`から DNS レコードを設定することができます。

こちらで`Record type`に`MX`を、

`Name`にドメイン名を、

`Priority`に`10`を、

`Value`にはさくらのホスト名を入力します。

ホスト名はさくらのコントロールパネルから確認できます。

<postimage src="dns-record" alt="DNS レコードの設定" />

これでさくらのほうで作成したメールアドレスあてのメールが受信できるようになります。

<relpos link="hugo-yoyakutoko" />

 

## Gmail で送受信できるようにする

### Gmail で受信できるようにする

[こちら](https://help.sakura.ad.jp/360000322401/)に従ってさくらのコントロールパネルから設定します。

ここで Gmail のメールアドレスを指定すると、独自ドメインのメールアドレスあてに送られたメールが Gmail の受信トレイ表示されるようになります。

### Gmail で送信できるようにする

Gmail にアクセスし、`設定 > アカウントとインポート > 名前 > 他のメールアドレスを追加`をクリックします。

「メールアドレス」に使用したいメールアドレスを入力し、

「SMTP サーバー」にはさくらのホスト名を、

「ユーザー名」に使用したいメールアドレスを、

「パスワード」にメールアドレスに設定したパスワードを入力します。

他の項目はデフォルトのままで大丈夫です。

その後、設定したメールアドレスあてに確認コードが届きますので、最後の画面に確認コードを入力すれば完了です。

---

参考になれば幸いです。

では<img className="emoji" draggable="false" alt="👋" src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f44b.png"/>

フリーランスとして活動する場合、信頼性の観点から独自ドメインのメールアドレスを使用したいというときがあると思います。
すでにドメインを取得していて、それを使って自身のホームページを運営しているさいに、
同じドメインを使ってメールアドレスを作りたい！
でもネームサーバは変更したくない！
というときにどうすればいいのかお話します。
…

【さくらのメールボックス + Netlify DNS】独自ドメインのメールアドレスを取得して Gmail で送受信できるようにする

<tltp label="Hugo">Go 製の静的サイトジェネレータ [公式サイト](https://gohugo.io)</tltp>
は WordPress などの動的なサイト生成ツールとは異なり、予約投稿機能がありません。


しかし、[Netlify](https://www.netlify.com/) と [GitHub Actions](https://github.co.jp/features/actions) を使って予約投稿を実現できたので、その方法をご紹介します。

ほとんどは[こちらのサイト](https://blog.5ebec.dev/posts/netlify-github-actions-%E3%81%A7-hugo-%E8%A3%BD%E3%83%96%E3%83%AD%E3%82%B0%E3%81%AE%E4%BA%88%E7%B4%84%E6%8A%95%E7%A8%BF/)と同じことをやっているのですが、

マークダウンファイル側や git まわりの準備も含めてお話したいと思います。



<relpos link="ssg-toha" />

 

<toc />

## GitHub Actions とは

[GitHub Actions](https://github.co.jp/features/actions) は、ソフトウェアのビルドやデプロイを自動化する CI（継続的インテグレーション）、CD（継続的デリバリ）のようなサービスです。

GitHub ユーザならプライベートリポジトリでも Free プランから利用でき、

実行時間が毎月2000分（Windows なら1000分、macOS なら200分）までなら無料で利用できます。


ちなみに私の場合は
<tltp label="ワークフロー">実行条件と実行内容を表したもの</tltp>
の実行時間がだいたい0.5分なので、


macOS で一日12回実行しても大丈夫そうです。

 

## Netlify でビルド用 URL を取得する

Netlify にアクセスして、`Settings > Build & deploy > Build hooks > Add build hook`とします。

<postimage src="add-build-hook" ext="png" alt="Build hook 追加" />

`Build hook name`のところには任意の名前をつけます。

ここでは`scheduler`とします。

`Branch to build`は`master`のままで大丈夫です。

`Save`を押すと、ビルドを引き起こす URL が得られます。

<postimage src="build-hook-command" ext="png" alt="Build hook コマンド" />

展開すると下にコマンドが出てくるので、こちらをコピーします。

 

## 定期実行の内容を表す yml ファイルを作成する


ローカルの
<tltp label="ルートディレクトリ">一番最初の階層のディレクトリ（フォルダ）</tltp>
で


`/.github/workflows/schedule.yml`を作成します（フォルダ名は変更不可、ファイル名は任意）。

これがワークフローを定義するファイルとなります。

```yml name=/.github/workflows/schedule.yml
# 任意の名前
name: scheduler
　
# ワークフローを起動する条件
on:
 # スケジュールに基づいて起動する
 schedule:
 - cron: '0 3 2-31/2 * *'
　
# 実行するジョブ
jobs:
 # ジョブ名
 build:
 # ジョブを実行する環境を指定する
 runs-on: ubuntu-latest
　
 steps:
 - name: post build hooks
 # コマンドを実行する
 run: curl -X POST -d {} ${{ secrets.BUILD_HOOKS_URL }}
```

`on.schedule`は、cron 構文というものを使用して指定した時間になると自動で`jobs`を行ってくれます。

ただし時間は UTC（協定世界時）なので、日本の時間から9時間引き算する必要があります。

cron の指定は`(分[0-59]) (時[0-23]) (日[1-31]) (月[1-12]) (曜日[0-7])`というふうに行い、

`/2`をつけるとステップ値を指定できます。

`0 3 2-31/2 * *`は、月や曜日に関係なく、偶数日の日本時間で正午に実行するという意味になります。

`run:`の行にはさきほどのコマンドをペーストしたのち、URL 部分を`${{ secrets.xxx }}`と書き換えます。

（`xxx`の部分は任意の名前。ここでは`BUILD_HOOKS_URL`。）

これは GitHub の Secrets から呼び出すことができます。

一度 push しておきましょう。

```bash hide_nums
git add .
git commit -m "github actions: add workflow, scheduler"
git push origin master
```

 

## GitHub の Secrets を設定する

GitHub のリポジトリにアクセスし、`Settings > Secrets > Add a new secret`から値を登録します。

<postimage src="github-secret" ext="png" alt="GitHub Secrets" />

`Name`にはさきほどの変数名（`xxx`）を入れ、`Value`に Build hook の URL を入れます。

`Add secret`で登録すると、これで指定した時間に Netlify がビルドしてくれるようになります。

<relpos link="netlify-deploy-css-js" />

 

## 予約投稿したい記事のマークダウンのフロントマターの日付を設定する

Netlify はデプロイをしてくれます。

デプロイは GitHub のリポジトリをもとに行われます。

つまり、あらかじめ公開したい記事を完成させた（`draft`も`false`にした）状態で push しておく必要があります。

そのまま push すると公開されてしまうので、


<tltp label="フロントマター">マークダウンファイルの先頭の、その記事に関する情報を書く部分</tltp>
の<icode>date</icode>の日付を投稿したい日時に合わせます。


こうするとその日時になるまではいくら push しようがデプロイしようが、その日時がまだ存在しないので、

記事が存在しないものとして扱われて表示されません。

例えばある記事を翌日の20時に予約投稿したいなら、フロントマターの`date`の部分をその日時に合わせてから push すれば、

翌日の20時以降にデプロイされたときにはじめて記事が出現するというわけです。

このデプロイの時刻を GitHub Actions で同じ日時に指定してやれば、

翌日の20時05分ぐらいにはうまくいけばちゃんと記事が公開されるはずです。

（たまにデプロイが失敗することもあるようですが…）

 

## 記事以外の場合

記事でない場合でも、時間によって操作を変えることができます。

Hugo には[`now`](https://gohugo.io/functions/now/)という、地域の時間を返す関数が用意されています。

これを利用して、例えば時間帯によって条件分岐して表示させるものを変えることができます。

```go
{{- /* 朝（06:00-11:59）のとき */ -}}
{{- if in (seq 6 11) (int (now.Format "15")) -}}
 おはよう！
{{- /* 昼（12:00-17:59）のとき */ -}}
{{- else if in (seq 12 17) (int (now.Format "15")) -}}
 こんにちは！
{{- /* 夜（18:00-05:59）のとき */ -}}
{{- else -}}
 こんばんは！
{{- end -}}
```

ワークフローの`on.schedule`はこんな感じになります。

```yml
// 6:00, 12:00, 18:00 に実行
cron: '0 6-18/6 * * *'
```

これで夜だけ背景色やデザインを変える、なんてこともできちゃいますよ。

なお、記事の場合で今回のやり方がうまくいかない（未来の日付の投稿が表示されてしまう）場合でも、

`.Site.RegularPages`をいじればおそらく実装は可能です。

関係各所の調整がちょっと面倒かもしれないですが。

<details>
<summary>たぶんこんな感じになるかと思います。</summary>

次のコードを必ず通る場所に置きます。

```go
{{ range .Site.RegularPages }}
 {{ if .PublishDate.Before now }}
 {{ .Scratch.Add "existing_pages" (slice .) }}
 {{ end }}
{{ end }}
```

これ以外のすべての`.Site.RegularPages`を

`.Scratch.Get "existing_pages"`に書き換えます。

</details>

<relpos link="add-toc" />

---

予約投稿機能がないのは静的サイトジェネレータの弱点のひとつですが、

比較的簡単に、ほとんどの場合無料で実現できてしまいます。

この記事が参考になったら幸いです。

では<img className="emoji" draggable="false" alt="👋" src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f44b.png"/>

Hugo
は WordPress などの動的なサイト生成ツールとは異なり、予約投稿機能がありません。
しかし、<a href="https://www.netlify.com/" target="_blank" rel="noopener noreferrer">Netlify</a> と <a href="https://github.co.jp/features/actions" target="_blank" rel="noopener noreferrer">GitHub Actions</a> を使って予約投稿を実現できたので、その方法をご紹介します。
ほとんどは<a href="https://blog.5ebec.dev/posts/netlify-github-actions-%E3%81%A7-hugo-%E8%A3%BD%E3%83%96%E3%83%AD%E3%82%B0%E3%81%AE%E4%BA%88%E7%B4%84%E6%8A%95%E7%A8%BF/" target="_blank" rel="noopener noreferrer">こちらのサイト</a>と同じことをやっているのですが、
マークダウンファイル側や git まわりの準備も含めてお話したいと思います。
…

【Hugo + Netlify + GitHub Actions】静的サイトジェネレータで予約投稿する

<tltp label="Hugo">Go 製の静的サイトジェネレータ [公式サイト](https://gohugo.io)</tltp> 
で作成したサイトを
<tltp label="Netlify">静的サイトをホスティング（サーバ貸出）できるサービス [公式サイト](https://www.netlify.com/)</tltp>
でデプロイ（公開）した際に、


ローカルホスト（hugo server）ではうまく動いていた CSS/SCSS や JS が動なくなってしまうことがあります。

考えられる原因はいろいろあるので、トラブルシューティングとしてお読みいただければと思います。



 

<toc />

## 原因の調べ方（Chrome の場合）

以下の手順で適用されている CSS や JS ファイルを特定できます。

ローカルホスト、デプロイページの両方を開いて比較します。

ファイル名は異なっていても、内容が同一であれば問題ありません。

内容は右クリックから新規タブで開くなどして確認することができます。

### CSS/SCSS ①

ページ内の同じ要素にマウスカーソルをのせて、右クリックからデベロッパーツール（検証ツール）を開きます。

そこで、Styles という欄に、現在ハイライトしている HTML 要素に適用されている CSS が表示されます。

<postimage src="devtool_css" ext="png" alt="デベロッパーツールCSS" />

（クリックで拡大できます）

そのスタイルがどの CSS ファイル由来なのかも右肩に表示されます。

### CSS/SCSS ②

デベロッパーツールを開き、 HTML の中から`<link rel="stylesheet" href="..." ...>`を探します。

おそらく head タグ内にあります。

<postimage src="devtool_link_ss" ext="png" alt="デベロッパーツールlink-stylesheet" />

### JS

デベロッパーツールを開き、 HTML の中から`<script src="...">`を探します。

おそらく head タグ内か、 body タグ内の最後のほうにあると思います。

src にはどの JS ファイルが読み込まれるか指定されています。

<postimage src="devtool_script_src" ext="png" alt="デベロッパーツールscript" />

<relpos link="no-hugo-tableofcontents" />

 

## 全体的に適用されない

おそらく<inlink to="#cssscss-①">先述の手順</inlink>でファイル内容を比較しても相違点がなかったり、

そもそも表示がされていなかったりするかと思います。

### Hugo のバージョンが extended でない（SCSS の場合）

extended ではないバージョンの Hugo は SASS/SCSS をサポートしていません。

SASS/SCSS を使いたい場合は extended version をインストールしましょう。

### CSS/JS ファイルが読み込まれていない

該当する link タグや script タグが見つからない場合、ページに CSS/JS ファイルを読み込むことができていません。

`/layouts`以下のファイルからタグを探して、なければ書き加えましょう。

### config.toml の設定が適切でない

link タグや script タグが存在し、指定されているファイルに相違点が見つからない場合、

config.toml が適切に記述できていない可能性があります。

この場合、 CSS では、<inlink to="#cssscss-①">CSS/SCSS ①</inlink>の手順で Styles の欄に表示されるものが異なります。

`baseURL`がデプロイページのものと一致していること、`theme`がローカルの`/themes`直下のフォルダ名と同一であることを確認してください。

 

## 一部のみ適用されない

おそらく<inlink to="#cssscss-①">先述の手順</inlink>でファイル内容を比較すると、

内容が違う、自分で書き加えた部分が記載されていないなどという状態になるかと思います。

### ローカルリポジトリとリモートリポジトリのファイルが異なる

Netlify はリモートリポジトリ（GitHub など）のファイルをもとにサイトを構築します。

プッシュをしていないために、ローカルでの変更内容がリモートリポジトリに反映されていないと

デプロイページに変更が反映されません。

ルートディレクトリにて次のコマンドを打ってから再度確認してみましょう。

```bash hide_nums
git add .
git commit -m "commit message"
git push origin master
```

### Build image selection を変えてみる（SCSS の場合）

Netlify の Settings > Build & Deploy > Build image selection > Edit settings から

Build image を変更してデプロイしてみます。

私の場合、 Ubuntu Xenial 16.04 (default) を Ubuntu Trusty 14.04 に変更したところ

カスタム SCSS が適用されました。

### `/static`以下に置いてみる（`/static`以下にない場合）

`/static/css`や`/static/js`を作成し、そこに反映させたい CSS や JS を置きます。

その後`/layouts`以下の適切なファイルの中で、 CSS や JS を読み込むコードを記述します。

```html hide_nums
CSS の場合
<link rel="stylesheet" href="/css/custom.css">
　
JS の場合
<script type="text/javascript" src="/js/custom.js"></script>
```

私の場合、カスタム JS はこの方法ではじめて適用されました。

<relpos link="blog-koukai-sooner-better" />

---

デプロイできたと思ったらレイアウトがぐちゃぐちゃになっていたら、結構焦りますよね。

もはや公開されてしまっているから。

でも最初は見ている人が少ないので、ゆっくり冷静に対応していきましょう。

この記事がお役に立てたなら幸いです。

それではまた～<img className="emoji" draggable="false" alt="👋" src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f44b.png"/>

Hugo
でデプロイ（公開）した際に、
ローカルホスト（hugo server）ではうまく動いていた CSS/SCSS や JS が動なくなってしまうことがあります。
考えられる原因はいろいろあるので、トラブルシューティングとしてお読みいただければと思います。
…

Netlify

【Netlify + Heroku】Socket.IO アプリのデプロイ

【Netlify】サブディレクトリにページをデプロイする方法

【さくらのメールボックス + Netlify DNS】独自ドメインのメールアドレスを取得して Gmail で送受信できるようにする

【Hugo + Netlify + GitHub Actions】静的サイトジェネレータで予約投稿する

【Hugo + Netlify】デプロイ時に CSS, JS が適用されない場合の対処法