[技術翻訳]使用Nuxtは、静的なウェブサイトを生成します

今週は再びいくつかの技術的な記事を翻訳し、これは次のように3件の記事を翻訳することが期待されます。

私は技術的な記事があなたはそれが役に立つ見つけた場合、スターコレクションをクリックしてください、githubのリポジトリに配置されている翻訳されました。なぜ私はこのgitリポジトリを作成する必要がありますか？目的は、新しいアイデアや技術の外国Web関連の技術記事を翻訳することによって、Web開発を学び、フォローアップすることです。gitのリポジトリ住所：https://github.com/yzsunlei/javascript-article-translate

静的なウェブサイトは現在、再びポップアップします。動的更新にワードプレスのようなコンテンツ管理システムを使用するためのキオスクやブランディング駅不要になりました。

静的なウェブサイトビルダーを使用して、あなたは受動的なCMS、APIおよびその他の動的ソースとMarkdownをファイルや他の文書からコンテンツを取得することができます。

NuxtはVue.js優れた静的サイトジェネレータを簡単に静的なウェブサイトを構築するために使用することができます基づいています。使用Nuxt、静的なWebサイトからのビルド動的なコンテンツが動的なソースのダイナミックからAPIと値下げファイルに、テンプレートを作成されて行う必要があります。その後、Nuxt構成ファイルで、我々は、それが同じ経路を介して静的コンテンツファイルとして生成することができるように、スタティックルートを定義します。

この記事では、使用Nuxtのニュースサイトを構築し、使用するhttps://newsapi.org/コンテンツとしてニュースAPIを。あなたはNuxt Vue.jsフレームワークをベースとしているため、サイトを作成Nuxtを使用する前に、まず、Vue.jsを理解する必要があります。

まず、ニュースAPIサイトでAPIキーを登録しました。我々は見出しを取得したい場合、それは無料です。私たちは、Nuxt CLIを使用してウェブサイトを構築するために始めました。私たちは、次のように入力して、それを実行します。

npx create-nuxt-app news-website

これは、ニュース・ウェブサイトフォルダ内の最初のプロジェクトファイルを作成します。ウィザードを実行すると、我々はサーバー側のフレームワークを何のために選択しない、何もUIフレームワークとして選択されていない、何もテストフレームワークのために選択されていない、Axiosを含めるかどうかの最終的な選択は、あなたの状況要求ライブラリーに依存し、一般的なファイルNuxtモードを選択しないでください糸くずのコードを使用すると、コードの美化を整理し、飾り立てます。

次に、我々はいくつかのパッケージをインストールする必要があります。私たちは、必要な@nuxtjs/dotenvローカルパッケージで環境変数を読んでためにcountry-list当社のウェブサイト上のライブラリ国のリストを取得するために使用されます。それらをインストールするには、我々は実行します。

npm i @nuxtjs/dotenv country-list

今、私たちは私たちのサイトの構築を開始することができます。default.vueファイルでは、既存のコードを置き換えます：

<template>  
  <div>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <nuxt-link class="navbar-brand" to="/">News Website</nuxt-link>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button> <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <nuxt-link class="nav-link" to="/">Home</nuxt-link>
          </li>
          <li class="nav-item dropdown">
            <a
              class="nav-link dropdown-toggle"
              href="#"
              id="navbarDropdown"
              role="button"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
            >Headliny by Country</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <nuxt-link
                class="dropdown-item"
                :to="`/headlines/${c.code}`"
                v-for="(c, i) of countries"
                :key="i"
              >{{c.name}}</nuxt-link>
            </div>
          </li>
        </ul>
      </div>
    </nav>
    <nuxt />
  </div>
</template>

<script>
import { requestsMixin } from "~/mixins/requestsMixin";
const { getData } = require("country-list");

export default {
  mixins: [requestsMixin],
  data() {
    return {
      countries: getData()
    };
  }
};
</script>

<style>
.bg-light {
  background-color: lightcoral !important;
}
</style>

このファイルは、当社のウェブサイトのレイアウトを定義するために使用されます。私たちは、ブートストラップのナビゲーションバーを追加するためにここにいます。バーは、ホームページのドロップダウンリストと国のリストへのリンクが含まれています。これらのnuxtリンクコンポーネントは、静的ファイルを生成するときにタイトル国/地域を取得するために使用されるページのページへのリンクです。関数を呼び出すことによって、国のリストパッケージの国民の一部から取得することができます。このセクションでは、デフォルトの色のクラスをオーバーライドすることにより、ナビゲーションバーの背景色を変更します。このセクションのコンポーネントには、当社のコンテンツの下部に表示されます。

scriptgetDatastyle.bg-lightnuxttemplate

次に、我々はrequestsMixin.jsfileという名前のファイルを作成したフォルダとミックスインを作成します。これでは、追加します。

const APIURL = "https://newsapi.org/v2";  
const axios = require("axios");
export const requestsMixin = {  
  methods: {  
    getHeadlines(country) {  
      return axios.get(  
        `${APIURL}/top-headlines?country=${country}&apiKey=${process.env.VUE_APP_APIKEY}`  
      );  
    }, getEverything(keyword) {  
      return axios.get(  
        `${APIURL}/everything?q=${keyword}&apiKey=${process.env.VUE_APP_APIKEY}`  
      );  
    }  
  }  
};

このファイルには、ニュースAPIからタイトルとして国/地域によって取得するために使用されるコード、およびキーワードが含まれています。

次に、ページのフォルダ内に、我々は_countryCode.vueファイルを作成し、見出しフォルダとフォルダの見出しでファイルを作成します。ファイルでは、我々は追加します。

<template>  
  <div class="container">  
    <h1 class="text-center">Headlines in {{getCountryName()}}</h1>  
    <div v-if="headlines.length > 0">  
      <div class="card" v-for="(h, i) of headlines" :key="i">  
        <div class="card-body">  
          <h5 class="card-title">{{h.title}}</h5>  
          <p class="card-text">{{h.content}}</p>  
          <button class="btn btn-primary" :href="h.url" target="_blank" variant="primary">Read</button>  
        </div>  
        <img :src="h.urlToImage" class="card-img-bottom" />  
      </div>  
    </div>  
    <div v-else>  
      <h2 class="text-center">No headlines found.</h2>  
    </div>  
  </div>  
</template>

<script>  
import { requestsMixin } from "~/mixins/requestsMixin";  
const { getData } = require("country-list");

export default {  
  mixins: [requestsMixin],  
  data() {  
    return {  
      headlines: [],  
      countries: getData()  
    };  
  },  
  beforeMount() {  
    this.getHeadlinesByCountry();  
  },  
  methods: {  
    async getHeadlinesByCountry() {  
      this.country = this.$route.params.countryCode;  
      const { data } = await this.getHeadlines(this.country);  
      this.headlines = data.articles;  
    }, 

    getCountryName() {  
      const country = this.countries.find(  
        c => c.code == this.$route.params.countryCode  
      );  
      return country ? country.name : "";  
    }  
  }  
};  
</script>

この文書では、我々は、このコンポーネントに含ま前COUNTRYCODEは、その場所から呼び出しを行う、ルートパラメータを受け入れるthis.getHeadlinesニュースAPIからタイトルを取得する機能、requestsMixin。結果は、ブートストラップ・カード・テンプレート部分に表示されます。テンプレートでは、我々は国リストデータから国の名前を見つけることによって、国の名前を取得する必要があります。あなたはタイトルを見つけることができない場合、我々はメッセージが表示されます。あなたがURLパラメータを作成する場合、一般的には、ページを受け入れ、あなたは最初の文字とURL変数パラメータの所望のファイル名として下線作成する必要があります。したがって、この例では、_countryCode.vueは、私たちは、このパラメータを使用しますCOUNTRYCODE this.$route.params.countryCode。

次に、index.vue pagesフォルダ、既存のコードを置き換えます：

<template>  
  <div class="container">  
    <h1 class="text-center">Home</h1>  
    <div class="card" v-for="(h, i) of headlines" :key="i">  
      <div class="card-body">  
        <h5 class="card-title">{{h.title}}</h5>  
        <p class="card-text">{{h.content}}</p>  
        <button class="btn btn-primary" :href="h.url" target="_blank" variant="primary">Read</button>  
      </div>  
      <img :src="h.urlToImage" class="card-img-bottom" />  
    </div>  
  </div>  
</template>  
<script>  
import { requestsMixin } from "~/mixins/requestsMixin";  
const { getData } = require("country-list");

export default {  
  mixins: [requestsMixin],  
  data() {  
    return {  
      headlines: []  
    };  
  },  
  beforeMount() {  
    this.getHeadlinesByCountry();  
  },  
  methods: {  
    async getHeadlinesByCountry() {  
      const { data } = await this.getHeadlines("us");  
      this.headlines = data.articles;  
    }  
  }  
};  
</script>

<style>  
</style>

これは、私たちは、ホームページ上の米国のタイトルを表示することができます。それは我々が唯一の米国の見出しを得ることである違いに似_countryCode.vueページで動作し、URLに基づいて、異なる国/地域からのget見出しにURLパラメータを受け付けません。

次に、我々は作成-env.jsは、ルートフォルダにプロジェクトファイルを作成し、次の行を追加します。

const fs = require('fs')  
fs.writeFileSync('./.env', `API_KEY=${process.env.API_KEY}`)

これは、我々は、動的.env環境変数の入力に基づいてファイルを作成する必要があるため、私たちは、Netlifyを展開することができます。また、当社は、手動で、値としてキー、ニュースAPIのAPIキーとしてAPI_KEYキーをファイルを作成し、.env。

次nuxt.config.jsは、我々は既存のコードを置き換えます：

require("dotenv").config();  
const { getData } = require("country-list");

export default {  
  mode: "universal",  
  /*  
   ** Headers of the page  
   */  
  head: {  
    title: "News Website",  
    meta: [  
      { charset: "utf-8" },  
      { name: "viewport", content: "width=device-width, initial-scale=1" },  
      {  
        hid: "description",  
        name: "description",  
        content: process.env.npm_package_description || ""  
      }  
    ],  
    link: [  
      { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },  
      {  
        rel: "stylesheet",  
        href:  
         "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"  
      }  
    ],  
    script: [  
      { src: "https://code.jquery.com/jquery-3.3.1.slim.min.js" },  
      {  
        src:  
          "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"  
      },  
      {  
        src:  
          "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"  
      }  
    ]  
  },  
  /*  
   ** Customize the progress-bar color  
   */  
  loading: { color: "#fff" },  
  /*  
   ** Global CSS  
   */  
  css: [],  
  /*  
   ** Plugins to load before mounting the App  
   */  
  plugins: [],  
  /*  
   ** Nuxt.js dev-modules  
   */  
  buildModules: [],  
  /*  
   ** Nuxt.js modules  
   */  
  modules: [  
    // Doc: https://axios.nuxtjs.org/usage    
    "@nuxtjs/axios",  
    "@nuxtjs/dotenv"  
  ],  
  /*  
   ** Axios module configuration  
   ** See https://axios.nuxtjs.org/options
   */  
  axios: {},  
  /*  
   ** Build configuration  
   */  
  build: {  
    /*  
     ** You can extend webpack config here  
     */  
    extend(config, ctx) {}  
  },  
  env: {  
    apiKey: process.env.API_KEY || ""  
  },  
  router: {  
    routes: [  
      {  
        name: "index",  
        path: "/",  
        component: "pages/index.vue"  
      },  
      {  
        name: "headlines-id",  
        path: "/headlines/:countryCode?",  
        component: "pages/headlines/_countryCode.vue"  
      }  
    ]  
  },  
  generate: {  
    routes() {  
      return getData().map(d => `headlines/${d.code}`);  
    }  
  }  
};

ヘッドのオブジェクトでは、所望のタイトルの代わりに、デフォルトのタイトルを表示するタイトルを変更しました。リンクでは、我々はブートストラップCSS、スクリプトを追加し、我々はブートストラップJavaScriptファイルとjQueryを追加し、ブートストラップは依存関係です。私たちは、静的なサイトを構築したいので、それは動的であるとして、BootstrapVueを使用することはできません。私たちは、共通のブートストラップを使用しなければならないので、生成された出力内の任意の動的なJavaScriptを使用したくありません。モジュールでは、「@ nuxtjs / dotenv」Nuxtアプリケーションファイルに.envから作成した環境変数を読み込む機能を追加します。我々はまた、追加（「dotenv」）を必要とコンフィグ（）;.私たちは、このプロファイルprocess.env.API_KEYそれに追加できるように。我々は.envファイルをチェックインする必要はありませんので、それをしなければなりません。process.env.API_KEY ||「」、得られた読取.envファイルのAPIキーを使用してdotenvです：インサイドENV部分は、我々はAPIKEYを持っています。

ルータでは、我々は、ユーザーがクリックしたときにリンクがURLを与えられたか、それらを表示することができ、このようなURLのリンクをクリックしたように、動的ルーティングを定義します。Nuxtまた、静的ファイルを生成するために、これらのルートを使用します。生成するには、我々はパスが静的ファイルに静的なウェブサイトを生成するNuxtを横断定義します。この場合は、ページのタイトルのルーティングによってルートの配列は、我々は以前に構図を作成しました。それは彼らのデータを得るためにそれらを反復処理し、それらをレンダリングし、レンダリングの結果からファイルを生成します。フォルダ構造は、ルートに対応します。私たちのパスがあるので、そのため、/ヘッドライン/：COUNTRYCODE、見出しを持つことになりますので、生成された成果物は、フォルダとサブフォルダの名前など、すべての国/地域コード、および各フォルダ内のファイルには、index.htmlを持つプレゼンテーションがあるだろうコンテンツ。

今、私たちはNetlifyに弊社のWebサイトを展開する準備が整いました。移動してhttps://www.netlify.com/Netlifyアカウントを作成します。フリープログラムは、当社のニーズを満たします。マネージドコードは、GitHubに、GitlabかのBitbucketのGitリポジトリに提出されます。その後、あなたはNetlifyをログインしたときに、新しいサイトにGitリポジトリをクリックします。そこから、あなたはGitのリポジトリにこれらのサービスのホストされたものを追加することができます。ビルドコマンドを入力するように求められたときに続いて、入力はnode ./create-env.js && npm run generate、ディレクトリDISTを公開します。

その後、サイト設定の「環境変数」セクションで入力した.envファイルAPIキーは、あなたがリンクをクリックして、メニューの「ビルドおよびデプロイ」、「環境」入力することができます。API_KEYキーとして入力し、ニュースAPIのAPI値としてキーを入力してください。[保存]ボタンをクリックしてください。

すべての内容は、提出され、プッシュGitHubに、GitlabのBitbucketやGitリポジトリをホスティングされたら、Netlifyは自動的に構築し、展開します。

オリジナルリンク：https://dev.to/aumayeung/generate-static-websites-with-nuxt-1ia1

[技術翻訳]使用Nuxtは、静的なウェブサイトを生成します

おすすめ