プログラミングを使って無料でwebサイトやブログを作る方法~広告を貼るまでの流れ~

無料でwebアプリケーション(webサイト)を作る流れを書いています。

はじめに

僕は「Hexo」という静的サイトジェネレーターを使ってこのブログを書いています。
いきなり難しい言葉が出ましたが、静的サイトジェネレーターが何かなどは知らなくてもサイトは作れます。
これを使うメリットとデメリットは以下の通りです。

メリット

  1. 無料でできる
  2. サイトが早く開く
  3. プログラミングの勉強になる
  4. コードを書くので、直接サイトの設定を変更できる

それぞれ説明します。
有料のサービスに加入するというようなことはなく、無料でできます
サイトが早く開くとページを見てもらえる可能性が上がるのでメリットです。
コードを書くのでプログラミング初心者におすすめです。
コードを少し変えるだけで、見た目やサイトの情報を編集できます。

デメリット

  1. コードの書き方を一部覚える必要がある
  2. 直感的な操作が難しい
  3. 慣れるまで時間がかかる

それぞれ説明します。
HTMLやCSS、Markdownなどを使いますが、それらを覚える必要が出てきます。わからなくなったら調べるというのを繰り返していれば自然と覚えれます。
すべてコードで作るので、画像をドラッグして貼るみたいなことはできません。
最初のほうは慣れないので、WordPressなどを使うより大変ですが、慣れれば簡単にできます。

これからざっくりと流れを説明していきます。

広告

Hexoの準備

まずは前章でも触れた「Hexo」とやらをPCにダウンロードする必要があります。
以下のサイトで解説をしています。

記事を書く

hexoは「マークダウン記法」と「htmlコーディング」のどちらかで記事を書くことになります。
これらはリンクやタイトルを含む文章を書くために使います。どちらも少々覚えないといけないコードや書き方があります。

「マークダウン」はプログラミングをやったことがない人でも扱いやすく、htmlで書くよりコードが見やすくなります(あまり使ったことがないので、詳しいことはわかりませんが、、、)。
「html」はプログラミングを始めたい人がまず扱うマークアップ言語です。少々複雑なところもありますが、理解できれば文字の装飾などが簡単にできるようになります。僕はこの方法を使っているので、これから出していく記事でもhtmlの使い方を説明していきます。

随時、これについての記事を書いていきます。

文字やサイトのデザインの変更

「css」と呼ばれるスタイルシート言語を使って、文字やサイトのデザインを作っていきます。こちらはどんな装飾がしたいかをネットで検索すれば、コードの書き方が大体は出てきます。なので、よく使う装飾は自然と覚えます。
こちらも随時記事を出していきます。

広告

作ったサイトを公開

Githubと呼ばれるソフトウェア開発のために使われるサイトがあるのですが、これをサーバー(サイトのデータを保存する場所)として使います。ここに自分のpcで作ったサイトのデータを入れます。
Hexoはこれをコマンド一つで終わらせられます。便利ですね。
サイトマップなど検索に引っ掛かりやすくするためのファイルも、コマンドで作っていきます。

リンクの発行

サイトのリンクを作ります。ここでは僕が使っている「お名前ドットコム」を使ったリンクの発行の仕方を解説していくことになると思います。

広告を貼る

広告を貼って収益化を図ります。アフィリエイトってやつですね。僕は「もしもアフィリエイト」というサイトで広告を選んで、自分のサイトに貼っています。

広告

最後に

このような流れで自分のサイトやブログを作っていきます。これから具体的な方法を記事にしていきたいと思っているので、少しでも参考にしていただけたら嬉しいです。