現代は、誰でもSNSやブログで発信ができるようになりました。
　ただ、ほとんどのSNSやブログでは、文章と写真の掲載と、外部資料紹介のリンク設定まで。

　そこで、自分が作ったいろいろな文書（Word,　Excel、　パワーポイント、PDFなど）を公開するためには、それらを置くことができるサーバーが必要。

　Google Drive　や　OneNoteの外部共有設定も不可能ではないが、扱いが面倒。

　それに対して、個人でサーバー契約するとごく安価で個人のバックアップ用や公開用のファイル保管庫に使えます。
　例えば、lolipopだと3年契約では月99円で契約でき１２０Gを利用でき、手作りHPも作成し公開できる。
　付随サービスとして　メールアドレス作成・利用、MLやメルマガ配信（200名まで）も。
　必要なのは、PC、ネット接続できる（Wifi）環境、メール、連絡できる電話番号、サブスク支払い用クレジットカード、管理用フリーソフト群。

　学者・研究者が、大学や研究所など所属団体のHPに掲載した論文・随想・教育用資料などは、退職などで抹消されることがよくある。
　学問成果の消滅ともいえる事態だ。それが個人の研究成果なら個人で公開用の図書館を持つという発想があってもよいのではないか？
　個人の私費出版書籍という方法もあるが手続きは大変だ。公開済みの学術成果ならば個人図書館として公開できる資料を個人契約のサーバー利用しHPにすることで、学術知識や教育資料を世に残すことも十分に意義があるのではないだろうか？

WordPress

　月額3倍以上だとWordPressも利用できるようになる。
　WordPressは、実は内容ゼロでもシステム導入だけで1万ファイルもある巨大システムで、内容を入れるデータベースと連動。
　大きなデザインはテーマ（有料や無料あり）というお仕着せモデルを選択導入し、そのデザイン枠の中で利用する。自分の自由になる部分は案外少ない。
　さらに1万もあるファイルには、多数のバグが潜んでいてそれらを攻撃する者もネットで多数。攻撃されつぶされる事例も多い。
　WordPress利用するときは、必ずセキュリティツールを導入（無料　SiteGuardなど）し、ログインURLを変更し、複雑なPWにして、さらにロボット拒否する仕掛け（図表示し文字入力など）と、攻撃者がよく利用するXMLRPC防御（XMLRPC拒否）などのセキュリティ設定が必要だ。

手作りHP

　一方、やってみると解るが　手作りHP作成は意外に簡単だ。しかも簡素な分、攻撃される恐れが少ない。
　サーバーログインするIDとPW管理がしっかりしていれば、攻撃される可能性はほとんどないのだ。
　作成したHPやファイルをサーバーに入れておけば、無料ブログやSNSや会社・学会の投稿でリンクすることも可能だ。
　知人にだけ、ファイルのURLを教えれば、そのファイルを交換することもできる。

　今のHTML5という仕様では、HPの作り方は驚くほど簡単。

　CSSというHPのデザイン部分は、AIのGeminiなどに作成依頼すると要望反映して、1秒かからず作ってくれる。
　内容部分は、テキストファイルだからエディターで作れる。
　世の多くのHPは、表示の陰に潜むデザイン・装飾・仕掛け部分が巨大だが、簡素な作り方ならそれら全て不要。
　文章・写真・テーブル・リンクだけで構成できる。
　

手作りHP作成に必要なツールは下記だけ、フリーソフト利用がお勧め

  • テキストエディタ　　notepad++　推奨　HTMLコード管理が容易、対応タグ表示、構造解析機能
  • 外部ブラウザで表示　　notepadは、Chromeなどを利用できる
  • FTP　ファイルをサーバーに送る、WinSCPが便利。　アマゾンが標準採用
  • 使えるなら、Visual Studio Codeも　便利、色選択機能は使える

無料のホームページ作成サービス利用すると

　世に多く自分でノーコードで作成・公開できるが、デメリットも
　・自由度や機能性が劣る
　・独自ドメインが使えない
　・広告表示される

手作りHPを作るのに必要な知識

　中身に相当するHTMLの作り方は、HTML５ではデザイン部品がブロック化され配置指示だけで驚くほど簡潔。
　プログラム作成経験ありエディタ使える人なら容易。
　作り方を紹介するサイトから一部を引用でご紹介。

https://qiita.com/thirai67/items/f31276bc4296ab710141
　作成者　@thirai67(hirai tatsuhiko)

HTML bodyの基本構成

最終更新日  投稿日 2023年05月16日

Webコンテンツの区画の整理

　WebページのコンテンツはHTMLのbody要素内にhタグやpタグをそのまま利用して記述することができる．しかし，コンテンツが複雑になり，要素の数が増えるとCSSやJSの実装が難しくなる場合がある．このような場合は，Webページの区画整理を行うことによって，文書構造をわかりやすくできる．

モダンなWebサイトの基本構造

モダンなWebサイトの基本構造として以下の３つのエリアで構成されることが多く，HTMLで記述する際も同様に分ける必要がある．

  • ヘッダーエリア
  • メインコンテンツエリア
  • フッターエリア

このHTMLのタグがこれです。簡潔ですね。これが下記のレイアウトに対応しています。
それぞれの部分に、さらに文章な中身を入れ込んでいきます。

区画整理に利用されるタグ

HTML5(HTMLの改訂第5番)から登場した新しいタグを利用することによってコンテンツ内の整理がしやすくなった．コンテンツの整理に使用するため，全てbody要素内で使われる．

１．header
　　Webサイトにおけるヘッダーエリアを明示するタグ．
２．nav
　　NavはWebサイト内でナビゲーションリンクであることを明示するタグ．
　　ナビゲーションリンクとはページ内の指定部分や他ページへの誘導を行うもの
３．main
　　HTML文書内の主要コンテンツであることを明示し，メインコンテンツエリアを担当するタグ．同一タグ内に１つしか使用することができない．
４．section
　　Webサイト内で文章のまとまりを明示するタグ．基本的に小要素に見出し( <h1>〜<h6> タグ)を持つことが推奨されている．
５．article
　　ブログ記事のように自己完結するコンテンツを明示する． <article> タグは子要素に見出しを含む形で記述する． <article> タグに <article> タグを配置することも可能
６．aside
　　サイドバーのように補助的なコンテンツを明示するタグ．広告，人気記事，新着記事，SNSシェアボタンなどのコンテンツを含んだ形で使用する．
７．footer
　　Webサイト内のフッターエリアを明示するタグ．コピーライトなどを書くのが一般的．