folder基本を知りたい

創作・同人系個人サイトの作り方!サーバー契約からサイト公開までの全手順

創作・同人系個人サイトの作り方!サーバー契約からサイト公開までの全手順

創作・同人系個人サイトの作り方!サーバー契約からサイト公開までの全手順 - https://do.gt-gt.org/how-to-make-my-site/

今はSNSでも気軽に作品を公開できる時代ですが、個人サイトには個人サイトの魅力があります。これから初めてサイトを作る方・作りたいと思っている方も少なくないでしょう。

そこで、初めての方でも迷わずサイトを作れるように、HTMLテンプレートを使ってサイトを制作する場合の、サーバーを借りてから公開するまでの手順をまとめました

なお、サイトを作る方法はこの記事で紹介するもの以外にも、主に2つあります。もしこの記事を読んで「自分にはできなさそうだ…」「思ってたより面倒くさそう」と思ったら、別の方法も検討してみてください。

サーバーをレンタルしよう

まずはサーバーがなければ何も始まりません。無料のサービスもありますので、とりあえずサーバーを借りてみましょう。

そもそもサーバーって?

サーバーとは、インターネット上の土地のようなものです。例えば、新しくお店を開いたり、家を建てたりするには土地が必要ですよね。それと同じで、ネット上にサイトを公開するにはまずサーバーを確保する必要があります。

土地に「広さ」「利便性」「地域色」「値段」がいろいろあるように、サーバーにも「容量」「使えるプログラム」「利用料金(無料のものもあります)」など、いろいろな特色があります。

創作・同人サイトで使えそうなサーバーをまとめた記事がありますので、参考にしてください。

試しにファイルをアップロードしてみよう

サーバーを借りたら、まず試しに自分でHTMLファイルを作り、アップロードしてみましょう。

パソコンに付属のメモ帳アプリを開き、適当な文字列を打ち込んで、「index.html」という名前で保存して下さい。

訪問者がサイトにアクセスしたとき、最初に参照されるのがindex.htmlです。「http://xxx.xxx.jp/」というURLへジャンプしたときに表示されるページは、「http://xxx.xxx.jp/index.html」と同じで、アドレスの「index.html」の部分が省略して表示されています。これはインターネット上で共通のルールなので、必ず「index.html」と名付けたファイルをトップページとして作りましょう。サイト内に「index.html」がない場合、セキュリティ上の問題が出てくる場合もあります。

はじめてのサイト作り
iPadアプリ「Textastic」で打ち込んでいます

保存したら、それをサーバーにアップロードします。

たいていのレンタルサーバーサービスでは、管理画面にログインすると「FTPアップロード」とか「ファイルマネージャ」みたいな名前で、サーバー上にファイルをアップロードするツールが用意されています。ここは、サービスによって違うので、分からなければ「サーバー名+ファイルアップロード」などで検索し、調べてみてください。

アップロードしたら、自分のサイトに割り当てられたアドレスに、ブラウザからアクセスしてみてください。index.htmlに打ち込んだ文字列が表示されていたらOKです。

はじめてのindex.html
サイト作りの第一歩です

こんな感じで、HTMLファイルを編集してサイトを作っていくわけですが、ただ文字列を打ち込んでいくだけではサイトは形になりません。HTMLというマークアップ言語のルールに沿って制作しなければ、ただ黒い文字が羅列しているだけの味気ないサイトになってしまうのです。

かといって、素人がいきなりHTMLの書き方を勉強しようとすると、きれいなサイトを作れるようにまでに多大な時間がかかってしまいます。そこで登場するのがHTMLテンプレートです。

HTMLファイル一式を用意しよう

HTMLテンプレートとは、あらかじめ完成形として整えられたHTMLファイル一式のことです。すでにデザインが出来上がっているので、HTML言語の使い方をよく知らない素人でも、サイト名や文章を自分で差し替えるだけで、さほど時間をかけずにオリジナルのサイトを作ることができます。

テンプレートは当サイトでも配布していますし、他にもテンプレート配布サイトがいくつかあります。どれを使うべきというのはないので、デザインが好みのものを探してみてください!

少しアドバイスするなら、慣れないうちは複雑なデザインのものは避けるのが無難です。例えば当サイトでいうと「深海」は、パララックスという機能をつけるためにいろいろと作り込んでいるため、初心者のうちは触らないほうがいいかも。アニメーションが少なく、シンプル・ベーシックなデザインのテンプレートから始めましょう。

お気に入りのテンプレートが見つかったら、必要な箇所を編集し、自分のサイトとして仕上げていきます。テンプレート編集の方法とコツは、以下にまとめています。

編集中のHTMLファイルは、サーバーにアップロードしなくても、動作をブラウザから確認することができます。確認したいHTMLファイルを右クリック>開く>ブラウザを選択すると、お使いのブラウザで実際の表示を確認することができます。

ファイルをサーバーにアップロードしなくてもブラウザ表示が確認できます
ファイルをサーバーにアップロードしなくてもブラウザ表示が確認できます

ミスを防ぐため、少しずつ確認しながら編集を進めていきましょう。

さあ、テンプレートの編集が終われば、もう公開は目前です。張り切っていきましょう!

サーバーへアップロードしよう

サイトが形になったら、いよいよサーバーへアップロードします。

大量のファイルをアップロードするときは、サーバーの管理画面からではなく、専用のツールを使ってアップロードすることをオススメします。

無料で使える有名なソフトがFFFTP、FileZillaです。私はFFFTPを使っています。

サーバーの管理画面からサーバー名やパスワードを確認し、これらのソフトに入力設定すれば、ローカルフォルダからファイルを一括でアップロードできるようになります。詳しい使い方は各自で調べてみてください。

アップロードが完了したら、早速ブラウザからサイトにアクセスしてみましょう!意図した通りに表示されていれば、サイト作りは終了です。あとはコンテンツが増やし、サイトを更新していきましょう。やったね!

おわりに

慣れないうちは大変ですが、サイト作りはとても楽しく、取り組みがいのある趣味です。ぜひ、お気に入りの飲み物でもそばに用意して、もくもくと取り組んでみてください。

もし、分からないことがあったり、どこかでつまづいたときは、GoogleやYahoo!などの検索エンジンに頼ってみましょう。検索エンジンは情報の宝庫ですので、きっと解決策が見つかるはず。

サーバーまわりの質問にはお応えできませんが、テンプレート編集に関する質問であれば、当サイトでも受け付けています。困ったときはご活用ください。

あなたのサイト作りが楽しいものになりますように!

この記事を書いた人

ガタガタ

このサイトと、このサイトの掲載記事のほとんどと、このサイトで配布しているプログラムやテンプレートのすべてを作った人。絵を描いたり、文章を書いたりして暮らしています。

関連記事

SSLって何?個人の運営する創作・同人サイトには必要?
folder基本を知りたい favorite 39

SSLって何?個人の運営する創作・同人サイトには必要?

令和の今だからこそ、個人の創作・同人サイト制作をおススメしたい8つの理由
folder基本を知りたい favorite 260

令和の今だからこそ、個人の創作・同人サイト制作をおススメしたい8つの理由

個人サイトを無料で作る方法!無料レンタルサーバーやオススメサービスを紹介
folder基本を知りたい favorite 25

個人サイトを無料で作る方法!無料レンタルサーバーやオススメサービスを紹介

創作・同人系個人サイトを訪問するときに気を付けたいこと
folder基本を知りたい favorite 226

創作・同人系個人サイトを訪問するときに気を付けたいこと

個人サイトで独自ドメインを使おう!ドメイン取得のメリットとオススメ取得サービス
folder基本を知りたい favorite 47

個人サイトで独自ドメインを使おう!ドメイン取得のメリットとオススメ取得サービス

個人サイトを作りたい!HTMLテンプレートとWordPress、どっちで作ればいい?
folder基本を知りたい favorite 27

個人サイトを作りたい!HTMLテンプレートとWordPress、どっちで作ればいい?