🙍🏿 🎅🏼 💽 3月8日のサイトのGitHubページ 🔃 ⌨️ 🚟

HTML、CSS、JavaScript、およびBootstrapフレームワークとは、ITから遠く離れた人に説明するのが難しいものです。しかし、この特定のホスティングのオンライン設計を参照せずに、無料のホスティングでサイトが必要な場合はどうでしょうか？！

国際女性の日のためにGitHubページでサイトを更新するように女の子に教えるのは現実的だと思いますか？！ Githubで利用でき、Java + FreeMarkerで書かれたサイトジェネレーターの助けを借りてどのようにそれを行ったかを説明し、gitリポジトリ内のコンテンツの公開を自動化しようとしました。

先日、私は自分のサイトのインテリアでテキスタイルデザイナーの夢を実現するのを手伝いました。彼女自身は、Wixのデザイナーを使用してレイアウトを作成しようとしました。しかし、最初のwicksサイトはゴツゴツと出てきて、携帯電話では正常に表示されませんでした。さらに、特定のホスティングに接続しない方が良いでしょう。

HTMLで最後に自分で作ったのは、大学で勉強しているときにアーティストのウェブサイトでした。その後、テーブルレイアウトが流行しました。ウェブ開発は私のパンではありません。そして今、どこにでもモバイルブラウザとブロックレイアウトがあります。若い女性は単純な名刺サイトを作りたかったので、サーバー上のスクリプトは必要ありません。同時に、HTMLの知識がなく、私の助けなしで、このWebリソースの写真を更新し、セクションを編集することが理想的です。

CMS-コンテンツ管理システムをインストールすると、Webサイトのホスティングがより高価になり、構成、テンプレート、およびセキュリティに時間を費やす必要があります。静的なサイトには複雑すぎます。それはすべて、テンプレートからサイトを生成するタスクに非常に似ているように思えました。最近、広告のないサイトのホスティングの場所を知りませんでした。友人に尋ね、オプションを見て、ネットワーク上のメモを読んだ後、GitHubページが理想的なオプションであるという結論に達しました。無料でバージョン管理され、サイトでのドメイン名の使用をサポートしています。

jekyllテンプレートエンジンはGitHub Pagesに最適ですが、コンピューターでRubyデザイナーとjekyll gemを構成して設定する時間はありませんでした。 jekyllを使用して、GitHubのプロジェクト用のサイトが必要になるので、別の機会に遊びます。

ジャビスタにとって、テンプレートとの関連付けは、多くの人にとって使い慣れたテンプレートエンジンであるFreeMarkerです。 Javaが私の通常の作業ツールであることを考慮して、Webサイトとジェネレーターを迅速に開発する必要がありました。 FreeMarkerとVelocityを比較すると、前者はまだ生きており、より機能的に見えます。

GitHubでデザイナーのアカウントを作成することから始めました。

次に、設計とレイアウトに切り替えました。ブートストラップカルーセルは、Webページのメインコンテンツがポートフォリオの写真であり、ページがモバイルデバイスで表示されるため、画像を表示するための優れたソリューションであると思われました。

Bootstrapページに接続すると、Panel要素とナビゲーション/連絡先のアイコンが役立ちます。私にとって、レイアウトはサイトを作成する上で最も退屈なステップでした。複雑さの2番目にあったのは、作品のポートフォリオの多数の写真のサイズ変更、カラーグレーディング、およびトリミングでした。

次のステップは、レイアウトをジェネレーターテンプレートに変えることです。 FreeMarkerテンプレートでは、オブジェクトのコレクションに対する反復は、ディレクティブ<#list product as prodItem> ... </＃list>を使用して実行され、条件は<#if prodItem？Is_first> ... </＃if>を使用して実行されます。これらは、これらのジェネレーターテンプレートで使用されるすべてです。

データストレージのデータ形式の基礎としてXMLマークアップを選択しました。レイアウトに基づいて、すぐに構造を決定しました。

<site> <text>.......</text> <product id="drapery" background-img="drapery.jpg" title-img="drapery-main.jpg"> <title>, </title> <description>   ...</description> <image img="drapery/1.jpg"/> ... <image img="drapery/37.jpg"/> </product> ... <product .../> </site>

IntelliJ Idea Community EditionのXMLファイルからXSDスキーマを生成しました。

テンプレートで使用するJAXBアノテーションを持つクラスは、jaxb2-maven-pluginを使用してMavenから動的に生成されます。プロジェクトをビルドすると、これらのクラスはtarget / generated-sources / jaxbディレクトリに配置されます。

特定のカテゴリのすべてのポートフォリオ画像を表示するためのFreeMarkerテンプレートのフラグメントの例：

  <#list image as imageInfo> <div class="item<#if imageInfo?is_first> active</#if>"> <img src="img/${imageInfo.img}" class="img-responsive center-block"> <div class="carousel-caption"> <#if imageInfo.title??> <h3>${imageInfo.title}</h3> <p></p> </#if> </div> </div> </#list>

次に、ページの生成に基づいたデータの例を示します。

  <product id="pillow" background-img="pillow.jpg" title-img="pillow-main.jpg"> <title>, </title> <shortDescription>     ,  ,     </shortDescription> <description>  -       ,  ,     .      ,    ,   ,      .</description> <image img="pillow/1.jpg"/> <image img="pillow/2.jpg"/> <image img="pillow/3.jpg"/> <image img="pillow/4.jpg"/> <image img="pillow/5.jpg"/> <image img="pillow/6.jpg"/> <image img="pillow/7.jpg"/> <image img="pillow/8.jpg"/> <image img="pillow/9.jpg"/> <image img="pillow/10.jpg"/> <image img="pillow/11.jpg"/> <image img="pillow/12.jpg"/> <image img="pillow/13.jpg"/> <image img="pillow/14.jpg"/> </product>

Index.htmlは、テンプレートを使用して、 site.xmlにリストされているすべての<product ...>タグに基づいて目次を生成します。

テンプレートの「接着剤」として、メイン作業はjavaクラスsrc / main / java / Site.javaおよびmaven ビルドスクリプトによって実行されます。画像はsrc / main / resources / imgディレクトリからターゲット/サイトにコピーされ、JAXBのクラスはXMLスキーマから生成されます注釈を付けて、exec-maven-pluginを使用してjavaでプログラムを実行します。exec-maven-pluginは、FreeMarkerとsite.xmlのデータを使用してサイトを生成します。 jaxb2-maven-pluginプラグインの場合、JDKのxjcがPATH環境変数のパスの1つで利用可能であることが重要です。

 public class Site { public static void main(String[] args) throws Exception { File targetDirectory = getTargetDirectory(); SiteType siteModel = readSiteModel(); Configuration cfg = getTemplateConfiguration(); generateIndex(targetDirectory, siteModel, cfg); siteModel.getProduct().stream().forEach(product -> generateProduct(targetDirectory, cfg, product)); } private static void generateIndex(File targetDirectory, SiteType siteModel, Configuration cfg) { try(Writer out = new FileWriter(new File(targetDirectory, "index.html"))) { Template template = cfg.getTemplate("index-template.html"); template.process(siteModel, out); } catch (Exception e) { throw new IllegalArgumentException(e); } } private static void generateProduct(File targetDirectory, Configuration cfg, ProductType product) { try(Writer out = new FileWriter(new File(targetDirectory, product.getId() + ".html"))) { Template prodTemplate = cfg.getTemplate("product-template.html"); prodTemplate.process(product, out); } catch (Exception e) { throw new IllegalArgumentException(e); } } ... }

若い女性がコンピューターにJDK以外のものをインストールするのを防ぐために、彼はmvn-classloader-1.8.jarをプロジェクトに追加しました。 scm-publish：publish-scm "GitHub Pagesでサイトを公開します。 Windows上のシステムではbuild.cmd 、Linuxではbuild.shのサイトの生成を開始します。これにより、プロジェクトのアセンブリが大幅に簡素化され、Gradle Wrapper / Maven Wrapperと非常によく似ています。 mavenのライブラリーには、JVMと中央リポジトリーへのアクセスを備えたインターネット接続のみが必要です。ここでは隔離されたネットワークの場合は考慮しませんが、この場合でも〜/ .m2 / settings.xmlのミラーとプロキシの設定は機能します。最近、「OSGIとJigsawを使用しないJavaSEでのモジュール化」でこのライブラリのすべての魔法について話しました。

学習プロセスに関するいくつかの言葉。バージョン管理システムとGitのコンソールのコマンドについて話すのは困難でした。これは不可能ではないが、プログラマーではない、怖い。彼女がサイトを公開するプロセスに間違えられないように、私はプロセス全体を自動化する機会を探し始めました。サイトを生成して公開するには、ワンクリックでできます。 githubでサイトを公開するのがどれほど簡単かを見つけて、maven-scm-publish-pluginプラグインを発見しました。 Mavenアセンブリに追加し、リポジトリアドレスにscmpublish.pubScmUrlを構成しました。

私はテクノロジーから気をそらされ、女性の休日を思い出します。ますます、現代の女の子が裁縫と裁縫を見ることができます。そして、ここでデザイナーの仕事と彼女が縫った方法を観察する機会がありました：

インテリアのテキスタイルデザインの新しい分野について学びました。そして、カーテン、布地、コーニスの種類はそれほど多くないと思いました。

サイトでの話の前でさえ、私は彼女が彼女の母親と彼女の友人の誕生日に贈り物をする方法を見ました。これらは、子猫と魚、犬と一緒の面白い枕カバーでした。

ええ、長い間手作りのプレゼントをもらえなかったのは残念です。少しうらやましかったです。

「スマートホーム」用の電動カーテンロッドとその設置の経験について学ぶのは興味深いことでした。電気カーテンを試して、STM32に基づいてコントローラーに固定し、光センサーでカーテンの開閉を自動化するか、電話からカーテンをリモートで制御します。プロトコルに対処し、青い電気テープなしでコントローラーを美しく接続してください！しかし、どうやら、jekyllテンプレートを扱った後になるでしょう。それ以前は、ノードスタータワーでのみ同様の自動ローラーブラインドが見られました。

コンテンツの更新方法について...まず、コマンドを実行する必要があります

 git clone https://github.com/nadinbox89/site.git

または、githubからプロジェクトのzipファイルをダウンロードします。

デザイナーは、ポートフォリオの処理済み画像をsrc / main / resources / imgディレクトリにコピーし、 src / main / resources / site.xmlファイルの<product ...>セクションにエントリを追加します。その後、ショートカットを使用してbuild.cmdスクリプトを起動します。これにより、テンプレートデータからサイトが作成され、GitHubページでnadinbox89.github.ioリポジトリに公開されます。 git push後わずかに遅れて、サイトバージョンはGitHubのリポジトリ名と同じアドレス-nadinbox89.github.ioで更新されます。リポジトリのCNAMEでドメインレコードを使用する場合、このアドレスに自動的にリダイレクトされます。サイトを更新すると、公開プラグインからのコミットがnadinbox89.github.ioという名前のリポジトリに表示されます。

彼女からXMLの作業を完全に隠すのは良いことですが、ジェネレーターのUIを作成することはまだ望まれていません。

名刺サイトはドメイン名で飾られていました。数百ルーブルで、ほぼすべてのレジストラからドメインを取得できます。その後、CNAMEファイルをドメイン名とともにgithubサイトリポジトリのルートに追加します。ドメインレジストラに無料のDNSサーバーがある場合に最適です。次のようにGitHubページ用に構成する必要があります。

@ A 192.30.252.153

@ A 192.30.252.154

www CNAME * your_github_account * .github.io

ここで、192.30.252.153、192.30.252.154はgithubのIPアドレスです。ドメイン名の設定については、 stackoverflowとGitHubのヘルプで詳しく説明されています。その後、モバイルフレンドリーサービスで確認しました。一般に、このサイトはモバイルブラウザーで正常に機能します。

サイトの作成への私の参加が終了し、サポートが次と同じモードになることを願っています

古き良きビデオ

おわりに

GitHub Pagesは、シンプルで静的な名刺サイトのホスティングに最適であり、費用はすべて、数百ルーブルのドメイン名を植字して購入する時間です。アルゴリズムは複雑ではなく、この記事で説明されています。

GitHubでアカウントを登録する
リポジトリの作成* your_github_account * .github.io
静的（html、css、画像）をリポジトリに保存* your_github_account * .github.io
ドメインを登録し、3ポイントのアドレスを指すDNSサーバーレコードを作成する
ドメイン名を使用してCNAMEファイルをリポジトリのルートに追加します

GitHubの組み込みjekyllテンプレートを使用するか、FreeMarkerのJavaプログラムとテンプレートを使用して、htmlを生成できます。 maven-scm-publish-pluginを使用して、mavenビルドから直接GitHubにサイトを公開することも便利です。公開用のプラグインがgit pushを実行できるように、スクリプトでログイン/パスワードを設定するだけです。 3月8日の私の贈り物は成功でした！

3月8日のサイトのGitHubページ

おわりに

More articles: