JamStack：今日より速く、より効率的なWebサイトを構築する

Sep 14, 2025
操作方法
JAMstack main
（イメージクレジット：未来/ジョセフフォード）

JAMStackは、サーバーによって必要とされる最小限の負荷を持つWebサイトを作成および提供する方法です。ビルドプロセス、JavaScript、API、およびマークアップで使用されているテクノロジからその名前を取得します。 Pagesはマークアップ言語では、ユーザーが要求しているため、静的HTMLファイルとして機能します。サイトを構築してこれらの技術をまとめるためには、正しいツールが必要です。必ず私たちをチェックアウトしてください 最高のコード編集者 あなたのための最高の開発環境を決定するのを助けるために投稿してください。

伝統的に、ユーザーがWebページをクリックすると、一連のアクションが行われます。ユーザーブラウザはWebサイトのサーバーに要求を送信し、バックエンドコードを実行し、正しいページを生成し、データはブラウザに送信され、Webページとしてレンダリングされます。それが間違っている可能性がある、そしてそれがうまくいっても、それは私たちが今住んでいるライトニングファーストデジタル世界でユーザーが快適であるより少し遅いです。

しかし、ジャムスタックを使用すると、より効率的なサイトがより速く、問題が少なくなることを意味します。このチュートリアルでは、概念の紹介として役立つように、JAMStackにブログのWebサイトを設定する方法を説明します。使用されるツールはされます ヒューズ 静的サイトジェネレータとして、 Netlify. ビルドツールとして g g ファイルの無料ホスティングとして。

サイトの経験をさらに向上させるには、完璧を選択してください。 ウェブホスティング サービス、そしてベスト ウェブサイトビルダー 。

01.必要なツールをダウンロードしてください

のコピーをダウンロードしてください ビクターヒューゴ - これは素早く地面から地面から物事を出すためのいくつかのスターターキットの1つです。またあなたが持っていることを確認してください ノード 開発環境にインストールされています。 

https://github.com/netlify-templates/victor-hugo

02.作業ディレクトリを作成してHUGOをインストールします

ディレクトリを作成して名前を付けます ジャムスタック 。これが私たちが開発マシンに取り組む場所です。ダウンロードしたファイルをこのディレクトリに抽出し、コマンドプロンプトでそれを開きます。すべての依存関係をインストールするには、JAMStackフォルダのコマンドプロンプトまたは端末を開いて実行するには NPMインストール 

npm install

03.サーバーを起動します

JAMstack03

（イメージクレジット：ジョセフフォード）

依存関係が完了したら、NPMの起動を実行します。開発サーバーは現在Victor Hugoのローカルコピーを実行している。テストされたら、を押します Ctrl. + c サーバーを停止する。

04.ページと投稿を追加します

JAMstack04

（イメージクレジット：ジョセフフォード）

ディレクトリをサイトフォルダに変更してから、 HUGO NEW コマンド、Aを追加します page-ONE.MD そしてA POST - ONE.MD 。 Windowsで作業している開発者は、hugo.exeファイルをダウンロードし、これを機能させるためのパスを追加する必要がありますが、ドキュメントに従うのは簡単です。 ヒューズ ウェブサイト。 

 Hugo New Page-One.md.
HUGO NEW POST / POST-ONE.MD

05.ページにコンテンツを追加して投稿します

テスト目的で、いくつかのコンテンツを新しい投稿とページに追加する必要があります（メディア - 重いコンテンツを取得しましたか？ クラウドストレージ ）。ファイルブラウザ内のプロジェクトのディレクトリを開き、JAMStack / Site / Contentに移動します。このフォルダ内でファイル page-ONE.MD 今存在します。名前のフォルダもあります 役職 これを含む post-oune.md。 これらのファイルを両方とも開き、---（または場合によっては+++の場合）の下のマークダウンにコンテンツを追加します。 

＃Lorem Ipsum Dolor Sit Sit
【図1】【数2】アディピック*エリット*
sed do eiusmod tember incididunt UT Labore.
Et Dolore Magna Aliqua

06.テーマをサブモジュールとして追加します

JAMstack06

（イメージクレジット：ジョセフフォード）

前のファイルに入力されたテキストはテーマなしでは表示できません。一例として、Anankeテーマが使用されます。現在のコンテンツを削除します サイト/レイアウト フォルダが空のままにします。 Siteフォルダに新しいディレクトリを作成します テーマ 次に、それに変更して次のコードを実行してテーマをGITサブモジュールとしてインポートします。注：通常のクローニングはNetLifyと互換性がありません。 

 MKDIRテーマ
CDテーマ
Gitサブモジュールhttpsを追加：// github
com /＆lt; themecreator＆gt; /＆lt; TheMename＆GT;
https://github.com/budparr/gohugo-Theme.
ananke.gitテーマ/ ananke

07.テーマを設定してサーバーを実行します

の内容をコピーします サイト/テーマ/ goohugo-theme ananke / elladionsite / config.toml サイトフォルダ内の1つを超えてください。ページ上部にある基本URLと 'を' ' /」 そして行を削除します themesdir = '../' 。設定ファイルを保存し、端末を開き、実行します NPMスタート コマンド。置き換えることで、Webサイトの名前を変更することもできます。 題名 値。 

 CDサイト
NPMスタート

08.ブラウザでテストします

開いた http：// localhost：3000 /ページ1 / テーマを表示するには、ページのマークダウンを完全にスタイルのページとしてレンダリングします。ホームページを開くと、最初の投稿が表示されます。つまり、静的サイトジェネレータが機能していることを意味します。

09.メニューを設定します

JAMstack09

（イメージクレジット：ジョセフフォード）

Webサイトを表示するときは、以前に行ったページがナビゲーションに表示されていないことが注目に値します。コンテンツに戻るには、ページのレンダリングにHugoに指示するために、前面の設定に行を追加します。 

トムル
+++
menu = "main"
+++
ヤムル
 -  ---
メニュー： "メイン"
---

10.ファイルをgithubに押します

次に、サークルをアニメートしてユーザーのクリックに応答します。静的サイトが起動して実行されているようになりましたが、開発サーバー上でアクセスできるようになります。最初のステップはコードをGitHubにプッシュすることです。 GitHubで新しいリポジトリを作成してから、コマンドラインを使用してプロジェクトフォルダまたはGitHub Desktopアプリからコードをプッシュします。 

 gitリモートAdd Origin https://github.com/[githubusername]/jamstacktutorial.git.
Git Push -U Origin Master

11. NetLifyに接続します

NetLifyはすべてをまとめて、サイトを構築し、一時的なドメインにサービスを提供します。 Accountを作成して起動します Netlify. そしてGithubアカウントでそれをリンクします。すべてがclickを設定したら Gitの新しいサイト 。

12. githubに接続します

継続的な展開のために、クリックしてください g g その後、チュートリアルの前に作成されたレポを選択します。 NetLifyはプロジェクトの最良のビルドオプションを自動的に検出する必要があります。それは読むべきです NPM Run Build. 。すべてがうまくいっている場合は、[デプロイ]をクリックします。

13.サイトを構築し、NetLifyリンクでビューを表示します

JAMstack13

（イメージクレジット：ジョセフフォード）

サイトが構築されたら、メッセージが表示されます 展開 。 NetLifyは、Senseを作成しないかもしれない一時的なドメイン名をWebサイトに与えました - これは単にサイト設定をクリックするだけで変更できます。名前を変更してから、リンクをクリックして、JAMStackを介してロードされたサイトを表示します。

14.テスト展開を変更します

Webサイトはジャムスタックを読み込みます。それは高速で稲妻で、githubをコミットすると自動的に更新されます。これをテストするには、ローカル開発環境に戻って実行して実行します。 Hugo New Page-Three.md. サイトディレクトリから。次に作成したファイルを開き、一部のコンテンツを追加し、[保存]をクリックしてファイルをREPOにコミットします。瞬間内には、アップデートがNetLifyリンクに住んでいることに気付くでしょう。

15.静的サイトにCMSを追加します

プレーンマークアップで作業し、コマンドラインを使用してページを作成すると、ほとんどのクライアントではよく座りません。ウェブサイトをよりフレンドリーにするために、コンテンツ管理システムをインストールしてください。 林業 現在のセットアップには完璧なものです。 Webサイトに移動してGithubを使用してアカウントを作成します。

16.林業を設定します

[新しいサイトの追加]をクリックしてから、静的サイトジェネレータとしてHUGOを選択し、プロバイダとしてgitをgitし、以下の形式で情報を入力します。 [送信]をクリックし、新しいCMSがロードされ、コンテンツの変更の準備ができています。さて、ページはサイドバー、および投稿と他のオプションの巨大な配列から単純に編集できます。

Webデザインについてもっと詳しく知りたいですか？それから ネットを購読する Webデザイナーや開発者向けの世界で最も売れている雑誌。

An image promoting GenerateJS on Thursday 2 April 2020 at Rich Mix, Shoreditch, London featuring Remy Sharp, Phil Hawksworth, Jeremy Keith and Nadieh Bremer.

GeneratyJSでより良いJavaScriptを構築する方法を学びましょう （イメージクレジット：未来/レミーシャープ/ Phil Hawksworth / Jeremy Keith / Nadieh Bremer / Toa Heftiba、Unsplash）

2020年4月に参加しましょうJavaScriptがより良いJavaScriptを構築するのに役立つ会議。今すぐ予約 GenerateConf.com

続きを読む：

  • 8つのHTMLタグを使用する必要があります（および避けてください）
  • 最高のJavaScript APIの25
  • View SourceからJavaScriptコードを非表示にする方法

操作方法 - 最も人気のある記事

現実的な透明な表面をどのようにレンダリングするか

操作方法 Sep 14, 2025

ガラスなどの透明な素材を作成するように思われる - 透明度スライダを100に増やし、ジョブが行..

マンデルブを作る方法

操作方法 Sep 14, 2025

Mandelbulbは、ますます人気がある3次元フラクタルです。 3Dアート そしてvfx。この記事..

色のブロックで街並みを描く方法

操作方法 Sep 14, 2025

素晴らしいスカイラインと美しい街並みを吸う眺めは素晴らしい写真を作りますが、芸術家の視..

サイトにビジュアルキューを追加する

操作方法 Sep 14, 2025

Webページが興味を持っていないことを見つけるためにのみ、Webサイトのユーザーにとって迷惑で..

現実的なCG布の作成方法

操作方法 Sep 14, 2025

3Dで布や布地で作業するときは、良い解像度と素晴らしい外観の両方を達成するのが難しいこと�..

映画館のための世界を築く方法

操作方法 Sep 14, 2025

ファンタジー環境の創造に関するワークショップをするように頼まれたとき、私はそれが常に最..

Webの単純なイラストを作成する

操作方法 Sep 14, 2025

私は座って、いくつかの音楽を演じ、ライトを淡らせ、私のラップトップを開けました。私はや..

想像上のブランドのプロモーションを設計する方法

操作方法 Sep 14, 2025

あなたが創造的な主導権を持っているとあなたが創造的なリードを取っているとあなたが創造的なリードを取っているのかどうかにかかわら�..

カテゴリ