このブログはGo言語（Golang）ベースの静的サイトジェネレータHugoで構築しています。 Go言語（Golang）はこれまで全然触れたことがなかったのですが、Hugoは 既存テーマをベースにscssやhtmlを柔軟に変更できる 好みのエディタにてMarkdown形式で記事が書ける ビルドが高速 ウェブサイトの表示が高速 Reactベースではない（これについては後述） Goへの不慣れをそんなに気にしなくて良さげ という魅力的なポイント満載だったので、とりあえず手を出してみたら結構私にマッチしていました。 ちなみに もう一つのブログ はWordpressで構築しておりまして、 まあWordpressにも良い点は色々とあるのですが、記事を書くにはまずダッシュボードにいちいちログインする必要があるのが煩わしく、 そのダッシュボードの動作が何かと重いし、サイトの表示も遅い（←それはたぶん写真の数が多すぎるからだ）。 Wordpress本体やプラグインのアップデートがやたら多く、脆弱性も度々報告されていてなんだかなー・・・とだんだんと不満が溜まっていたところだったのです。 （でもお仕事ではWordpressから離れられないので、情報収集のためにもWordpressサイトの運営はこれからも続けるつもりです。） 静的サイトジェネレータとは 静的サイトジェネレータ（Static Site Generator）、略してSSGは、静的サイトを高速でビルドしてくれるツールです。 静的サイトについては こちら で特徴を挙げています。 SSGで有名どころなのは Hugo（Goベース） Next.js（Reactベース） Gatsby（Reactベース） Jekyll（Rubyベース） など。 上の3つはよく見聞きする気がします。 今回はHugoを採用しましたが、React（＝Javascriptライブラリ）ベースのNext.jsやGatsbyも試したことがありまして、なかなか思った通りにならないのでイラっとして途中でやめてしまいました。 Hugoが使いこなせてきたら、また手をつけてみるつもりです。 Hugoでの制作環境 前述のとおり、静的サイトジェネレータHugoはGo言語（Golang）で開発されたフレームワークです。 Hugo公式サイト(英語版) Hugo公式サイトは日本語版が無く、個人で日本語訳サイトを作ってくれている方がいるようです。（ありがたい。） Go & Hugo ドキュメント Hugoとは Hugoドキュメントの日本語翻訳プロジェクト 私はWindows環境なのでWindows上のことしか書けませんが、まずローカル環境で静的サイトが出来るまでの流れを大まかにいうと Goをインストール Git環境がなければインストール Gitから最新のHugoをインストール Hugoの実行環境にpathを通す サイトを作りたいフォルダでWindows PowerShellを起動 Windows PowerShellで新規サイトを作るコマンドを実行 好きなテーマをダウンロードして必要なファイルやフォルダを配置 SCSSやHTMLなどを自分好みに変更 DRAFTモードでMarkdown形式の記事を書く Windows PowerShellでビルドコマンド実行 Windows PowerShellに表示されたアドレスをローカル環境のブラウザで確認 って感じでしょうか。たぶん他にもやり方はあって、もっとスマートな流れで出来るかもしれませんが、私はこんな感じで進めました。 Windows PowerShellはディレクトリ移動やファイル削除、フォルダ削除が出来る程度の知識で大丈夫です。なにせHugoでよく使うコマンドはそんなに多くないので。 広告 Windows PowerShell超入門［4.0対応］【電子書籍】[ 新丈 径 ] 楽天で購入 PowerShellの基本が分かります！ Windows PowerShell超入門［4.

ウェブサイトは大まかに静的サイトと動的サイトに分類されます。 それぞれ作り方や見せ方が違い、メリット・デメリットもあるので、ウェブサイトの目的や運営方法に照らし合わせてどちらを採用すれば良いか考慮する必要があります。 静的サイトと動的サイト、それぞれの特徴を羅列してみました。 （※ちょっとウェブサイト制作をかじっているレベルの人向けの記事です。） 静的サイトとは HTMLやCSS、Javascript、画像ファイルなどの静的ファイルで構成される。 全ての静的ファイルをWebサーバーに配置しておくと、クライアントがブラウザからリクエストしたとおりのページがWebサーバーから配信されブラウザに表示される。 クライアントのブラウザに表示されるまでの過程でサーバー上でプログラムが実行されることはなく、データベースへのアクセスもない。 動きのある処理があったとしてもクライアントのブラウザ上で実行されているだけ。 静的サイトの仕組み（いろいろ端折ってます） どのクライアントからのリクエストでも配信されるページの内容・デザインは同じ。 小規模サイトであれば全て手作業で構築することも可能だが、ファイル管理・更新管理が煩雑になりやすい。 静的サイトジェネレータやヘッドレスCMSを利用することで構築・管理がラクにできる。 サーバーにファイルを配置すればいいだけなのでセットアップがラク。 ランディングページや会社紹介ページなど内容変更がほとんどないサイト向き。 プログラムを実行するサーバーやデータベースは不要なのでランニングコストは抑えられるが、知識がある人しか保守ができないので変更が必要なときに作業コストがかかる。 軽量で高速表示が可能。(ただしサイト内容による。) 単純な仕組みでオープンな構造なのでセキュリティ面で比較的安全と言われているが、内容が書き換えられたり悪意のある別サイトに誘導されることもあるので注意は必要。 ちなみにこのブログは静的サイトジェネレータ Hugoで構築しています。 動的サイトとは WebアプリケーションサーバーでPHP・Rubyなどの処理プログラムが実行され、データベースへのアクセスもある。 動的サイトの仕組み（いろいろ端折ってます） クライアントからのリクエストに応じてサーバーでプログラム処理された結果が反映されたページが配信される（プログラム制御で表示内容が動的。） 頻繁に内容が変わる情報配信サイトやECサイト向き。ログインユーザーに応じて表示内容を変えられるので会員制サイトにも向いている。 処理プログラムやデータベースの脆弱性をついた攻撃で情報漏洩もあり得るのでセキュリティ対策が重要。 CMS（Contents Management System）といわれる仕組みで構築すれば、知識がない人でもクライアント環境からサイト内容を更新できる。 環境構築（サーバー、データベース、CMS）に労力・コストがかかる。 プログラム処理が可能なサーバーのレンタル費用、セキュリティ対策費用、保守費用などランニングコストがかかる。 サーバーでのプログラム実行やデータベースへのアクセスがあるのでブラウザ表示に時間がかかることがある。（ただし時間を短縮する技術は様々ある。） ちなみに、私が運営しているもう一つの 趣味全開日記ブログ も動的サイト構築の代表格であるWordpressというCMSを使用し独自テーマで制作しております。写真が多すぎて重いサイトですがSEOは全く気にせずやっております。 ちなみにこのブログは・・・ 前述のとおり、このサイトはブログ形式ですが静的サイトです。静的サイトジェネレータ Hugoで構築しています。 ホスティングサーバーはロリポップをレンタルしています。 広告 今ならドメインが1個無料でもらえるみたいですね～（2023.8.3現在） 最初は無料でサイト公開できるGitHub Pagesで公開しようかなーとも思ったのですが、もう一つの 趣味全開日記ブログ のために既にロリポップと契約していて空き容量がまだまだあったので、ムームードメインでドメイン取得だけして放り込みました。 広告 仕事ではその時のキャンペーン状況やサイト規模に応じてロリポップだけではなく他のレンタルサーバーをオススメすることもありますが、 自分のサイトは少しでもお安く、且つ、安定的に運営したいのでロリポップにしました。 これまで大きなトラブルもないですし扱いやすくサポートも充実しているのでオススメです～。 どうでもいい情報 ちなみに、この記事のサムネは福井県の 三方五湖の山頂公園 へのリフトケーブル乗り場にいたたぬきです。 よく見たらたぬきの目から犬が覗いています。ちょっとベロ出てますw 福井にいったときのやつ↓ この投稿をInstagramで見る mi_ur(@mi_ur)がシェアした投稿