Web サービス Neocities（ネオシティーズ）についてまとめています。

🎈 Neocities (neocities.org) | 🎈 BALLOON | FU-SEN - English Information

公式・関連サイト

•  Neocities
•  The Neocities Blog
•  Status
•  GitHub neocities
•  Twitter @neocities
•  Facebook

Facebook は 2018年 の投稿を最後に止まっています。
投稿内容も Twitter の tweet 自動投稿のようで、まともに使っていないようです。

目次

きっかけ

Twitter のこの tweet がきっかけです。

 Twitter @kyledrake の tweet

tweet に「10MB limit」とありますが、 現在無料のストレージ容量は 1GB です。

GeoCities（Yahoo! GeoCities）は失われましたが、この流れを Neocities が継承しています。
ここでの Yahoo! GeoCities は Yahoo! JAPAN 提供（2019年3月サービス終了）ではなく、
アメリカ Yahoo! が行っていたサービス（2009年10月終了）です。

この tweet から数日で Neocities が公開されています。

 Making the Web Fun Again | The Neocities Blog

登録

公式トップページの Sign up for free にあるフォームを埋めます。

• Username このユーザー名が公開アドレス https://ユーザー名.neocities.org/ になります。
• Tags 関係するキーワード。英語のみで、日本語は使えません。
• Password ログインはユーザー名・パスワードを使用します。
• Email メールアドレス。 無料プランでは 1 メールアドレスで 1 サイトのみ です。
• Confirm you are human 「私は人間です」を  にして下さい。

過去に使用していたメールアドレスを再使用したい場合、
その時に使っていたアカウント・パスワードを覚えていたら、
それで Sign In すると、サイトを復旧する事ができます。
サブドメインは  設定 から変更可能です。

サイトの編集

Neocities は FTP を使用できません。
無料の場合は Web 上から編集するか、 CLI・API を使用する事になります。

ログイン後  Edit Site から HTML を編集します。

• 文字コード UTF-8 であれば、日本語も直接使用できます。
• Not Found の表示は not_found.html です。 404.html は認識しません。
• アカウント毎にサブドメイン割り当てなので、 robots.txt や favicon などを認識します。
•  Upload でファイルをアップロードできます。
• ファイル一覧の下 Download entire site でサイトの構成ファイルを
  .zip 形式でダウンロードできます。

Activity・ニュースフィード

ログインした後に表示されている表示です。更新をすると反映されます。
右上 アカウント名 のメニューでは Activity でこの表示に戻れます。

これが SNS になっていて、他の Neocities ユーザーと交流が可能です。
コメントはアカウント登録したてだとコメントできません。
2 日以上の更新と登録から 1 週間経過している事がコメントできる条件です。
その間でも他の Web サイトを一覧から参照してそのユーザー名を選ぶと、
そのアカウントのフィードを表示させる事ができ、ここから  Follow ができます。
 Follow を選んで、 Following に変化させた状態になると、
そのアカウントの更新やコメントもフィードに表示されるようになります。

URL を入力して他のアカウントのフィードを確認したい場合は
https://neocities.org/site/ユーザー名 となります。
ユーザー名＝サブドメイン です。( サブドメイン.neocities.org )

Profile

右上 アカウント名 のメニューより Profile を選ぶと、
 Activity・ニュースフィード のうち自分のアカウントのみを表示します。
特に登録したてだと  Activity・ニュースフィード も自分のみで、
表示が表示が似ているので、混同しないようご注意下さい。

右サイドバー Website Stats では最新更新日・登録日が表示されていて、
更に Site Traffic Stats を選ぶと最新 1 週間のアクセス数をグラフで表示します。
2 重になっているのは、上がヒット数、下がビジター数です。

この表示では Tags の表示と共に追加・削除も可能です。
Web サイトの表示に合わせて適切なタグを付けておくと、効果があるかもしれません。

設定

ログイン後右上 Setting からサイトの設定を行えます。

• Manage Sites 「Manage Site Settings」へ入れます。
  サポーターの場合、ここは複数サイトが表示されます。
• Supporter Info  サポーター（有料会員）へ変更できます。
• Change Password パスワードを変更します。ログインに影響があります。
• Change Email メールアドレスと通知を変更します。
• Delete Account アカウントを削除します。
  このメールアドレス・アカウントでの再登録はできません。

サイト設定

Manage Site Settings では、更に次の設定が可能です。

• Profile サイトプロフィールの表示・非表示、IPFS が設定できます。
• Custom Domain  サポーターの場合は独自ドメインを設定できます。
• Change Site Name サイト名.neocities.org の サイト名 を変更します。
  ログインに影響があります。
• Tipping 寄付ボタンの表示を行えます。PayPal・Bitcoin を設定できます。
• API Key API を使用する時の API キーが表示されています。
• 18+ 18 歳以上向けのコンテンツを含めている場合は、これを有効にして下さい。
  Neoctiies のサイト一覧表示で表示されないようになります。
• Delete  サポーターの場合、複数サイトを管理している時は、これでサイトを削除します。

サポーター (有料会員)

サポーターになると複数サイトの作成、独自ドメインの使用などが可能になります。
無料とサポータの違いは次のとおりです。

メールアドレスが異なっていれば、異なるユーザー名で新規作成できますので、
メールアドレスにエイリアスを作成して複数サイトを無料生成する事は可能です。
独自ドメインでの運用はサポーター必須になります。

CLI

多くのファイルを扱っている場合は、CLI を使うのが良いです。
GitHub でいくつかの CLI および API を用いたスクリプトを見つける事ができます。
ただし Windows で正常動作する CLI は限られます。
ここでは Windows でも正常動作を確認できている CLI を紹介しています。

Neocities CLI

公式に CLI が提供されています。

 The Neocities CLI

Ruby をインストールした状態より、次でインストールします。

gem install neocities

2020年12月に Ruby 3.0 が公開されました。
Ruby 3 ではいくつかパッケージのバージョン違いによる表示が表示されますが、
使用は可能である事を確認できています。

あとは Web サイト生成後、 neocities push でアップロードします。
後ろに公開ディレクトリを指定します。 . でカレントディレクトリです。

neocities push .

Hugo は通常 public/ に index.html などを生成します。

🎈 Hugo | ふうせん🎈 FU-SEN

したがって、次の操作になります。

hugo
neocities push public

この CLI は neocities push でファイルを削除しません。
ファイル削除は別途操作が必要です。

はじめて使用する場合、アカウント情報の確認があります。
これは結果として config ファイルに API Key を入れます。
 サイト設定 で確認できる文字列です。
Windows では (ユーザー)\AppData\Local\neocities\config にあります。
この config ファイルの API Key を切り替えて、ユーザーを変更できます。
例えばビルドする場所に次の package.json を生成する事で、
API キーを切り替えて npm run deploy で公開できます。
Windows 向けに制作している事にご注意下さい。

{
  "config": {
    "APIKEY": "API キー"
  },
  "scripts": {
    "deploy": "@echo|set /p=\"%npm_package_config_APIKEY%\" > C:\\Users\\ユーザー名\\AppData\\Local\\neocities\\config & neocities push デプロイ元"
  }
}

Neocel

 kognise/neocel | GitHub

Node.js で作られた CLI です。例えば npm を用いてインストールします。

npm i -g neocel

トークンをコマンドで発行・確認できますが、Web で発行できる API Key に共通なので、
すでに API Key を把握している場合はそのまま Netcel に使用できます。
あとは次のコマンドでデプロイします。
完全に同期し、ファイル削除も行います。しかも公式 CLI より処理が高速です。

neocel -y -t APIキー -d アップロード元

 Windows deployment does not generate folders #4 | GitHub kognise/neocel issues

Windows で使用時に 動作に問題があり、Issues を行ったところ対処していただきました。
Windows でも正常に使用でき、Neocities CLI に代わって推奨できるので、紹介いたしました。

GitHub Actions でデプロイする

GitHub Actions で neocel を使用する場合は次となります。
Settings 内にある Secrets-Actions で NEOCITIES_API_KEY を設定します。
NEOCITIES_API_KEY は API キー です。

.github/workflows/deploy.yaml として、次のファイルを追加します。
必要に応じてビルドコマンドを加えて下さい。
また下層ディレクトリをデプロイする場合は、
neocel 行に -d アップロード元 を加えます。

name: Deploy Website
on: [push]
jobs:
  deploy:
    runs-on: macos-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2-beta
        with:
          node-version: 16
      - run: npm install -g neocel
      - run: cp site/404.html site/not_found.html
      - run: neocel -t ${{ secrets.NEOCITIES_API_KEY }} -y

Q&A

Neocities のサーバはどこにあるのですか？

 The Neocities Anycast CDN

CDN で公開されています。日本からのアクセスは NRT で返ってくるはずです。
NRT - Tokyo, Japan とあるとおり、東京に CDN のエッジサーバがあります。
したがって、レスポンスはとても良いです。日本語サイトでも十分使用できます。

ちなみに NRT は成田空港の空港コードです。
CDN では近くの空港コードが主に採用されています。

SSL 化されていますか？

Neocities は常時 SSL 対応を完了させています。すべて https 表示になります。

 We’re switching to default SSL | The Neocities Blog

サブドメイン.neocities.org は有料のワイルドカード証明書です。
独自ドメインは Let’s Encrypt を適用します。

🎈 Let’s Encrypt | ふうせん🎈 FU-SEN

なお、Neocities は 2018 年の段階で TLS 1.3 を採用済みで、
他にも Brotli 圧縮 など、新しい技術の採用も積極的です。

 We’re switching to default SSL | The Neocities Blog

日本語サブドメインで登録できますか？

Punycode（xn-- ではじまる英数）でユーザー名を登録する事で
日本語.neocities.org で使用する事ができます。
ただし、ユーザー名表示は Punycode の英数表示になります。
サポーターになった場合の独自ドメインも同様に使用可能のようです。

URL を知っている人だけが参照できる Web を制作できますか？

次の対応で URL を知っている人だけが参照できる Web にできます。

• ファイル robots.txt を生成し、次を入れます。
  これにより Google などの検索エンジンで表示されなくなります。

User-agent: *
Disallow: /

• ログイン後 右上 Settings より Manage Site Settings を選び、
  「Disable Site Profile Comments」「Disable Site Profile」の  を外します。
  これにより、Neocities のサイト一覧で表示されなくなります。
  これを有効にしていると、作りたての場合でも
  ログイン直後画面の Sites to Follow で更新毎に表示されます。

• index.html は中身のファイルをリンクしないようにします。
  共有する場合は他の HTML ファイルで生成します。

Not Found を独自の表示にできますか？

対応しています。 not_found.html です。
アカウント生成時に作成されていますので、ファイルを編集して下さい。

現在は 404.html で対応しているサービスが多いですが、
Neocities では 404.html は動作しません。ご注意下さい。

不要なファイルは削除して良いですか？

初期状態にあるファイルのうち
index.html 以外のファイルは削除可能です。

• neocities.png （Neocities 公開当初は cat.png ）
• not_found.html （Not Found 表示）
• style.css

index.html は編集（または API で上書き）して更新して下さい。

ファイルをアップロードしましたが、失敗します。

 Allowed File Types | Neocities

無料会員の場合、生成・アップロードできるファイルの拡張子が制限されています。
 サポーター (有料プラン) では、制限がありません。

画像置き場やダウンロードファイル置き場にできますか？

 Neocities Hotlinking Policy | Neocities

Neocities のポリシーより、外部から画像などをリンクする事は許可されていません。
実際にこの対策がとられていていて、参照によって表示・ダウンロードされません。
Neocities は「Web サイトを公開する場所」なので、ご注意下さい。

上記項目にあるとおり、無料プランでは使用できるファイルの拡張子も制限があり、
特定ファイルはアップロードがそもそもできない仕組みになっています。

これらは公式サイトでは帯域幅や空き容量の節約を理由にあげていますが、
無料で提供しているため、ある程度の悪用対策を行ってあります。
 サポーター (有料プラン) では、これらの制限がありません。

Web ブラウザでは正常に表示されるのですが、Google などの検索結果で文字化けしています。

Neocities では .html ファイルのヘッダを Content-Type: text/html で出力します。
現在多くの Web サービスやサーバは Content-Type: text/html; charset=utf-8 です。
これは GeoCities・Yahoo! GeoCities 時代の Web サイト保存が本来の目的なので、
UTF-8 が定義されていなかった古い Web サイトを考慮しているためと思われます。

.html ファイルで meta タグを用いて使用する文字コードを
charset 明示する事で改善を期待できます。

具体的な例として、文字コードが UTF-8 であれば、<head> の中に次を加えます。

<meta charset="utf-8">

ファイルを更新しましたが、サムネイルが更新されていません。

通常は更新されてから数分でサムネイルが更新されます。
ニュースフィードでの表示は 24 時間おきに更新されますが、
スクリーンショットは常に最新状態を表示します。

ただし、.html ファイルが更新されていても、
<body> 内で変化が発生していない場合、
表示内容は変化していないので、スクリーンキャプチャは更新されません。
あえて任意の文字を追加し一度更新して、すぐ削除して再度更新する事で、
スクリーンキャプチャを促してみるのも手です。
しばらく更新されていなかったサイトが更新された場合、
古いサムネイルが表示され続ける事があるので、
わざと文字を増減させて更新を行う事でキャプチャを促して下さい。

サーバ側のトラブルで全体的に更新されていない場合もあります。
Neocities サイトヘッダの Activity から最近更新されたサイトを確認して
日付が入っているサイトが昨日～今日になっている事を確認して下さい。

フォローなどで表示されているアイコンはどうやって生成するのですか？

フォローなどで表示されているユーザー別の画像は、
index.html のスクリーンショットが縮小されたものです。
Neocities 内でのコミュニティが活発になるようであれば、
目立つデザインの index.html にした専用のアカウントを
用意しておくのも手でしょう。
そのアカウントががナポーターアカウントなら、なお良いです。

削除してしまったサイトを復活させる事はできますか？

実はアカウントを削除しても物理的に削除されていません。
Sign In でユーザー名・パスワードを入力すると、
サイトを復旧できます。完全に削除前の状態に戻せます。
その仕様により、削除したユーザーとメールアドレスは
新規登録で使用できないようになっています。

代わりにユーザー名＝サイト URL を変更する事で
旧サイトを物理的になくすようにするのが理想的です。