PageSourceSearch

https://hachibeedi.github.io/entry/first-announcement/

html hachibeedi.github.io collected 2026-10-03 09:16:06 UTC 27,594 bytes, 82 lines download raw bytes

1<!DOCTYPE html><html><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><link rel="preload" href="/component---src-layouts-index-js-42968e6cabcb64593260.js" as="script"/><link rel="preload" href="/component---src-templates-blog-post-js-280f953ea4cd5d4784ee.js" as="script"/><link rel="preload" href="/path---entry-first-announcement-889f5fa1f700745161e4.js" as="script"/><link rel="preload" href="/app-8687f8e1dae0408f8963.js" as="script"/><link rel="preload" href="/commons-491d5ca0d1c959d9adba.js" as="script"/>
1<script id="webpack-manifest">/*<![CDATA[*/window.webpackManifest={"231608221292675":"app-8687f8e1dae0408f8963.js","99219681209289":"component---node-modules-gatsby-plugin-offline-app-shell-js-5c4c5a0f7af9dc69d6d7.js","107818501498521":"component---src-templates-blog-post-js-280f953ea4cd5d4784ee.js","162114328119038":"component---src-templates-category-js-b4f519798a759ddd29f2.js","103555066157098":"component---src-templates-tags-jsx-fe72708d2817c16fd57e.js","35783957827783":"component---src-pages-index-js-5ed9a12ef947c59f5598.js","60335399758886":"path----45134130b5fdc2f253f2.js","210333531512890":"path---offline-plugin-app-shell-fallback-a0e39f21c11f6a62c5ab.js","33822018376237":"path---entry-first-announcement-889f5fa1f700745161e4.js","255379061177728":"path---entry-how-to-add-site-xml-244efc86e2be1fc9e413.js","34090190811920":"path---entry-how-to-add-category-and-tags-page-a4a6a9a93136523df498.js","82941879582923":"path---entry-redux-debounced-action-dispatcher-7f549fbb46cfbf0e493c.js","198794854434327":"path---entry-customize-layout-gatsby-js-94cd0e7356454881e54e.js","36935884228497":"path---entry-falsy-class-in-python-4321b117dc86a981d2b0.js","189899783941552":"path---entry-how-to-get-javascript-intellisense-in-vim-92ec58bc047342de2efc.js","80242908539581":"path---entry-make-pthons-async-easy-cd16feb786a46eabe22d.js","93741582871333":"path---entry-react-native-begginers-guide-ecb0e289d1b30cec791d.js","110283739657629":"path---entry-async-supported-json-rpc-handler-1275660cba54f6b4502b.js","112910364600428":"path---entry-unify-sync-and-async-function-in-python-08add278e059aa2e8a09.js","74075037689052":"path---entry-implement-next-and-previous-links-to-gatsby-5472cad014f072bdae10.js","277492152350788":"path---entry-things-must-consider-before-pick-typescript-b4f7b2fdfcd8f7252472.js","182809228375314":"path---categories-gatsby-8e59fad68a4c39640ad3.js","157901032369378":"path---categories-front-end-47ba41a2b856087aeec7.js","188831226752848":"path---categories-python-493b6e3001ffde7a7765.js","139962202150924":"path---categories-vim-4af707634669a3944bbb.js","35541176370285":"path---categories-mobile-app-ef67bddd1aa3db63329f.js","257736092105419":"path---categories-web-e90933f636f996dcafef.js","17976388717192":"path---tags-blog-11406eb1c5741887eb55.js","134928267902561":"path---tags-gatsby-5cf610e0ff92fb0cf92d.js","212641908305216":"path---tags-java-script-e4e5dbeb753ae3ff794e.js","84586273293571":"path---tags-react-884e122958086d6dd1f7.js","159190219261617":"path---tags-redux-d83d0ff077ec1d0010c4.js","7538477671963":"path---tags-python-707d0bdba2f06853b3cf.js","47342389504457":"path---tags-meta-programming-823841a6f626fd487fe4.js","166610389901754":"path---tags-vim-5862f92dae7b94de7f07.js","277630163300873":"path---tags-async-await-c596a49d93a738baba55.js","164326542535565":"path---tags-react-native-0a19f688d6f6a93d369b.js","136751035466797":"path---tags-json-rpc-538c114659bcba6b1e44.js","63405928520024":"path---tags-async-98dd67c3081600adccb4.js","33543605589326":"path---tags-type-script-8bff81432a3e2f9d60d7.js","142629428675168":"path---index-8c738da33253e17d32e7.js","114276838955818":"component---src-layouts-index-js-42968e6cabcb64593260.js"}/*]]>*/</script>
1<title data-react-helmet="true">Gatsbyでブログを作る 技術系記事ははてなからGitHub Pageに移転させます | Hatch tech blog</title><meta data-react-helmet="true" name="description"/><meta data-react-helmet="true" name="image"/><meta data-react-helmet="true" property="og:url" content="https://hachibeedi.github.io/first-announcement"/><meta data-react-helmet="true" property="og:type" content="article"/><meta data-react-helmet="true" property="og:title" content="Gatsbyでブログを作る 技術系記事ははてなからGitHub Pageに移転させます"/><meta data-react-helmet="true" property="og:description"/><meta data-react-helmet="true" property="og:image"/><meta data-react-helmet="true" property="fb:app_id" content=""/><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"/><meta data-react-helmet="true" name="twitter:creator" content="https://twitter.com/hatchinee"/><meta data-react-helmet="true" name="twitter:title" content="Gatsbyでブログを作る 技術系記事ははてなからGitHub Pageに移転させます"/><meta data-react-helmet="true" name="twitter:description"/><meta data-react-helmet="true" name="twitter:image"/>
1<script data-react-helmet="true" type="application/ld+json">[{"@context":"http://schema.org","@type":"WebSite","url":"https://hachibeedi.github.io//","name":"Gatsbyでブログを作る 技術系記事ははてなからGitHub Pageに移転させます","alternateName":"Tech blog about programming"},[{"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https://hachibeedi.github.io/first-announcement","name":"Gatsbyでブログを作る 技術系記事ははてなからGitHub Pageに移転させます"}}]},{"@context":"http://schema.org","@type":"BlogPosting","url":"https://hachibeedi.github.io//","name":"Gatsbyでブログを作る 技術系記事ははてなからGitHub Pageに移転させます","alternateName":"Tech blog about programming","headline":"Gatsbyでブログを作る 技術系記事ははてなからGitHub Pageに移転させます","image":{"@type":"ImageObject"}}]]</script>
1<script data-react-helmet="true" type="text/javascript" src="//b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async=""></script>
1<link rel="sitemap" type="application/xml" href="/sitemap.xml"/>
1<script>/*<![CDATA[*/!function(e,t,r){function n(){for(;d[0]&&"loaded"==d[0][f];)c=d.shift(),c[o]=!i.parentNode.insertBefore(c,i)}for(var s,a,c,d=[],i=e.scripts[0],o="onreadystatechange",f="readyState";s=r.shift();)a=e.createElement(t),"async"in i?(a.async=!1,e.head.appendChild(a)):i[f]?(d.push(a),a[o]=n):e.write("<"+t+' src="'+s+'" defer></'+t+">"),a.src=s}(document,"script",["/commons-491d5ca0d1c959d9adba.js","/app-8687f8e1dae0408f8963.js","/path---entry-first-announcement-889f5fa1f700745161e4.js","/component---src-templates-blog-post-js-280f953ea4cd5d4784ee.js","/component---src-layouts-index-js-42968e6cabcb64593260.js"])/*]]>*/</script>
1<style id="gatsby-inlined-css">code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:none;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#f8f8f2}.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}body,html{font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,Meiryo,Yu Gothic,YuGothic,Verdana,sans-serif}html{font-size:62.5%}body{font-size:1.5rem;line-height:2.4rem;color:#343434;margin:0}article{-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:unset}article p{color:#1f3129}@media (min-resolution:2dppx),only screen and (-webkit-min-device-pixel-ratio:2){article{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}a{text-decoration:none}ol,ul{padding-left:1.5rem}p>code{display:inline-block;padding:0 3px;background-color:#eaeaea}.blog-title{margin:0;font-size:4rem;margin:2px auto 4px}.container{height:100%;width:100%}.main-section{box-sizing:border-box;margin:auto;padding-bottom:16px;min-height:70vh;padding-right:12px;padding-left:12px;width:60%;min-width:780px}@media screen and (max-width:480px){.main-section{padding-right:0;padding-left:0;min-width:95vw}}@media screen and (max-width:768px){.main-section{padding-right:0;padding-left:0;min-width:85vw}}.main-header{border-bottom:1px solid #ededed;box-shadow:0 7px 21px -10px #A5A5A536;margin-bottom:36px}.main-header__inner{box-sizing:border-box;margin:auto;padding:12px 12px 13px;width:60%;min-width:780px}@media screen and (max-width:480px){.main-header__inner{padding-right:0;padding-left:0;min-width:95vw}}@media screen and (max-width:768px){.main-header__inner{padding-right:0;padding-left:0;min-width:85vw}}.footer{background-color:#35373e;
1color:#fff}.footer__inner{padding:28px 12px 12px;width:60%;min-width:780px;margin:auto}@media screen and (max-width:480px){.footer__inner{padding-right:0;padding-left:0;min-width:95vw}}@media screen and (max-width:768px){.footer__inner{padding-right:0;padding-left:0;min-width:85vw}}.footer__title{margin:8px auto}.copyright{font-size:90%}.copyright,.footer-icon-github{display:inline-block;vertical-align:bottom}.footer-icon-github{margin-left:24px;box-sizing:border-box;padding:5px;width:28px;height:28px;border-radius:50%}.tags{display:inline-block;margin:4px;padding:2px 6px;border:1px solid #eee;background-color:#fbfbfb;border-radius:2px;box-shadow:none}.tags:first-child{margin-left:0}.main-article{min-height:90vh}.article-title{color:#2b2323;font-size:2.2rem;line-height:2.6rem}.markdown-section h1,.markdown-section h2,.markdown-section h3,.markdown-section h4,.markdown-section h5{font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,Meiryo,Yu Gothic,YuGothic,Verdana,sans-serif;color:#2b2323}.markdown-section h1,.markdown-section h2{margin:2.5rem auto 1.4rem}.markdown-section h3,.markdown-section h4{margin:2.2rem auto 1rem}.markdown-section h2+h3{margin-top:0}.sns-share__area{margin:0;padding:0;list-style:none;min-height:50px}.sns-share__button{display:inline-block;margin:0 8px}.sns-share__button:first-child{margin-left:0}.categories{list-style:none;list-style-margin:0}.post-nav{margin:32px auto}.post-nav__link{line-height:8px}.post-nav__side{margin-bottom:12px}.post-nav__label{display:block}.article-card{box-sizing:border-box;padding:24px 18px;border:1px solid #ededed;border-bottom:2px solid #f6f6f6;border-radius:3px;box-shadow:0 7px 20px -9px #d4d4d4;margin:24px auto}.article-card:hover{border-color:1px solid #e2e2e2;background-color:#fefefe;box-shadow:0 8px 20px -5px #d4d4d4}.article-card__excerpt,.article-card__title{margin:auto}.bio{display:flex;align-items:center;margin:42px auto}.bio__author-photo-space{flex-grow:0;flex-basis:86px;max-width:86px}.bio__author-description-space{width:auto}.bio__author-photo{border-radius:50%}.bio__author-name{font-size:1.7rem;font-weight:700}.bio__author-role{font-size:1.3rem;line-height:1rem;color:#656565}.bio__author-links{list-style:none;margin:.8rem auto;padding-left:0;line-height:1.7rem}</style></head><body><div id="___gatsby"><section class="container" data-reactroot="" data-reactid="1" data-react-checksum="1055854804"><header class="main-header" role="banner" data-reactid="2"><div class="main-header__inner" data-reactid="3"><h3 style="margin:0;" data-reactid="4"><a style="box-shadow:none;text-decoration:none;color:inherit;" href="/" data-reactid="5">Hatch tech blog</a></h3></div></header><div class="main-section" data-reactid="6"><article class="main-article" role="main" data-reactid="7"><!-- react-empty: 8 --><!-- react-empty: 9 --><header data-reactid="10"><h1 class="article-title" data-reactid="11">Gatsbyでブログを作る 技術系記事ははてなからGitHub Pageに移転させます</h1><nav role="navigation" data-reactid="12"><div data-reactid="13"><!-- react-text: 14 -->Category: <!-- /react-text --><a href="/categories/gatsby" data-reactid="15">Gatsby</a></div><div data-reactid="16"><a class="tags" href="/tags/blog" data-reactid="17"><span data-reactid="18">Blog</span></a><a class="tags" href="/tags/gatsby" data-reactid="19"><span data-reactid="20">Gatsby</span></a><a class="tags" href="/tags/java-script" data-reactid="21"><span data-reactid="22">JavaScript</span></a></div></nav><p style="font-size:12px;display:block;margin-bottom:26px;" data-reactid="23">October 14, 2017</p></header><section class="markdown-section" data-reactid="24"><h2>技術系ブログ記事をはてなブログから移転します</h2>
2<p>今まではこちらのはてなブログ <a href="http://hachibeechan.hateblo.jp/">タオルケット体操</a> で色々とごっちゃにしながらブログを書いてきましたが、て遊びに書いているゲームのレビュー記事ばかりがアクセスを集めていて何が何だかな感じになってしまったことや、カスタマイズがクソ面倒臭いこと、そしてhttps対応がどうにも後手であったことなどがひっかかってきたため、これから技術記事はGitHub.ioを利用してホスティングしていこうかとおもいます。</p>
3<h3>ブログジェネレーターにはGatsbyを利用しました</h3>
4<p><a href="https://github.com/gatsbyjs/gatsby">gatsbyjs/gatsby</a></p>
5<p>ReactとGraphQLベースで作られた、SPAとして動作するらしいナウなブログジェネレーターみたいです。<br>
6早いっぽいみたいです。あとReactなんでカスタマイズとかがしやすそうなのが気に入りました。どうやらですが、Nodeのサーバーを使ってGraphQLベースでホスティングすることもできるし、GitHub Pagesで運用できるようindex.html一枚で動作するようにもできるみたいです。たぶんGraphQLのリクエストに一枚層を被せているんでしょうがまだそこまã
6§ã‚½ãƒ¼ã‚¹ã‚³ãƒ¼ãƒ‰ã¯èª­ã‚“でいません。</p>
7<h2>GatsbyとGitHub.ioのアカウントページでブログを公開するまでのやりかた</h2>
8<p>ブログジェネレーターとしてではなく、どちらかといえば汎用的なCMSとして開発されているようです。<br>
9そういう意味でカスタマイズ性はかなり高い(他のジェネレーターを使ったことがないのでわかりませんが…)ようにみえます。その反面、システムとしては複雑で、エンジニア以外の人間が運用するのは無理っぽいですね。そして、まだまだ若いプロジェクトなのでドキュメントがほとんどありません。適宜GitHubのIssueで行われている議論や、最悪ソースコードを読んでやっていく必要があります。そういう意味でフロントエンドに詳しくない人がこれを使うのはやめておいた方がいいでしょう。</p>
10<p>検索すると何人か導入記事を書いている人がいるのですが、「GitHub Pagesで使える!」とか書いておきながらそっちには一切言及せずにNetlifyを使ってホスティングしている釣り記事ばっかりで全く役に立たず、正直なところこれをデプロイするまでにだいぶ手間取ってしまいました。</p>
11<p>前置きはこの辺で使い方です。</p>
12<p>あ、ちなみにですがたぶんNetlifyでホスティングしたほうがCI連携とかもしやすくてたぶん楽だとおもいます。</p>
13<ol start="0">
14<li>${アカウント名}.github.io なリポジトリを作成</li>
15</ol>
16<p>  この辺については記事が無数にあるので詳しくは説明しません。</p>
17<p>  同時にdevelopというブランチも作っておきましょう。</p>
18<ol>
19<li>Starterをクローン</li>
20</ol>
21<p>  <a href="https://github.com/gatsbyjs/gatsby-starter-blog">gatsbyjs/gatsby-starter-blog</a></p>
22<p>  ブログを書くのが目的なのであればとりあえずスターターキットを使うのがいいでしょう。</p>
23<ol start="2">
24<li>リモートブランチを紐付け</li>
25</ol>
26<p>  <code>git remote set-url origin [email protected]:$(your-account)/$(account-name).github.io.git</code>
27あとはこのdevelopブランチをpushしておきましょう。</p>
28<ol start="3">
29<li>ビルドスクリプトの改変</li>
30</ol>
31<p>  package.jsonに <code>deploy</code> というコマンドが登録されていますが、これはgh-pageようでアカウントページようには使えないので新しいものを登録します。<br>
32<code>"build-gh-io": "gatsby build --prefix-paths",</code> とでもしておきましょう。</p>
33<ol start="4">
34<li>デプロイ</li>
35</ol>
36<p>  <code>npm run build-gh-io</code> を走らせることで <code>public</code> というディレクトリが生成されるはずです。<br>
37ビルドが完了したら <code>public</code> ディレクトリに移動しましょう。そしたら中で <code>git init</code> して、こちらも先ほどと同様にリモートブランチを登録します。<br>
38あとは <code>git add -u; git commit</code> して、masterブランチとしてoriginにpushしましょう。</p>
39<div class="gatsby-highlight">
40      <pre class="language-bash"><code>$ <span class="token function">npm</span> run build-gh-io
41$ <span class="token function">cd</span> public
42$ <span class="token function">git</span> init
43$ <span class="token function">git</span> remote set-url origin [email protected]:<span class="token variable"><span class="token variable">$(</span>your-account<span class="token variable">)</span></span>/<span class="token variable"><span class="token variable">$(</span>account-name<span class="token variable">)</span></span>.github.io.git
44$ <span class="token function">git</span> add -u
45$ <span class="token function">git</span> commit
46$ <span class="token function">git</span> push origin master
47</code></pre>
48      </div>
49<p>おめでとうございます。これでデプロイは完了です。Kyleさんの顔写真とデフォルトのポストがいくつか表示されているはずです。</p>
50<h4>Bioの改変と記事の投稿</h4>
51<p>grepかなんかすればわかりますがbioは <code>src/components/Bio.js</code> にあります。適当に編集しましょう。<br>
52記事は <code>src/pages/</code> 以下にあります。適当に投稿しましょう。</p>
53<p>おめでとうございます。これでブログはあなたのものです。</p>
54<h4>その他</h4>
55<p><code>static/</code> 以下にfaviconとrobots.txtがあるので必要に応じて適当に編集しておくといいでしょう。<br>
56sitemap.xmlは……暇なときに調べておきます。</p>
57<p>ではこのへんで。</p></section><footer data-reactid="25"><ul class="sns-share__area" data-reactid="26"><!-- react-empty: 27 --><li class="sns-share__button" data-reactid="28"><div role="button" tabindex="0" class="SocialMediaShareButton SocialMediaShareButton--facebook" data-reactid="29"><div style="width:32px;height:32px;" data-reactid="30"><svg viewBox="0 0 64 64" fill="white" width="32" height="32" class="social-icon social-icon--facebook " data-reactid="31"><g data-reactid="32"><circle cx="32" cy="32" r="31" fill="#3b5998" data-reactid="33"></circle></g><g data-reactid="34"><path d="M34.1,47V33.3h4.6l0.7-5.3h-5.3v-3.4c0-1.5,0.4-2.6,2.6-2.6l2.8,0v-4.8c-0.5-0.1-2.2-0.2-4.1-0.2 c-4.1,0-6.9,2.5-6.9,7V28H24v5.3h4.6V47H34.1z" data-reactid="35"></path></g></svg></div></div></li><li class="sns-share__button" data-reactid="36"><div role="button" tabindex="0" class="SocialMediaShareButton SocialMediaShareButton--googlePlus" data-reactid="37"><div style="width:32px;height:32px;" data-reactid="38"><svg viewBox="0 0 64 64" fill="white" width="32" height="32" class="social-icon social-icon--google " data-reactid="39"><g data-reactid="40"><circle cx="32" cy="32" r="31" fill="#dd4b39" data-reactid="41"></circle></g><g data-reactid="42"><path d="M25.3,30.1v3.8h6.3c-0.3,1.6-1.9,4.8-6.3,4.8c-3.8,0-6.9-3.1-6.9-7s3.1-7,6.9-7c2.2,0,3.6,0.9,4.4,1.7l3-2.9c-1.9-1.8-4.4-2.9-7.4-2.9c-6.1,0-11.1,5-11.1,11.1s5,11.1,11.1,11.1c6.4,0,10.7-4.5,10.7-10.9c0-0.7-0.1-1.3-0.2-1.8H25.3L25.3,30.1z M49.8,28.9h-3.2v-3.2h-3.2v3.2h-3.2v3.2h3.2v3.2h3.2v-3.2h3.2" data-reactid="43"></path></g></svg></div></div></li><li class="sns-share__button" data-reactid="44"><div role="button" tabindex="0" class="SocialMediaShareButton SocialMediaShareButton--linkedin" data-reactid="45"><div style="width:32px;height:32px;" data-reactid="46"><svg viewBox="0 0 64 64" fill="white" width="32" height="32" class="social-icon social-icon--linkedin " data-reactid="47"><g data-reactid="48"><circle cx="32" cy="32" r="31" fill="#007fb1" data-reactid="49"></circle></g><g data-reactid="50"><path d="M20.4,44h5.4V26.6h-5.4V44z M23.1,18c-1.7,0-3.1,1.4-3.1,3.1c0,1.7,1.4,3.1,3.1,3.1 c1.7,0,3.1-1.4,3.1-3.1C26.2,19.4,24.8,18,23.1,18z M39.5,26.2c-2.6,0-4.4,1.4-5.1,2.8h-0.1v-2.4h-5.2V44h5.4v-8.6 c0-2.3,0.4-4.5,3.2-4.5c2.8,0,2.8,2.6,2.8,4.6V44H46v-9.5C46,29.8,45,26.2,39.5,26.2z" data-reactid="51"></path></g></svg></div></div></li><li class="sns-share__button" data-reactid="52"><div role="button" tabindex="0" class="SocialMediaShareButton SocialMediaShareButton--twitter" data-reactid="53"><div style="width:32px;height:32px;" data-reactid="54"><svg viewBox="0 0 64 64" fill="white" width="32" height="32" class="social-icon social-icon--twitter " data-reactid="55"><g data-reactid="56"><circle cx="32" cy="32" r="31" fill="#00aced" data-reactid="57"></circle></g><g data-reactid="58"><path d="M48,22.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6 C41.7,19.8,40,19,38.2,19c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5c-5.5-0.3-10.3-2.9-13.5-6.9c-0.6,1-0.9,2.1-0.9,3.3 c0,2.3,1.2,4.3,2.9,5.5c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1 c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,2.9,10.1,2.9c12.1,0,18.7-10,18.7-18.7 c0-0.3,0-0.6,0-0.8C46,24.5,47.1,23.4,48,22.1z" data-reactid="59"></path></g></svg></div></div></li><li class="sns-share__button" data-reactid="60"><a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-normal" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加" data-reactid="61"><img src="//b.st-hatena.com/images/entry-button/[email protected]" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border:none;" data-reactid="62"/></a></li></ul><hr style="margin-bottom:26px;" data-reactid="63"/><div class="post-nav" data-reactid="64"><div class="post-nav__side" data-reactid="65"><span class="post-nav__label" data-reactid="66">Next Post</span><a class="post-nav__link" href="/entry/how-to-add-site-xml" data-reactid="67">GatsbyへのSite.xmlの追加方法</a></div></div><aside class="bio " data-reactid="68">
57<div class="bio__author-photo-space" data-reactid="69"><img src="//ja.gravatar.com/userimage/41771054/43d236d88acc75effc5d65af6bef4fe5.jpg?size=200" alt="Writer of this blog" class="bio__author-photo" style="width:64px;height:64px;" data-reactid="70"/></div><div class="bio__author-description-space" data-reactid="71"><div class="bio__author-name" data-reactid="72">Ogura Daiki</div><div class="bio__author-role" data-reactid="73">Developer</div><ul class="bio__author-links" data-reactid="74"><li data-reactid="75"><!-- react-text: 76 -->Other articles is<!-- /react-text --><a href="http://hachibeechan.hateblo.jp/" rel="noopener noreferrer" data-reactid="77"> here.</a></li><li data-reactid="78"><a href="https://twitter.com/hatchinee" rel="noopener noreferrer" data-reactid="79">Twitter account</a></li></ul></div></aside></footer></article></div><footer class="footer" role="contentinfo" data-reactid="80"><div class="footer__inner" data-reactid="81"><h4 class="footer__title" data-reactid="82"><a style="box-shadow:none;text-decoration:none;color:inherit;" href="/" data-reactid="83">Hatch tech blog</a></h4><div class="copyright" data-reactid="84">Copyright © 2017. Ogura Daiki</div><a href="https://github.com/hachibeeDI/hachibeeDI.github.io" rel="noopener noreferrer" data-reactid="85"><i class="footer-icon-github" style="background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgYXJpYS1sYWJlbGxlZGJ5PSJ0aXRsZSIKYXJpYS1kZXNjcmliZWRieT0iZGVzYyIgcm9sZT0iaW1nIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgPHRpdGxlPkdpdGh1YjwvdGl0bGU+CiAgPGRlc2M+QSBsaW5lIHN0eWxlZCBpY29uIGZyb20gT3Jpb24gSWNvbiBMaWJyYXJ5LjwvZGVzYz4KICA8cGF0aCBkYXRhLW5hbWU9ImxheWVyMSIKICBkPSJNMzIgMS45NTJhMzAuMDE5IDMwLjAxOSAwIDAgMC05LjQ2OSA1OC41YzEuNS4yODEgMi4wNjMtLjY1NiAyLjA2My0xLjQwNnYtNS42MjVjLTguMzQ0IDEuNzc5LTEwLjEyNS0zLjU2My0xMC4xMjUtMy41NjMtMS40MDYtMy40NjktMy4zNzUtNC40MDYtMy4zNzUtNC40MDYtMi43MTktMS44NzUuMTg3LTEuNzgxLjE4Ny0xLjc4MSAzIC4xODggNC41OTQgMy4wOTQgNC41OTQgMy4wOTQgMi43MTkgNC41OTQgNy4wMzEgMy4yODEgOC43MTkgMi41MzFhNi41IDYuNSAwIDAgMSAxLjg3NS00LjAzMWMtNi42NTYtLjc1LTEzLjY4OC0zLjM3NS0xMy42ODgtMTQuODEyYTExLjUgMTEuNSAwIDAgMSAzLjA5NC04LjA2MyAxMS4yMTcgMTEuMjE3IDAgMCAxIC4yODEtNy45NjlzMi41MzEtLjg0NCA4LjI1IDMuMDk0YTI4Ljk0NCAyOC45NDQgMCAwIDEgNy41LTEuMDMxIDI4LjQgMjguNCAwIDAgMSA3LjUgMS4wMzFjNS43MTktMy44NDQgOC4yNS0zLjA5NCA4LjI1LTMuMDk0YTExLjIxNyAxMS4yMTcgMCAwIDEgLjI4MSA3Ljk2OSAxMS4zNCAxMS4zNCAwIDAgMSAzLjA5NCA4LjA2M2MwIDExLjUzMS03LjAzMSAxNC4wNjMtMTMuNjg4IDE0LjgxM2E3LjI2MiA3LjI2MiAwIDAgMSAyLjA2MyA1LjUzNHY4LjI1YzAgLjg0NC41NjIgMS42ODcgMi4wNjMgMS40MDZBMzAuMDE5IDMwLjAxOSAwIDAgMCAzMiAxLjk1MnoiCiAgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIKICBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvcGF0aD4KPC9zdmc+Cg==);" data-reactid="86"></i></a></div></footer></section></div>
57<script>
vendor: 348 bytes, lines 57-64
57
58  
59  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
60  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
61  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
62  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
63
64  ga('create', '
64UA-44410419-7
vendor: 14 bytes, lines 64-65
64', 'auto');
65  
65</script>
65<script>
66          window.twttr = (function(d, s, id) {
67  var js, fjs = d.getElementsByTagName(s)[0],
68    t = window.twttr || {};
69  if (d.getElementById(id)) return t;
70  js = d.createElement(s);
71  js.id = id;
72  js.src = "https://platform.twitter.com/widgets.js";
73  fjs.parentNode.insertBefore(js, fjs);
74
75  t._e = [];
76  t.ready = function(f) {
77    t._e.push(f);
78  };
79
80  return t;
81}(document, "script", "twitter-wjs"));
82      </script>
82</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.