静的サイトを作りたい
静的なサイトを作って生活費のために小銭を稼ぎたいと思っている今日この頃
セイ的と言ってもstaticの方ね、という鉄板ギャグが大ウケしていた現場が懐かしく思う今日この頃
手前、駆け出し者でありますが、興味があるのはWEBアプリの技術
でも現実の社会で、多く求められているのは静的なサイトだったりします。
一時期、WordPressでチャチャット作ったサイトを納品する手法が流行っていましたが、どうもうまくデザインが出来ない。ブロックエディタという代物、本当にイライラする。
解説ページなど見ても、デザインにこだわる場合はCSSの勉強が必要です！とだけ書いてあり、ナンジャコリャー！な状況であったりします。まあ、お手軽CMSですから仕方ない。
試しに作って放置してたWordPress製のマイブログ、頻繁に攻撃にあってメールで知らせてくれる。誰かがadminでアクセスしようとしたよって。
けしからんと思いつつ、私もこのサイトWordPress制だろって思ったら、ログインページにアクセスしたりしてる、、、
ということで、静的サイトを作りたいと題名を書きましたが、目的としては中小企業や個人事業主向けにちょっと凝った名刺目的のHPやLPを作ってあげたいというのが意図するところ。
選択肢
- WordPress
- Dreamweaver
- HTML, CSS, JavaScript直打ち & PHP
- HTML + Bootstrap & PHP
- Nuxt.js
- Hugo
格安運用をするために、XAMPP環境のレンタルサーバーでの運用を想定しています。
1 WordPress
一時期、ホームページ作ります業者でよく使われたCMS
WordPress界隈に足を運ぶとアフィリエイト界隈の人たちがしきりに勧めている印象
SEO対策で色々と手法が確立していたりするからなのかな。
ほとんどのレンタルサーバーは簡単インストール機能がついていて、MySQLとの接続設定もしなくても一瞬で構築できてしまうので簡単お手軽
構築さえできてしまえば、あとはGUI操作でぽちぽち
私も一時期使ったことがありますが、デザインがとてつもなくやりづらい印象
エディタでこだわり出すと融通の効かなさに発狂しそう。
こだわりたければCSSを別で適用する必要あり。
名刺HPやLPなんだからある程度自由にデザインできなくちゃ
気に入ったテンプレートデザインがあって、そのデザインでブログを書くならありですが、名刺HPやLPには不向き
納品後にある程度放置したいので、WordPressだとセキュリティ面もちょっと怖い
2 Dreamweaver
今はAdobeの製品
更新されてないし、高いし、使いこなせなさそうなので除外
3 HTML, CSS, JavaScript直打ち & PHP
フレームワークを使わずに、全部一から静的サイトを作る方法
どういうことをやればいいかの流れはわかるのだが、綺麗なデザインを作り切る自信がない。
無理
一時期、駆け出しの人たちがHTMLを勉強してたら、それはプログラミング言語じゃない！マークアップ言語だ！みたいな論争が起きてましたね。
HTMLとCSSを駆使して、綺麗なサイトを作るWEBデザイン界隈の人たちはすごいと思います。
私にはできない。
4 HTML + Bootstrap & PHP
これも少し前に流行りましたね。
知り合いが業者から納品されたサイトを見てみたら、BootstrapのCDNが利用されていました。
グリッド使えば、お手軽で、レスポンシブルで、誰でも簡単に綺麗なデザインができてしまいます。みんな同じデザインですが、、、
今は、Tailwind CSSでしっかりとオリジナルのデザインを作ろうという流れが強いみたいですね。
なので、これも無し
5 Nuxt.js
VueベースのJavaScriptフレームワーク
静的サイトを簡単にgenerateできる。ちょっと感動しました。
JavaScriptフレームワークは食わず嫌いしていたので、全然知識がなく、静的サイトの作成前に勉強の時間を要してしまう。
使ってみたいな、と思いつつも泣く泣く除外
6 Hugo
最近、見つけてこれだ！と思った技術
静的サイトジェネレーターとも呼ばれるもの。
当面、駆け出し者の私の相棒は静的サイトジェネレーターになりそうです。
Hugoの公式で用意されているテーマを使って静的サイトを作ることにします。
Hugoの使い方はまだ別の記事で書きます。
終わりに
グーグルも最近はサイトの表示速度の速さなどを重視しているようです。
環境に配慮してクローラーが来る回数も減るやらなんやら。
だから、WordPress全盛期のように数多のプラグインを駆使して、クローラーにサイトの更新情報を教えたりするのがそこまで効果的でなくなるのかな？