静的HTMLサイトをエックスサーバーに公開してみた。アップロードと注意点とは？

前回は、Webフォントを自社配信した話をしました。

前回の記事はこちらです。

Webフォントを自社配信してみた。表示速度・商用利用・注意点とは？

静的HTMLサイトをエックスサーバーに公開してみた

今回のコーポレートサイトは、WordPressではありません。

HTML
CSS
JavaScript
画像
フォント

などで構成された、静的HTMLサイトです。

そのため、WordPressの管理画面から公開するのではなく、ファイルをサーバーへアップロードして公開しました。

今回アップロードした主なファイル

HTMLファイル
CSSファイル
JavaScriptファイル
画像ファイル
フォントファイル
favicon
apple-touch-icon
robots.txt
sitemap.xml
.htaccess

静的HTMLサイトでは、必要なファイルを自分で把握しておくことが大切です。

1つでもアップロード漏れがあると、表示が崩れたり、画像が出なかったりします。

README.mdは、アップロードしなかった

制作中には、README.mdというファイルもありました。

README.mdは、制作メモや管理用の説明を書くためのファイルです。

ただし、公開サイトに必ず必要なものではありません。

README.mdをアップロードしなかった理由

閲覧者に見せる必要がない
サイト表示には関係がない
制作メモが含まれる可能性がある
公開ディレクトリには、必要なファイルだけ置きたい

そのため、今回はREADME.md以外をアップロードする方針にしました。

公開サーバーには、必要なファイルだけ置く。

これは、シンプルですが大切です。

公開前に確認したファイル

アップロード前には、どのファイルが必要かを確認しました。

静的HTMLサイトでは、ページ本体だけでなく、周辺ファイルも必要です。

HTMLファイル

各ページのHTMLファイルです。

今回のサイトでは、次のようなページがあります。

これらのページが、アップロード後に正しく表示されるかを確認しました。

CSSとJavaScript

CSSは、サイトの見た目を整えるファイルです。
JavaScriptは、メニューや表示演出などに関わるファイルです。

これらが読み込まれていないと、見た目や動きが崩れます。

特にCSSは、アップロード漏れやキャッシュの影響を受けやすいので、注意しました。

画像とフォント

画像やフォントも、忘れずにアップロードしました。

ヒーロー画像
OGP画像
favicon
apple-touch-icon
Webフォント

画像やフォントは、ファイル数が多くなりやすい部分です。

フォルダごとアップロードする場合でも、漏れがないか確認しました。

robots.txtとsitemap.xml

検索エンジン向けのファイルも用意しました。

robots.txt
sitemap.xml

robots.txtは、検索エンジン向けの案内ファイルです。

sitemap.xmlは、サイト内のURLを検索エンジンに伝えるためのファイルです。

これらも、公開後にブラウザで開いて確認しました。

.htaccessでURLを整えた

今回のサイトでは、URLに「.html」を出さない形にしました。

通常のHTMLファイルのURL

https://conohaya.com/guide.html
https://conohaya.com/company.html
https://conohaya.com/inquiry.html

今回のURL

このように、「.html」を出さない方が、URLとして自然に見えます。

そのため、.htaccessでURLの表示を整えました。

.htaccessで行ったこと

index.htmlを、トップページへ転送する
.html付きURLを、.htmlなしURLへ転送する
.htmlなしURLで、対応するHTMLファイルを表示する
404ページを、指定する
フォントのキャッシュ設定を、行う

.htaccessは、サーバーの動きに関わるファイルです。

便利ですが、書き方を間違えると、ページが表示されなくなることもあります。

そのため、公開後に必ず確認しました。

アップロード後に確認したこと

ファイルをアップロードしたら、公開環境で確認します。

ローカル環境で問題なく見えていても、公開環境では違う問題が出ることがあります。

公開後の確認項目

トップページが、表示されるか？
下層ページが、表示されるか？
CSSが、反映されているか？
画像が、表示されているか？
フォントが、読み込まれているか？
スマホで、表示が崩れていないか？
メニューが、開閉できるか？
フォームが、表示されるか？
URLから「.html」が、消えているか？
OGP画像が、設定されているか？
robots.txtが、表示されるか？
sitemap.xmlが、表示されるか？

公開作業では、アップロードして終わりにしないことが大切です。

必ず、公開URLで確認します。

キャッシュには注意が必要だった

公開後の確認で、少しややこしいのがキャッシュです。

キャッシュとは、一度読み込んだファイルを保存して、次回以降の表示を速くする仕組みです。

便利な仕組みですが、制作中や更新直後は、古いファイルが表示されることがあります。

キャッシュで起こりやすいこと

CSSを更新したのに、見た目が変わらない
画像を差し替えたのに、古い画像が出る
スマホでは古い表示、PCでは新しい表示になる
サーバー側の高速化設定が、反映確認を難しくする

今回も、キャッシュまわりは何度か確認しました。

キャッシュが原因なのか、ファイルの修正漏れなのかを切り分ける必要があったからです。

確認時に行ったこと

ブラウザキャッシュを、削除する
サーバーキャッシュを、確認する
CSSの読み込みURLに、バージョン番号を付ける
別のブラウザやスマホで、確認する
公開URLで、実際の読み込み状態を見る

キャッシュは、表示速度には役立ちます。

ただし、更新直後の確認では、少し注意が必要です。

Xアクセラレータやサーバーキャッシュも確認した

エックスサーバーには、高速化に関する機能があります。

今回も、Xアクセラレータ、サーバーキャッシュ、ブラウザキャッシュなどを確認しました。

確認した機能

Xアクセラレータ
XPageSpeed
サーバーキャッシュ
ブラウザキャッシュ

これらは、表示速度を上げるために役立つ機能です。

ただし、制作直後や確認中は、古い表示が残って見えることがあります。

そのため、一時的にオフにして切り分けたこともありました。

最終的には、慎重に判断した

高速化機能は、基本的には便利です。

ただし、サイトによって相性があります。

今回も、表示の安定性を見ながら判断しました。

表示崩れがないか？
スマホでカクつかないか？
CSSが正しく反映されるか？
フォームに影響がないか？

高速化機能は、オンにすれば必ず良い、というものではありません。

表示確認をしながら、必要に応じて使うことが大切です。

スマホ実機での確認も行った

公開後は、スマホ実機でも確認しました。

PCのブラウザでスマホ幅を確認するだけでは、気づけないことがあります。

スマホで確認したこと

トップページの表示
メニューの開閉
スクロールのなめらかさ
見出しの改行
フォームの入力欄
フッターのリンク
apple-touch-iconの表示

実際にスマホで見ると、PCでは気づかなかった違和感が見つかることがあります。

今回も、スマホで確認しながら、余白や改行を調整しました。

公開後に見つかった問題もあった

公開後に、いくつか問題も見つかりました。

公開してから気づくことは、珍しくありません。

むしろ、公開環境でしか分からないこともあります。

見つかった問題

スマホメニューが、コンテンツと重なる
スクロール時に、カクつく
スマホで、見出しの改行が不自然になる
apple-touch-iconの画質が、気になる
フォーム入力欄の見た目が、そろわない
一部URLで、想定外のエラーが出る

こうした問題は、公開後にひとつずつ確認して直しました。

サイト公開は、ゴールではありません。

公開後の確認と改善まで含めて、サイト制作です。

サーバー公開で大切だと感じたこと

今回、静的HTMLサイトを公開してみて、大切だと感じたことがあります。

1. 必要なファイルを把握する

静的HTMLサイトでは、すべてのファイルを自分で管理します。

HTMLだけでは、サイトは完成しません。

CSS
JavaScript
画像
フォント
.htaccess
robots.txt
sitemap.xml

どれが必要なのか、把握しておくことが大切です。

2. 公開URLで確認する

ローカルで見えていても、公開環境では違う問題が出ることがあります。

そのため、公開URLで確認します。

ページが、開けるか？
CSSが、反映されているか？
画像が、表示されるか？
リンクが、正しく動くか？
スマホで、問題ないか？

アップロードしたら、必ず見る。

これは、かなり大切です。

3. キャッシュを疑う

修正したのに反映されないときは、キャッシュを疑います。

ブラウザキャッシュ
サーバーキャッシュ
高速化機能
CSSや画像のキャッシュ

キャッシュは便利ですが、確認時には迷いやすい原因になります。

4. 一度で完璧にしようとしない

公開後に問題が見つかることはあります。

大切なのは、見つけたら直せる状態にしておくことです。

今回も、公開後に何度も確認し、調整しました。

AIと一緒に作っていると、修正相談もしやすいです。

静的HTMLサイト公開のメリット

静的HTMLサイトを公開してみて、良いと感じた点もあります。

メリット1：構成がシンプル

HTML、CSS、JavaScript、画像などのファイルで構成されているため、仕組みが比較的シンプルです。

WordPressのようなデータベース管理はありません。

メリット2：表示が軽い

余計なプラグインやテーマがないため、表示を軽くしやすいです。

今回も、表示速度はかなり良い状態になりました。

メリット3：デザインを作り込みやすい

HTMLとCSSを直接調整できるため、細かいデザインを作り込みやすいです。

今回のように、余白、フォント、スマホ改行まで整えたい場合には、相性が良いと感じました。

メリット4：AIと相性が良い

ファイル単位で修正できるため、AIに相談しながら改善しやすいです。

どのHTMLを直すのか、どのCSSを調整するのかが明確になります。

静的HTMLサイト公開の注意点

一方で、注意点もあります。

注意点1：アップロード漏れに注意する

静的HTMLサイトでは、必要なファイルを自分でアップロードします。

フォルダや画像のアップロード漏れがあると、表示が崩れます。

注意点2：更新作業の管理が必要

ファイルを修正したら、対応するファイルをアップロードする必要があります。

どのファイルを変えたのか、管理しておくことが大切です。

注意点3：サーバー設定に注意する

.htaccessやキャッシュ設定は、便利ですが、ミスすると表示に影響します。

変更したら、必ず公開環境で確認する必要があります。

注意点4：ブログ運用には向かない

静的HTMLサイトは、ブログのように頻繁に記事を投稿する用途には向きません。

今回も、ブログはWordPressで運営しています。

コーポレートサイトとブログで、役割を分けました。

まとめ

今回は、静的HTMLサイトをエックスサーバーに公開した話をしました。

要点をまとめます。

静的HTMLサイトは、ファイルをサーバーへアップロードして公開する
HTMLだけでなく、CSS、JavaScript、画像、フォントも必要
README.mdは、公開サイトには基本的に不要
.htaccessで、URLから「.html」を外した
アップロード後は、公開URLで必ず確認する
キャッシュや高速化機能は、反映確認を難しくすることがある
スマホ実機での確認は、とても大切
公開後の改善まで含めて、サイト制作である

静的HTMLサイトは、WordPressとは違う管理方法になります。

ただし、コーポレートサイトのように、更新頻度がそこまで高くないサイトには、かなり向いていると感じました。

実際のサイトはこちらです。

このは屋のコーポレートサイトを見る

このは屋

このは屋｜自分の商売を、自分で育てる。 AIとテンプレートを味方に、外注業者へ依存せず、商売の仕組みを自分の手でつくるための学び舎。

あなたが静的HTMLサイトを公開する場合は、まず必要なファイルを整理してみてください。

そして、アップロード後は、必ず公開URLで確認することをおすすめします。

次回は、URLから「.html」を消す方法について、もう少し詳しくお話しします。

見た目は小さな違いですが、サイト全体の印象や管理にも関わる部分です。