初心者でも大丈夫!【ホームページ作成】 無料に? - 自分で作る

目次

ホームページ作成

今の時代、新しく何かを始めると必ずホームページが必要になってくると思います。

開業や起業をすると、自社や自分のお店のホームページを作成しようと思う方が多いと思いますが、どこかに依頼しようとすると高すぎてびっくりしますよね。

今どき、ちょっとしたホームページで多額の請求をする制作会社はもう時代遅れだと思います。

きっと大したものが上がってこないでしょう。



ホームページ作成サービスを使う

では、どうするか。

おそらくご自身で開業される方は、すでに色々と調べており、HTMLやCSS、JSなど、専門的な知識がなくても作成できるウェブサービスが多数あることもご存知かと思います。


最近人気がありそうなのは、以下の2つでしょうか。

これらのサービスは、web上のツールで操作していくと、ページが作成できるというような内容です。



メリット


デメリット

メリットももちろんたくさんあります。試しに触ってみるといいかもしれませんが、デメリットもやはりいくつかあります。 おそらくやればやるほどよくが出てきてしまいますので、結局有料にするはずです!というのが、こういうサービス会社の思惑ですよね。正直。

自分でやろう

ということで、自分でやったほうがいいんです。無料で公開する方法はたくさんあります。自分でやらない限り、自由はありませんw これからの時代、ITとかwebは何をやるにも必ず関わってくるので、知識を得て損することは一切無いはずです。

最初はちょっと抵抗があったり難しいと感じるかもしれません。

ただ何事にも、最初から何でもできたら苦労しません。勉強だと思ってやってみましょう。

では、僕のおすすめする方法をご紹介させていただきたいと思います。


概要

  1. 少しwebの仕組みを勉強する
  2. 自身のPCで環境を構築する
  3. 静的サイトジェネレーターを使って、Markdown記法で記事(ページ)を作成する
  4. github等を使って公開する


webの仕組みを知る

下記の記事で記載してます。

ホームページ作成 - お金をかけずに作る方法をご紹介!webの仕組み

今の時代、何をするにも(お店を開業、キャンペーン開始等)必ずホームページ等webサイトが必須な世の中なことは当然ご周知の通りだと思います。僕はたまたまエンジニアだったので、自らの作成が可能でしたが、 .....


自分のPCで環境構築する

まず、自分のPCで自分でホームページを作成するために、必要なものをインストールして使えるよう整えます。 後で使う、静的サイトジェネレーターを使うために、npm/node.jsをインストールします。

その前に、Node.jsってなに?って方は下記の記事をチェックしてくださいね。

初心者向け!Node.jsとは

Node.jsとはサーバサイドで動かすことのできるJavascriptです。Javascriptは元々ブラウザ上で動く言語ですが、Node.jsを使うメリットや初心者向けに、Node.jsがどんなものなのかを紹介します。


それでは環境を構築して行こうと思います。

Macの場合

Node.js を Macへインストール 環境構築する

サーバーサイドで実行できるJavascript環境のNode.jsですが、サーバーを用意する必要はなく、Macがあれば簡単にインストールし、環境構築が可能です。その方法をコマンドを交えてご紹介したいと思います。



Windowsの場合

Windows版 Node.js環境構築方法まとめ


hugoやhexoという静的サイトジェネレーターを使う

hugo、hexoなどの静的サイトジェネレーターを使うと、簡単にhtmlを作成することが可能です。

サイトのテーマが多数あるので、自分のイメージに近いものを選んでみるといいと思います。

HEXOを使って爆速でブログを立ち上げた話

Markdown形式で書かれた記事を、静的WEbページとしてGenerateしてくれるフレームワークです。似たようなもので、JekyllやOctopress、Pelicanなどがありますが、HEXOは中国圏の人が作ったようなので、.....


hugo を使って爆速でブログ・サイトを作る

新たに記事投稿型の webサイトを構築しようと思い、hexoでも良かったんですが、せっかくなら使ったことのないFrameworkを使いたいと思い、今回は、多言語対応にも強い、GO言語で書かれたhugoを使ってみることにしました。 .....



Markdown記法を知る

Markdown(マークダウン)は文章を記述するための記法(マークアップ言語)です。

これは、HTML文書へ変換できるフォーマットとして開発された言語です。

要するにmarkdownがわかれば、めんどくさいHTMLを書かなくてもOKです(だからといって、HTMLを知らなくていいというわけではありません。知っていたほうが絶対にいいのです)。

マークダウン記法

Markdown記法 サンプル集


Github上で公開する

【初心者向け】Github pagesでwebページを公開する方法


まとめ

いかがでしたか?環境さえ構築してしまえば、あとはMarkdownでページを作るだけですね!

もし細かいところ等、気になる部分、わからないところがあれば、コメントやTwitter等でお気軽に!

U-chan ( Nobuyuki Ukai )

学生時代は建築やデザインを専攻していたが、Yahoo!Japanにエンジニアとして運良く入社し、2年半で波情報を配信する波伝説に転職。3年後、Yahoo!時代の先輩の立ち上げたベンチャーに転職。数年後、伊豆下田に移住し、ゲストハウスを開業しながらリモートでエンジニアを続けたが、焼肉店の開業とともに株式会社UKAIを立ち上げ、法人成り。その後、カフェとゲストハウスをもう一軒開業し、現在は焼肉店、カフェ、ゲストハウス2件目を運営。今季は自社Webサイトの立ち上げ予定!

comments powered by Disqus