ハクソク

世界を動かす技術を、日本語で。

ウェブサイトの作り方 (2024)

93日前原文(lmnt.me)

概要

ウェブサイト作成は本質的にシンプルで、HTML一枚から始められる
CMSやデザイン準備より、まず実際のコンテンツ執筆が重要
RSSフィードの手動作成も簡単で、配信に役立つ
インデックスページやCSSは後回しでOK
継続的な更新と小さな改善が成長の鍵

ウェブサイトはシンプルで良い

  • ウェブサイト作成は難しく考えがちだが、本来はHTMLファイル一つで成立
  • **CSSやCMS（WordPress等）**は必須ではなく、FTPでHTMLをアップロードするだけで公開可能
  • 複雑な準備や設計よりも、まずは一記事書いて公開することが最優先

最初にやるべきこと

  • CMS選び・デザイン設計・ドメイン取得などの準備作業は後回し
  • GitHubリポジトリ作成も不要
  • テキストエディタ（TextEdit等）で最初のブログ記事をHTMLで執筆
    • Markdownや高機能エディタも不要
  • HTML要素のみで構造化し、CSSやdiv、ID・class指定は一切使わないシンプルな記述
  • 「Hello World」や「Lorem Ipsum」ではなく、本当のブログ記事を書くことが重要

ファイルのアップロードと公開

  • HTMLファイル名は記事タイトルに即したものにする（例: how-to-make-a-damn-website.html）
  • ドメインやホスティングがあれば、サーバにblogフォルダを作成しアップロード
  • まだドメインやホスティングがない場合は、取得作業を進める
  • FTPアップロードができれば、実質「公開完了」状態
  • ブラウザでアップロードしたHTMLを確認し、シンプルな状態を楽しむ

最初の一歩が一番難しい

  • 多くの人は準備やデザインに時間をかけがちで、本質的なコンテンツ作成を後回しにしがち
  • 1記事でも公開できれば、それはもう「ウェブサイト」
  • 「工事中」や「準備中」ページを量産するより、まず1つ記事を公開することが大切

RSSフィードの手動作成

  • CSSやインデックスページより、RSSフィード作成を優先推奨
  • XMLファイルを手書きで用意し、RSSリーダーへの配信を実現
  • RSSフィードの基本構成
    • channel要素内にタイトル、リンク、説明、言語、atom:link
    • item要素で**各記事情報（タイトル、公開日、guid、リンク、説明）**を記述
  • 記事本文のHTMLをdescriptionにそのまま記載可能
  • RSSリーダーは独自のスタイルで表示するため、HTMLの素の状態と近い
  • pubDateはGMTや正しいタイムゾーンで24時間表記
  • 画像やメディアは絶対パスで記載
  • feed.xmlをサイトのルートにアップロードし、RSSリーダーで動作確認
  • HTMLに<link rel="alternate" ...>タグを追加し、フィードの存在を明示

インデックスページの作成

  • サイトルートにはblogディレクトリへのリンク、blogディレクトリには記事へのリンク
  • 各ページにタイトル（h1）や説明（p）を追加
  • シンプルなHTMLを維持しつつ、ページ間リンクを整理
  • 3ページ＋RSSフィードで基本構成が完成

ブログ執筆習慣の確立

  • **新しい記事を2つ以上書き、様々なHTML要素（hr、ol、ul、img、video、audio等）**を試す
  • 記事ごとにXMLファイルとインデックスページを更新
  • リンクやフィードの動作確認を怠らない

CSSは少しずつ導入

  • h1、h2、h3、hr、p、strong、em、ol、ulなど、既存記事で使った要素からスタイリング開始
  • フォント、幅、テキストサイズ、色などの基本設定を決める
  • CSSやサイト構成は後から何度でも変更可能
  • 小さなアップデートを繰り返す姿勢が重要

継続して進めること

  • ここまでできたら、あとは好きなだけ記事やページを追加
  • RSSで更新を通知
  • 手動で作るウェブサイトの楽しさや柔軟性を味わう

マニュアル運用のメリットと心構え

  • エンジニア視点では自動化やCMS利用が主流だが、手作業のシンプルさとコントロール感は格別
  • ウェブサイトは「まず作る」ことが最も大切で、細かい部分は後で直せば良い
  • 小さな成功体験の積み重ねが、継続と成長の原動力

Hackerたちの意見

大学院ではこんな感じでやってたよ。自分が受けてた大学院レベルのアルゴリズムのクラスで、別の学生が始めたウェブページを引き継いだんだ。その学生はボランティアでやりすぎちゃったみたいで、変更が必要になったときに、追加の単位が欲しかったから飛びついたんだ。ウェブサイトのCDコピーを持って、自分のホスティングスペースに移したよ。パスワードアクセスを設定して、勉強グループも作った。それからは、教授からの一行のパラグラフを頻繁に入れてた。時々、授業が始まる前に間に合うように送ってくれることもあった。
これは https://plainvanillaweb.com/ に共感するなぁ。これのおかげで、自分のCMSをやめて、ウェブサイトにプレーンHTMLを使うことにしたんだ。
いい投稿だね。ここでシェアしてくれてありがとう。この記事に加えたいのは、個人のウェブサイトは、単に適当に並べられたページの集まりでも全然大丈夫ってこと。すべての個人ウェブサイトがブログである必要はないよね。よく見かけるのが、ブログが必要だと思って、すぐに自分を複雑にしちゃう人たち。そうなると、ツールやプロセスについての質問が増えて、無駄な作業に巻き込まれちゃうことが多い。そういう時間を、実際に投稿や記事、ゲーム、デモなどを書くことに使えたら、数ヶ月後や数年後に振り返って喜べるものができるのに。ウェブサイトの無駄な作業は、ツールやプロセスについて考えるのが好きな人にはいいかもしれないけど、ただ自分の考えを発信したいだけなら、HTMLを直接書くか、お気に入りのテキストフォーマット（MarkdownやAsciiDocなど）から変換して公開する方が有意義だと思う。このテーマには結構こだわりがあって、詳しい話はHNのコメントには長すぎるから、最近書いた投稿のリンクをシェアするね。誰かに価値があればいいなと思ってる： https://susam.net/writing-first-tooling-second.html もっと個人のウェブサイトが増えるといいな、ウェブがもっと多様で面白くなるから。
└
ブログは、あなたの考えをフォローしたい読者にはいいよね、ウェブサイトをチェックしなくても済むし（RSSのおかげで）。でも、適当に並べたシンプルなページの集まりでも、全くないよりはマシだよね…その通り、さっさと書いちゃって、ブログは後からでもいいよ。
└
約1ヶ月前にこの投稿を見つけたんだけど、年代順のブログに反対して、デジタルガーデンを受け入れるべきだって主張してるんだ。アイデアが気に入ったよ。ずっとブログがデフォルトみたいに感じてたけど、ブログなしでページをブラウジングする方がずっと面白いと思う。それに、常に投稿するプレッシャーがなくなるし、コンテンツを追加するのは単にコンテンツを追加するだけだから、最後に更新されたのがいつかなんて関係ない。自分の履歴を見てみたら（これを見つけるために使ったんだけど）、この投稿を読んだ同じ日に、始めたけど放置してたブログを全部削除したよ。編集…皮肉なことに、彼のホームページで「すべての記事」をクリックしたら、年代順のブログだった…少なくとも、ある程度のキュレーションはあるけどね。[0] https://joelhooks.com/digital-garden/
└
だから、妹がウェブサイトを欲しがったとき、私はSubstackを勧めたんだ。彼女はすぐに投稿を始めたよ。
約13年前に始めたブログは、最初は3つの.htmlファイルから始まったんだ。その後、必要に応じてスタイルやRSS、コメントなどが追加された。作るのを乗り越えられれば、次の質問は「何について書けばいいの？」ってことになる。[0] 自分の答えは、ウェブサイトには好きなことを書けばいいってこと。結局、自分のものなんだから。サードパーティのプラットフォームにはない制限がないし、好きなようにページを上下逆さまにすることだってできるよ。[0]: https://idiallo.com/blog/what-should-i-write-about
これが誰に役立つのかはよくわからないな。もしサーバーを持ってるなら、HTMLページを立ち上げるのは簡単だよね。でも、サーバーを持ってる人は、たぶんもうそれを知ってると思う。ほとんどの人はサーバーを持ってないし、そういう「簡単に始める方法」（ホスティングされたWordPress、Cloudflareページ、GitHubページなど）が必要なんじゃないかな。とはいえ、プレーンHTMLから始めるのはいいことだと思う。新しい人には、VMを管理するよりもCloudflareページのようなサーバーレスのセットアップをお勧めするかも。
└
それはさておき、svelteをインストールしたり、CSSを追加するのは全然難しくないよ。
このオーディエンスにはあまり役立たないかもしれないけど、HTMLを学ぶための*絶対初心者*向けのウェブ本を書いたんだ。OPの投稿と同じような精神で作ったよ。https://htmlforpeople.com/
└
ウェブサイトを作るのにHTMLなんて必要ないよ。普通のテキストファイルをホスティングするだけでもいい。私のウェブサイトも何年もそれだけだった。
HTMLを書くのが難しいなんて思わなかったよ。むしろ、妹が苦労してたのはドメインを取得して、サーバーを用意して、DNSをそのサーバーに向けることだった。こういうことは、各ドメインレジストラごとにやり方が違うから、知識がないと理解するのが難しいんだよね。
└
これこそLLMが本当に役立つ例だね。私も初めてそのプロセスを経験したばかりで、助けをもらったよ。
└
そうそう。最近、ローカルフォルダ（index.htmlとか）をCloudflare Pagesに手動でアップロードできることを知ったよ。もちろん、ドメインも売ってくれるしね。
> 「ドメインやホスティングをまだ持ってないなら、今がその準備をする時だよ。残念ながら、ここではいいアドバイスができないけど、めちゃくちゃ面倒で退屈でつまらないことになるって知っておいて。これが現実だから。ここかどこかで、初心者や中級者向けの「コーディング」チュートリアル（プログラミングやマークダウンなどを含む）をバカにした素晴らしいブログ記事を見たことがあるけど、著者は読者がそのテーマや専門用語に深く精通している前提で書いてたんだ。この雰囲気、まさにそれと同じだね。」
「やべぇ、これいいね。」1998年に初めてウェブページを作った時のことを思い出すよ。手作りのインデックスページでね。多分、NotePadを使ってたと思う。すごく簡単だったな。HTMLのガイドを読んでから、その時ハマってた趣味についてのページを一回のセッションで作ったんだ。1時間もかからなかったと思う。多分、ISPが提供してくれたスペースにFTPでアップロードしたんだ。
: https://secretgeek.github.io/html_wysiwyg/html.html