---
title: オタク、気軽にホームページを生やそう
tags: 
author: [uriboooooon](https://docswell.com/user/rkkmkg)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/LELP36XV7R.jpg?width=480
description: 簡単なフロントエンドのススメ
published: September 30, 24
canonical: https://docswell.com/s/rkkmkg/ZYD1E3-2024-09-30-205007
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/LELP36XV7R.jpg)

オタク、
気軽にホームページを作ろう


# Page. 2

![Page Image](https://bcdn.docswell.com/page/4JM4D5LN7W.jpg)

突然ですが何か物を使えることに
ステータスを感じることってありますよね？


# Page. 3

![Page Image](https://bcdn.docswell.com/page/PJRW43K479.jpg)

一家族に一つのマイホーム


# Page. 4

![Page Image](https://bcdn.docswell.com/page/PEXP24LZ7X.jpg)

一人一台のマイカー


# Page. 5

![Page Image](https://bcdn.docswell.com/page/3EKDMZLVJD.jpg)

1オタク2ベッド
※おでかけ用語です


# Page. 6

![Page Image](https://bcdn.docswell.com/page/L73RYD6QJ5.jpg)

そんなことを思っていたところ、こんなツイートを見かけました
確かに！！！！！！！！！！


# Page. 7

![Page Image](https://bcdn.docswell.com/page/87DY5PVW7G.jpg)

1オタク1ホームページ


# Page. 8

![Page Image](https://bcdn.docswell.com/page/VJP6GNVXE8.jpg)

というわけでみんな気軽に
ホームページを作ろう


# Page. 9

![Page Image](https://bcdn.docswell.com/page/2EV36KZ37Q.jpg)

でもお高いんでしょう？(サーバー代金とか)
しかもスキルとかもかなり必要そう...
バックエンド
サーバー
デザイン
フロントエンド


# Page. 10

![Page Image](https://bcdn.docswell.com/page/57G3NQ4YJL.jpg)

大丈夫！こんなお悩みなら解決できます
• サーバーにお金をかけたくない
• ある程度機能を持たせたい
• コードをあまり書きたくない
• Markdownで書きたい
• HTML、CSS書きたくない
デザインがわからない


# Page. 11

![Page Image](https://bcdn.docswell.com/page/4EQ5QKG6JP.jpg)

サーバーにお金をかけたくない
• サーバー
• バックエンド
• フロントエンド
• デザイン
※赤文字は対応箇所です


# Page. 12

![Page Image](https://bcdn.docswell.com/page/KJ49NP5M71.jpg)

個人ホームページなら無料で作成可能
• HtmlとCSSを書いてデプロイコマンドを打つだけ！
• Firebaseとかならgithubと連携して初期設定を全部やってくれ
ます


# Page. 13

![Page Image](https://bcdn.docswell.com/page/LE1K59WYJG.jpg)

ある程度機能を持たせたい
• サーバー
• バックエンド
• フロントエンド
• デザイン


# Page. 14

![Page Image](https://bcdn.docswell.com/page/GEWD5Q61J2.jpg)

Baasを使おう
• 主にできること
• データベースの処理
• 認証
• サーバーレス関数の使用


# Page. 15

![Page Image](https://bcdn.docswell.com/page/47ZGNWYXE3.jpg)

コードをあまり書きたくない
• サーバー
• バックエンド
• フロントエンド
• デザイン


# Page. 16

![Page Image](https://bcdn.docswell.com/page/YJ6Y8GDP7V.jpg)

CSSフレームワークを使おう
• 完成されたwebページを構成する部品を簡単に呼び出し
• こんなのが簡単に作れる
• 有名なのはbootstrap
• 最近はtailwindCSSが流行っているとか


# Page. 17

![Page Image](https://bcdn.docswell.com/page/GJ5G9V3PJ4.jpg)

Markdownで書きたい
• サーバー
• バックエンド
• フロントエンド
• デザイン


# Page. 18

![Page Image](https://bcdn.docswell.com/page/LE3RYD6675.jpg)

SGGやheadlessCMSを使おう
headlessCMS
• SGG(静的サイトジェネレータ)
• ウェブサイトを作るためのフレームワーク
• APIからMarkdownを呼び出す
• 有名なもの
• Nextjs
• Hugo
• Nuxtjs
• Astro
呼び出し
• headlessCMS
• ここにMarkdownファイルを置いておく
• 日本ではmicroCMSが有名
サイト
詳しくはJAMSTACK(JavaScript 、API、Markup)で調べてみてくださ
い


# Page. 19

![Page Image](https://bcdn.docswell.com/page/8EDY5PVMEG.jpg)

HTML、CSS書きたくない
デザインがわからない
• サーバー
• バックエンド
• フロントエンド
• デザイン


# Page. 20

![Page Image](https://bcdn.docswell.com/page/V7P6GNVQJ8.jpg)

SSGのThemeを使おう
• SGGにはTheme(あらかじめ洗練されたデザインのテンプレ)が
あります
• 個人ページ用や自作ブログまで揃っています
Hugo Themes
Astro Themes


# Page. 21

![Page Image](https://bcdn.docswell.com/page/2JV36KZPEQ.jpg)

ホームページ、
意外と簡単に生やせます！
私はfirebase+bootstrap5で作成してます
(流行の技術ではないけどすぐにできました)
もっと便利にやる方法があるかもなので
ほかにも方法を探してみてください！