静的サイトジェネレータの使用

目次

Who's Hugo

A New CMS: Forestry.io

Additional Performance

The Final Results

我々は、WordPress、我々がAで詳述した苦痛であるが、必要なプロセスで破りましたprevious post . しかし、これは終盤についての話ではなく、私たちの新しいCMS、Hugoとの新しい始まりについてのものです.彼らは、より良い何かが常にあなたをそこで待っていると言います、そして、我々のために、それはHugoです.

ヒューゴは誰ですか。

Hugo 静的サイトジェネレータ( SSG )はGo . ウェブサイトは、彼らが編集されるよりしばしば見られます、そして、Hugoはコンテンツが作成されるか、更新されるとき、ページを構築することによってそれを利用します.HTTPサーバーは、あなたのページの静的なバージョンを提供しているので、ユーザーがあなたのウェブサイトにアクセスしたいたびにオンデマンドを構築する必要はありません.結果:より良いパフォーマンス.uGoを維持する開発者は、平均サイトが1秒未満で構築されると主張する!
Hugoマークダウンファイルを取得し、テンプレートを使用してHTMLファイルを生成します.Markdown プレーンテキストドキュメントに書式設定要素を追加するために使用できる軽量マークアップ言語です.我々は、見出しのためにCountを加えたり、テキストを大胆にするために2つのアスタリスクで単語をラップすることができます.例えば、このセクションのマークダウンは次のようになります.

## Who’s Hugo? <a name="whos-hugo"></a>

[Hugo](https://gohugo.io/) is a **static site generator(SSG)** written in [Go](https://golang.org/).

人々がWordPressについて好きなことの1つは使いやすいテキストエディタです.MarkdownはWYSIWYGではありません.それはあなたが異なるスタイルを表示するためにあなたのテキストに構文を加える必要があることを意味します.学習Markdownは困難ではありません、そして、今日、たくさんのメッセージングアプリ(WhatsApp、電報とスラック)がこの言語を利用するためにあります、しかし、このプロセスは特に技術的な知識なしで人々のために退屈であるかもしれません.なぜ、我々は組み込みのテキストエディタとしてこのような良い機能を削除しますか?林業は我々の解決だった.

新しいCMS林業io

Forestry.io is a content management system (CMS) built for SSGs such as Hugo, Jekyll or Gatsby. A CMS is an application that helps users create and manage content for their website. This is extremely helpful to people without technical knowledge. Without Forestry.io, every blog contributor would need to download the project from our repository and start “coding” their articles using a markup language. We want this process to be as simple as possible so editors can focus on content creation. Forestry.io has a familiar WYSIWYG interface that allows users to write, save and preview drafts.

The main selling point of Forestry.io for our engineers is that it is entirely backed by Git. All the content and code are version-controlled with Git and saved in Github, with no need for a database or third-party app to store information. This makes the Continuous Integration process easy because all the files we need are stored in a Git repository. Editors can use the Forestry.io interface to generate the markdown files and these get stored as the content that Hugo later uses to build the entire application. At the same time, developers can make changes to any of the templates or add new features to the website and push them to the same repository. The following schema helps illustrate the process:

追加パフォーマンス

我々は以前CSSフレームワークを使用して、サードパーティ製のJavaScriptライブラリを使用したので、我々が見られるようにすることができたかどうかについて見てみたかったです.CSSの場合には、ブートストラップがjQueryに高い依存性を持っていることがわかりました.また、ライブラリとの将来のセキュリティ脆弱性の可能性を認識し、ライブラリをこのような脆弱性を避けるために更新を維持する必要があります.エーreport from W3Tech jQueryがすべてのウェブサイトの73 %によって使用され、より重要なことに、それらのウェブサイトの81 %はバージョン1を使用しています.もう一つreport from Snyk jQueryで発見された脆弱性の50 %以上がこの最初のバージョンです.しかし、ウェブサイトの大部分は、レガシーなコンポーネントとしてjQueryを使っています.
JQueryを使用して別の問題:それは私たちのページは、パッケージのサイズのため、はるかに遅くロードされ、それは我々のドメインの全体的なSEOのスコアに影響を与えた.
jQueryを使い続けるという説得力のある理由はありませんでした.一旦決定がなされるならば、我々は以下のサイトを使いましたyoumightnotneedjquery.com 既存のjQuery関数のバニラJS実装を検索するには、使用していました.我々は、便利なjQueryセレクタを維持したかったのは、我々の使用を行ったCash , DOMを操作するのに最適なjQuery形式の構文を持つjQueryの代替.299 KBのjQueryに比べて32 KBで圧縮できません.
JQueryの依存関係をさらに削除するには、JavaScriptの依存関係を持たないFlexboxに基づくCSSフレームワークのBulma Frameworkを使い始めました.
PurgecssはCSSの最小化を助けるために実装された別のツールでした.Bulmaはモジュールであり、あなたがあなたのパッケージに必要などのコンポーネントを選択することができますが、我々はまだいくつかの余分なクラスが含まれていないことが含まれています.Purgecssは私たちのコンテンツファイルから未使用のクラスを識別するために優れており、さらに我々のCSSのフットプリントを削減し、結果として私たちのページの読み込みを高速に役立ちました.

最終結果

WordPressのデザインのためのCSSサイズは、57.1 KBで、Hugoによる我々の現在のサイズの3倍以上でした.ブートストラップ4自体は20 KBのgzipですが、Hugoのブログ全体のCSSは16.6 KBファイルです.
LTVでは、我々は毎日の改善を行うことを約束します.我々は常に最高のツール、最高のフレームワークと最高の人々を探しています.すべての新しいプロジェクトは過去に反映し、何が行われているか、何が改善されるかを見る機会です.あなたが新しい言語で古いプロジェクトをやり直すか、全く新しいプロジェクトに取り組んでいるかどうかにかかわらず、あなたは典型的にこの実現に到着します私がこの状況で自分自身を見つけるときはいつでも、私が私が以前にしたことに関して改善する解決策を考え出す方法があるならば、私は私自身に尋ねます.
私たちと仕事に興味がありますか?我々の観察を見てくださいcareers page そして、あなたが我々のチームの一部でありたいならば、我々に手を伸ばしてください!