ブログ一覧にもどる

あなたがTwitterの上でソフトウェアまたはウェブ開発者に従うならば、あなたはブログプラットホーム媒体を囲んでいる若干の不満を発見しそうです.多くの開発者は、彼らが壁の庭のアプローチを取ってから読者が無料で書かれたコンテンツのための毎月の手数料を支払うように依頼を開始以来、媒体から離れて移動を検討しています.つの人気のオプションが頻繁に議論されている:いずれかの個人的な、カスタムのブログをロールアウトまたは別の人気のプラットフォーム、DED . TOにコンテンツを移動します.
どちらも実行可能なオプションであり、静的サイトジェネレータの有病率を考えると、達成するのは簡単です.ブログを構築している間、あなたのより多くの制御をそのプレゼンテーションの上で、Dev . toの上でブログを定期的に掲示する利点は、くしゃみする何もありません.すぐに逆さまには、支持と同様の心の個人の大規模なコミュニティへのアクセスだけでなく、組み込みモデレートコメント、SEO、および便利な位置に読者のベースは、ニッチのプログラミングコンテンツをターゲットに位置します.DEV . TOチームは、彼らが何をしているのか、何を共有できるかについても非常に透明です.
今、私は自分自身をビットに偏見を認めることを認める.私は、ベンHalpernのまじめな個人的なブログのアイデアから実用的なdevのすべての方法を堅牢なプラットフォームとビジネスには、今日です.私ができるならば、私はそれに投資するでしょう.すべては、塩の粒で私の推薦を取ることです.私は、それがあなたの内容を構築して、コミュニティとそれを共有する絶好の場所であるように感じます、しかし、私はあなた自身のサイトであなた自身のブログを持つところが利益を持つかもしれないのを見ることができます.うまくいけば、このポストはあなたに両方を持つことができる方法を示します.

OGメーラーパックから.
DED . TOの非常に要請されたが、明らかにほとんど知られていない特徴は、この5月以前にリリースされるその新しいです.それは、認証されたユーザーが作成、更新、および記事を読むことができますまっすぐ進む残りのAPIです.私自身の個人的なブログを更新するには、私はそれを使用して投稿をもたらすと専用のページに表示するために実験してきた、私はそれを提供する多くのことを感じている.私は、すべての終点に日付を利用していないが、私はしようとすると私はこれまで持っているものに触れると私はしないの私の計画を議論します.
私がここに示すのは、静的なサイト発生器を備えたdev記事APIを使用するための規範的なパスよりも実験的な戦略です.コードが私自身の現在の実装からである間、私はちょうど提案としてそれを見ることを勧めます.

前に移動する前に仮定と技術についてのクイックメモ。

As I mentioned before, a lot of the discussion I've seen has mentioned the option of rolling out a blog using a static site generator. Thus, the rest of this article assumes some familiarity with at least one static site generator tool. If you're unfamiliar with what a static site generator is, I highly recommended learning about the JAMStack architecture, and maybe exploring Gatsby or Gridsome, before coming back to this. Static site generators are a massive topic, but I've found these easy to get started with. I've already implemented this using Gridsome, a static site generator built using Vue.js, so my examples will be modeled on that. To the best of my knowledge, most static site generators will have the infrastructure in place to accomplish this, so don't feel locked into any one particular tool.

dev投稿リストの表示

投稿リストを入手しましょう.dev記事APIは、アクセストークンを必要としないポストを取得するためのget endpointを提供します.すべてのクエリ文字列をhttps://dev.to/api/articles .

https://dev.to/api/articles # Gets the top 30 "hottest" articles
https://dev.to/api/articles?tag=keyword# Gets articles tagged with "keyword"
https://dev.to/api/articles?username=thatUser # Gets articles written by thatUser
https://dev.to/api/articles?state=fresh # Gets "fresh" articles
https://dev.to/api/articles?state=rising # Gets "rising" articles
https://dev.to/api/articles?top=10 # Gets the top positively-reacted-to
                                   # articles from the past 10 days

それぞれのリクエストは通常、返されたポストをそれぞれ30の記事に分けます.次の30を取得するにはpage クエリ文字列は、過去10日から31から60までのトップ記事を見つけるようになります.

https://dev.to/api/articles?top=10&page=2

返される配列のJSONオブジェクトのそれぞれには、クエリ文字列パラメータに合う各ポストのメタデータとフロント問題が含まれます.それで、我々が使うならばhttps://dev.to/api/articles?username=cdvillard ブラウザでは、これらの吸盤の配列を取り戻すでしょう.

{
  type_of: "article",
  id: 90594,
  title: "RTFC: Why patience is a developer's best friend",
  description: "Patience as a virtue can mean a lot to a developer.",
  cover_image: "https://res.cloudinary.com/practicaldev/image/fetch/s--Rqg-VarX--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/36d4a4hhje64epv8248d.jpg",
  published_at: "2019-03-12T22:24:53.528Z",
  tag_list: [
    "edit",
    "beginners",
    "productivity",
    "cdvillard"
  ],
  slug: "rtfc-why-patience-is-a-developers-best-friend-l95",
  path: "/cdvillard/rtfc-why-patience-is-a-developers-best-friend-l95",
  url: "https://dev.to/cdvillard/rtfc-why-patience-is-a-developers-best-friend-l95",
  canonical_url: "https://dev.to/cdvillard/rtfc-why-patience-is-a-developers-best-friend-l95",
  comments_count: 0,
  positive_reactions_count: 11,
  published_timestamp: "2019-03-12T22:24:53Z",
  user: {
    name: "Charles D. Villard",
    username: "cdvillard",
    twitter_username: "cdvillard",
    github_username: "cdvillard",
    website_url: "http://cdvillard.github.io",
    profile_image: "https://res.cloudinary.com/practicaldev/image/fetch/s--cX9wiyae--/c_fill,f_auto,fl_progressive,h_640,q_auto,w_640/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/11581/9217c42f-218d-4a3c-b565-9a7e9b597cd1.jpg",
    profile_image_90: "https://res.cloudinary.com/practicaldev/image/fetch/s--xG2hWmsO--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/11581/9217c42f-218d-4a3c-b565-9a7e9b597cd1.jpg"
  }
}

あなたが前にdevで何かを発表したならば、私はあなたにそれにショットを与えるのを奨励して、あなたのものが見えるものを見ます.
選択の静的サイトジェネレータの推奨された実行に従って、クエリを希望する記事のGET要求を作成します.これはXMLHttpRequest , しかし、私はそれを少し簡単に自分でaxiosライブラリを使用します.

  // Starts a GET request to the DEV API
  axios.get("https://dev.to/api/articles?username=cdvillard&tag=cdvillard")
      .then(response => { // When a response is received
        this.blogList = [...response.data]; // Add that to my Vue data
      })
      .catch(err => { // If something goes wrong
        console.log(err); // Log it to the console
      })
  }

あなたは私がリクエストで私のユーザ名だけでなく、タグの質問をしていることに気づいたかもしれません.私のユーザー名?なぜ?さて、dev APIは記事を考える何かを返します.これは、フォーラムのようなポストを示すdevの方法である「議論」にタグ付けされるどんなポストも含みます.私のユーザー名で表示したいタグ付け記事は単にそれらをフィルタリングする回避策です.
フロントエンドにそのデータをもたらすのは、特定の静的サイトジェネレータのアーキテクチャに依存しますが、いったんアクセスする方法を学習したら、それを繰り返すことができます.静的サイトジェネレータのパワーの多くは、すべてがすぐにビルドして、通常はループを使用して反復マークアップを作成するための追加機能を意味するウェブサイトを実装することができることです.Gridsomeで、それはVueのものを使うことを意味しますv-for データを呼び出し、各オブジェクトをビルドするディレクティブ.

<!-- The v-for creates an instance of each "blog-preview" component 
for each "blog" in the "blogList" we got earlier, 
and attaches each property from the "blog" to an associated property 
of the "blog-preview" component. Kind of like connect-the-dots. 
If you want to learn more about Vue components and props, start with 
the Vue documentation at https://vuejs.org/v2/guide/components.html -->
<blog-preview v-for="blog of blogList"
  :key="blog.id"
  :blog-title="blog.title"
  :blog-description="blog.description"
  :blog-link="blog.canonical_url"
></blog-preview>

すべてがうまくいくならば、あなたはあなたの記事が選択のあなたのページにリストされているのを見るべきです.あなたが正確にどのようにこれを成し遂げたかについて見たいならば、見てくださいmy repo here .

私の現在の仕事は進行中のプレースホルダーで私のポスト

dev投稿の表示

それで、我々はポストと関連のリストを得ました、しかし、我々は適当なポストを実際に表示しませんでした.そのためには、別のAPIエンドポイントへの呼び出しを行う必要がありますid 記事の我々は探しています.APIのこの部分に関して作業するのと同じくらい多くの表面がありません、しかし、あなたはあなたの記事に関するすべての情報を得ます.依頼をするhttps://dev.to/api/articles/90594 このようなJSONオブジェクトを返します.

{
  type_of: "article",
  id: 90594,
  title: "RTFC: Why patience is a developer's best friend",
  description: "Patience as a virtue can mean a lot to a developer.",
  cover_image: "https://res.cloudinary.com/practicaldev/image/fetch/s--Rqg-VarX--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/36d4a4hhje64epv8248d.jpg",
  readable_publish_date: "Mar 12",
  social_image: "https://res.cloudinary.com/practicaldev/image/fetch/s--ENrc8Sz1--/c_imagga_scale,f_auto,fl_progressive,h_500,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/36d4a4hhje64epv8248d.jpg",
  tag_list: "edit, beginners, productivity, cdvillard",
  tags: [
    "edit",
    "beginners",
    "productivity",
    "cdvillard"
  ],
  slug: "rtfc-why-patience-is-a-developers-best-friend-l95",
  path: "/cdvillard/rtfc-why-patience-is-a-developers-best-friend-l95",
  url: "https://dev.to/cdvillard/rtfc-why-patience-is-a-developers-best-friend-l95",
  canonical_url: "https://dev.to/cdvillard/rtfc-why-patience-is-a-developers-best-friend-l95",
  comments_count: 0,
  positive_reactions_count: 11,
  created_at: "2019-03-12T22:22:46Z",
  edited_at: "2019-05-18T13:24:39Z",
  crossposted_at: null,
  published_at: "2019-03-12T22:24:53Z",
  last_comment_at: "2019-03-12T22:24:53Z",
  body_html: "<p>I'm typically not a patient person. It's a flaw I cop to a lot, and it's something I actively...",
  ltag_style: [ ],
  ltag_script: [ ],
  user: {
    name: "Charles D. Villard",
    username: "cdvillard",
    twitter_username: "cdvillard",
    github_username: "cdvillard",
    website_url: "http://cdvillard.github.io",
    profile_image: "https://res.cloudinary.com/practicaldev/image/fetch/s--cX9wiyae--/c_fill,f_auto,fl_progressive,h_640,q_auto,w_640/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/11581/9217c42f-218d-4a3c-b565-9a7e9b597cd1.jpg",
    profile_image_90: "https://res.cloudinary.com/practicaldev/image/fetch/s--xG2hWmsO--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/11581/9217c42f-218d-4a3c-b565-9a7e9b597cd1.jpg"
  }
}

The body_html プロパティは、あなたの目をキャッチする可能性があります、それを使用して、ブログ投稿をフォーマットすると来る多くのクラッシュをカットすることができます.

投稿、投稿、更新

APIを使ってdevに投稿するとき、私はまだ自分でそれを使うことを学んでいることを認めなければなりません.私はまだそれを実験していないが、私はこれがdevのAPIの本当の力が耐えるようになるところだと感じている.理論的には、静的に生成されたサイトを持つ誰かが自分のサイトを維持しながら、dev . toにクロスポストすることができます.それが正確に行われる方法は別のブログポストのための問題です、しかし、我々がJamstackの中で働いているならば、これはServerlessな機能が遊びに来るところです.これを実装する方法を見るために、今後はNetlifyと機能サービスを試してみます.

ここからどこへ行くか

私があなたがこれから取ることを望むものは、dev APIがどれくらいフレキシブルでありえるか、そして、どのように両方ともあなた自身のブログをロールバックして、dev . toでポストすることが可能です.この執筆の時点で、私は、そうすることがSEOの上に持っているかもしれないことについてコメントすることができません、しかし、私はあなたを見つけるために交通をドライブしないどんな重要な否定的な影響も予見しません.個人的には、皆さんがそれについて考えていることがコミュニティに加わって、もっと面白いものになることを願っています.より多くの声、より良い.