Squidoで10分でスタティックHTMLブログを構築する方法

静的ウェブサイトJamstack アーキテクチャは、信じられないほどのパフォーマンス、ホストに安く、維持しやすい近代的なウェブサイトを作成する方法を提供します.静的HTMLウェブサイトの移動メリットを見ることができますhere .
今日私たちはsquido 10分未満で静的なHTMLブログを構築するために必要なすべての手順を示すに行く.
多くの静的なウェブサイトのジェネレータがありますが、使いやすいように、デフォルトでパックされた機能としてsquido .

始める
必要なもの

Git インストール.

Node.js インストール.

テキストエディタVisual Studio Code .

端末を開きインストールするsquido グローバルに

# npm i -g https://github.com/mrvautin/squido.git

例のブログGitリポジトリをクローン化することによって物事を高速化する

# git clone https://github.com/mrvautin/squido-blog-example my-blog

ビル
新しいブログディレクトリを入力します

# cd my-blog

ブログ一覧にもどる
注:サーブコマンドは、新しいブログを表示するには、ローカルWebサーバーを作成します.The -b フラグを作成するには-w 変更を監視し、必要に応じて再構築する-c フラグは古いファイルをきれいにすることです.

# squido serve -b -w -c

ブラウザで次のURLを開くことで、ブログを表示できます.

http://localhost:4965

次のようになります.

テキストエディタで新しいブログディレクトリを開くと、次のようになります.

ビルド:これはあなたのブログのHTMLファイルを含む生成されたディレクトリです

ソース:あなたのブログを生成するために使用される実際のソースファイル

あなたのブログのためのJavaScript、CSSとイメージファイルを含みます

レイアウト:基本的な構造を持つレイアウトファイルが含まれます

記事:あなたのブログ柱/ページの実際の内容を含むMarkdownファイルを含みます

404 hbs、インデックス.HBSのページ.HBS、ポスト.HBSタグ.HBS :すべてのテンプレートファイルは、それらのページのレイアウトを駆動するために使用されますか

設定.JS :あなたのブログの設定を含んでいます

お出しましょうlorem ipsum からの例のMarkdownファイル/source/posts フォルダを選択し、右クリックしてDelete :

次に新しいファイルを作成しますhello-world.markdown に/source/posts 次のテキストを含むフォルダ

---
title: "Hello world"
permalink: hello-world
description: "Hello world"
date: '2021-06-16 19:17:00'
tags: 
  - hello
  - world
---

## Hello world

あなたのブログは自動的に再構築され、あなたのブラウザは次のようになります.

これで、カスタムレイアウトでテンプレートを編集することができます、ロゴを変更し、後であなたのCSSの色を追加します.

展開
端末に戻ると、ローカルのgitリポジトリを初期化します.

# git init

新規作成Github あなたのブログをさらに簡単にするためのリポジトリGithub .
あなたの端末に戻って、あなたの新しいGithub リポジトリをローカルに.
まず、git状態を実行します.

# git status

次のようになります.

これは、我々のすべての削除と我々の新しいものを示しますhello-world.markdown ファイル.
変更を加える

# git add .

最初のコミットを作成します

# git commit -m "Init"

分岐をメインに変更します

# git branch -M main

リモートの追加Github リポジトリ

# git remote add origin [email protected]:<username>/my-blog.git

変更をプッシュします

# git push -u origin main

Netlifyへの配備
Netlify あなたは数分で無料であなたのブログをホストできるようになります専門の静的なウェブサイトのホストです.ないサーバー管理や複雑なセットアップです.
あなたが作成した後Netlify アカウントをクリックNew site from Git ボタン

絹篩で篩うたようGithub からContinuous deployment セクション.認可するGithub , を選択my-blog リポジトリ.発行ディレクトリを/build . クリックAdvanced と新しい変数を設定するNODE_ENV to production . 最後にDeploy site ボタン.
結果は次のようになります.

あなたのブログを展開するために数秒で待つ必要があります.次に、リンクをクリックしてブログを表示できます.

ここで仕上げてください.しかし、クリックすることでDomain settings ドメインレジスタから購入した独自のカスタムドメインを設定できます.
「カスタムドメインを追加」をクリックし、新しいDNSレコードを設定する手順を実行しますNetlify ブログ.
他deployment options でsquido documentation . 他のヘルプとガイドもありますcustomizing ブログ一覧にもどるdocumentation .