2014年頃から全く更新できていないサイトを持っています。
無料スペースということもあり、数ヶ月未更新だと広告が表示されてしまいます。
このサイトを久しぶりに更新して、放置すると出てしまう広告を消すことにします。
- Visual Studio Code を使う
- 「SFTP」を選ぶ
- 「SFTP」の設定と使い方
- Visual Studio Codeのコマンドパレットの開き方
- アップロードする前の「SFTP」の設定
- サイトの更新準備（リソースのダウンロード）
- 「FC2ホームページ」のFTPアクセス設定
- 後記
Visual Studio Code を使う
今回から Visual Studio Code を使うことにしました。
理由は、
- 軽い
- 使い慣れている
- 疲れない色合い
です。
市販のホームページ作成ソフトで出力したソースなので無駄が多いコードですが、デフォルトで適宜色分けされ見やすいです。
「SFTP」を選ぶ
リモートサーバーと通信するためのFTPクライアントを選びます。
過去にはサイト作成アプリに付属のFTPクライアントや、FFFTPやFileZillaなどのフリーのFTPクライアントを使っていました。
Visual Studio Codeでできれば便利だし、Extensionにありそう、と少し確認しただけですぐに出てきました。
いくつかありましたが、標準でインストール済み、かつ評価も高そうな「SFTP」を使うことにしました。
Visual Studio Code と「SFTP」で、サイトを更新することにします。
「SFTP」の設定と使い方
「SFTP」は、次のサイトで設定方法と使い方を学びました。非常にわかりやすく感謝です。
www.karelie.net
上記サイトにあるとおり、「SFTP」で同期設定すると、Visual Studio Codeで保存してブラウザを開いて最新化する、もう反映されている、といった軽やかさです。
「Ctrl+S」「Alt+Tab」「F5」、でササッと確認して「Alt+Tab」でサッと戻る、といった軽快さが気に入りました。
Visual Studio Codeのコマンドパレットの開き方
なお、「SFTP」を設定する際の操作について、Visual Studio Codeのコマンドパレットの開き方を地味に知らなかったので、下記で確認しました。「Ctrl+Shift+P」です。
medium.com
アップロードする前の「SFTP」の設定
また、アップロードする前に、ignoreの設定をしたほうが良さそうです。次のサイトで学びました。
arrown-blog.com
サイトの更新準備（リソースのダウンロード）
まずはリモートからリソースをダウンロードしてみます。
Visual Studio Codeのワークスペースに空フォルダを登録し、そのフォルダの右クリックメニューから「Sync Remote -> Local」を実行しました。
すると、下記のようにログインエラーとなりました。
「FC2ホームページ」のFTPアクセス設定
更新対象のサイトは「FC2ホームページ」なのですが...
web.fc2.com
どうもツールからのFTPアクセスがデフォルトでブロックされるように、いつの頃からか設定が追加されていたようです。
こちらをオフにすると、無事にエラーがなくなり、めでたくリモートとローカルが同期しました。
後記
IDE上でソースを保存するともうWEBに反映されている、というのは本当にストレスフリーだと思いました。
