Hello.

私のサイトはentirely staticです。それはHugoで構築され、 HugoでホストされていZeit 。私はセットアップにとても満足していて、インスタントビルドと超高速CDNによるコンテンツ配信に近づいています。また、状態を管理する必要がないので、必要なことはすべて実行できます。 このサイト用のpodcast creatorと、静的にホストされたサイトに新しいコンテンツをすばやく投稿できるようにするためのsimple UIを作成しました。 そう。どうやってやったの？ それは私のGithubリポジトリに対するFirebase認証、コンテンツを編集するためのEditorJS（それはきれいです）、そしてリポジトリにコミットするためのOctokat.jsそして私のHugoビルドを行うためのZeitのGithub統合の組み合わせです。これで、Wordpressのようにデータベースで保護されたCMSでユーザーが投稿を作成するのと同じように、完全に自己管理型の静的CMSを作成できます。 この記事では、インフラストラクチャの一部、つまり複数のファイルをGithubにコミットすることに集中していきます。 コード全体は私のrepoで見ることができます。 Githubに直接コミットする必要があるWeb UIを構築している場合、私が見つけた最高のライブラリはOctokatです。これはCORSと連携し、Github APIのAPIサーフェス全体を処理するようです。 ツリー、ブランチ、その他の部分がどのように機能するのかを理解することになると、Gitは複雑な獣になる可能性があるので、それを簡単にするいくつかの決定を下しました。 heads/master呼ばれるマスターブランチにしかプッシュできheads/master 。 1.私は特定のファイルがどこに格納されるか知っているでしょう（Hugoは私に特定のディレクトリ構造を持たせるように強制します） それを念頭に置いて、複数のファイルでコミットを作成する一般的なプロセスは次のとおりです。 リポジトリへの参照を取得します。 heads/masterブランチのツリーの先端への参照を取得します。 1.コミットしたいファイルごとにblobを作成してから、 sha ID、パス、モードへの参照を配列に保管します。 heads/masterツリーの先端への参照に追加するすべてのtreeを含む新しいtreeを作成し、新しいshaポインタをこのツリーにshaます。 1.この新しいツリーを指すコミットを作成してから、 heads/masterブランチにプッシュします。 コードはその流れにほぼ従っています。特定の入力に対してパス構造を想定できるので、複雑なUIやファイルの管理を構築する必要はありません。 const createCommit = async (repositoryUrl, filename, data, images, commitMessage, recording) => { try { const token = localStorage.getItem('accessToken'); const github = new Octokat({ 'token': token }); const [user, repoName] = repositoryUrl.split('/'); if(user === null || repoName === null) { alert('Please specifiy a repo'); return; } const markdownPath = `site/content/${filename}.

私は最近、Google4Indiaイベント（近いうちに報告）に出席し、多くの企業や開発者と出会うためにインドへの旅行から帰ってきました。議論された最も興味深い変更の1つは、国のユーザーの言語でより多くのコンテンツを求めていたことでした。特に、ユーザーの言語で検索しやすくすること、コンテンツを見つけること、テキストまたは音声形式でユーザにそれを読み戻すことができます。 旅行全体が私に考えさせてくれました。私のブログはHugoで構築されています。 Hugoは現在、複数の言語で書かれたコンテンツをサポートしています。 Hugoは完全に静的なので、新しいコンテンツを作成することは、新しいファイルを作成してビルドシステムに魔法をかけることの問題です。翻訳ツールを使用して静的コンテンツを実行することで、より多くの人がコンテンツを利用できるようにすることができます。なぜなら、コンテンツの翻訳者は非常に高額なためです。 私の飛行前にイギリスに帰国する数時間前に、自分のマークダウンファイルを取得し、Google Cloud Translateで実行してクイック検索を作成するスクリプトを作成しました私はすぐにホストすることができますページの翻訳。ソリューション全体を以下に示します。これは比較的基本的なプロセッサーで、「コード」を無視したHugoプリアンブルを無視し、プル・クォートを無視しています。これらは常に書かれたままにしておくことを前提としていました。 注：翻訳用のラーニングソフトウェアのように見えるので、学習ツールでGoogle Translatedコンテンツをアルゴリズムの入力として使用しないようにページをマークアップすることが重要です（https://cloud.google.com/translate/マークアップ）。 // Imports the Google Cloud client library const Translate = require('@google-cloud/translate'); const program = require('commander'); const fs = require('fs'); const path = require('path'); program .version('0.1.0') .option('-s, --source [path]', 'Add in the source file.') .option('-t, --target [lang]', 'Add target language.') .parse(process.argv); // Creates a client const translate = new Translate({ projectId: 'html5rocks-hrd' }); const options = { to: program.target, }; async function translateLines(text) { if(text === ' ') return ' '; const output = []; let results = await translate.

デフォルトでは、Hugoは正しいコンテンツタイプの.mjsファイルを提供しません。実際、最近までhugoはMIMEタイプごとに複数のファイル拡張子を提供することはできませんでした。これは修正されたv0.43のように見えます。 [mediaTypes] [mediaTypes.“text/javascript”] suffixes = [“js”, “mjs”] 全文を読む。 上記のコードでは、正しいMIMEタイプのESモジュール用のmjsファイルを提供できます（メモモジュールは ‘text / javascript’で提供する必要があります）。これはローカルテストにのみ必要です。ホスティングは別の問題です:)