====== 静的ウェブサイト ======
ベーシックな静的ウェブサイトをつくる。メモ

----

  * 静的ウェブ（HTML）サイトはメモ帳でも制作可能な基礎的なサイト
  * 低価格なレンタルサーバープランで公開できる
  * 基礎的なクラウドサービス（Amazon S3などからもホスティングできる）

===== テンプレートから作る =====
テンプレートを基礎としてカスタマイズなどする。
[[sites:static-site:template|テンプレートを探す]]

===== アプリケーションによる制作 =====
アプリケーションでテンプレートからのカスタマイズを行う。
==== Webオーサリングソフトの使用 ====
  * Adobe Dreameweaver（有償）
  * ホームページ・ビルダー（有償）
  * [[:apps:ew4|Microsoft Expression Web 4]]（無償）

※「Expression Web 4」のスクリーンショット
{{:apps:ew4_01.png?direct&600|Microsoft Expression Web 4}}\\ 
**無償の「Expression Web4」によるサイト制作/編集/アレンジ**
2012年に開発が終了しているアプリケーションなのでIntelliSense機能（補完機能）は初期のHTML5/CSS3（要設定変更）までしか対応していないが便利。転送ツールはFTPS/SFTPにも対応している。またWindows11でも動作するので渋めのコードエディタとして意外に現在も使える。

<color #ed1c24>※デフォルトの文書設定は「XHTML1.0 Transitional」としている。なんという硬派感。</color>

==== 「SeaMonkey」で編集 ====
インターネット統合アプリケーション「SeaMonkey」はファイルメニューから「ページを編集」でワープロソフトのような感覚でWebページの作成・編集が出来るいわゆるWYSIWYG HTMLエディタであるMozilla Composerが起動する。FTP機能はあるが、ほぼ必須となっている暗号化には対応していない。

{{:sites:seamonky-01.png?direct&400|}}

エディタ画面

{{:sites:seamonky-02.png?direct&400|}}

プレビュー画面

===== FTPソフトとメモ帳で制作 =====
FTPクライアント（ここではFFFTP）でサーバーに接続。登録しているエディタ（デフォルトではメモ帳が登録されており合わせて３つまで登録可能）を使用してページを編集。\\ 
<color #ed1c24>※クラウドサービスのストレージへは通常のFTPソフトでの接続は出来ません。</color>

※「FFFTP」のスクリーンショット
{{:sites:ffftpとメモ帳.jpg?direct&600|FFFTP}}\\ 
メモ帳での制作は補完もなくHTMLの知識が必要になるが、基本的なタグでMarkDownのようにシンプルな文章の構造は作成できる。CSSは一切使わないようなサイトもかつては特に珍しくはなかったが、しかし2026年においてそれは見なくなった。インデックスされず検索にあまり現れなくなったのでしょうか…分かりません。

===== ターミナルでダイレクトに編集 =====

ターミナルより接続。そのまま[[editor:vim|Vim]]のようなエディタでダイレクトにページ作成・編集作業を行う 笑

WindowsからLinuxサーバーに接続します。Windows Terminalを起動して接続したらサイトのルートディレクトリへ…「index.html」をVimで開きました。

{{:sites:vim_html-edit01.jpg?direct&600|ターミナル画面１}}

{{:sites:vim_html-edit02.jpg?direct&600|ターミナル画面２}}\\ 

「index.html」をVimやNanoで編集します。エディタに関してはMicrosoft Editがマウスも使えてオススメなのだがGithubからダウンロードして配置して権限を与えて…など導入が面倒。アップデートなども面倒そうだ…snap版はお手軽簡単にインストール出来るがサンドボックス環境にありシステムファイルなどの編集は出来ない致命的だ…手軽に導入出来るとなればイチオシなのだけど

他には…

VScodeもターミナルが統合されている。

{{:sites:vscode-terminal.png?direct&600|}}

VScodeに統合されたターミナルによる編集画面。

この画像では、ローカル上のHTMLファイルの編集はサイトごとに公開ディレクトリをワークスペースにしている。（左カラムに表示されている）

===== 関連項目 =====
[[:sites|Basic Site]]

==== 関連サイトリンク ====
[[https://www.peconet.org/pages/html/base.html|HTMLの基本的な構造]]
[[https://www.peconet.org/pages/html/cheatpage.html|HTML基本タグ]]

----

~~socialite~~