サイト制作

タイトルの通りです。Netlifyでhugoを使う際にSass/SCSSが使えるようになりました。 Hugoでは2018/7リリースのv0.43でHugo Pipesという機能が追加され、Sass/Scssやminifyが使えるようになりました。 なのですが、Netlifyでビルドする場合はビルドイメージがUbuntu 14.04 LTS (Trusty)だったため、Pipesが利用できず、 ビルド済みのリソースをコミットしてpushする LD_LIBRARY_PATHを上書きする といったワークアラウンドで対応する必要がありました。 このたびビルドイメージがUbuntu 16.04 LTS (Xenial)になったので、netlifyでのビルド時にもPipesの機能が標準で利用できるようになりました。 A more flexible build architecture with updated Linux ということでやってみました。 ビルドイメージでUbuntu 16.04 LTS (Xenial)を指定する 新規で作成したプロジェクトは最初からXenialが指定されるようですが、既存のプロジェクトは明示的に変更してあげる必要があります。 Deploys -> Deploy settings -> Build image selectionと辿り、Edit settingsをクリックすると次のように選択可能となっているので、Xenialを選択し Saveをクリックするだけです。簡単ですね。 capture at Netlify Sponsored Link (adsbygoogle = window.adsbygoogle || []).push({}); ふつうにscssのアセットを使う 使い方はhugoの話になるので詳細は下記に書いてある通りです。 Hugo Pipes Overview And Now: Hugo Pipes!

Netlifyを使う最低限の設定もおおよそ終わりましたが、もう少しだけ細かい設定を行っていきます。 netlifyのサブドメインを独自ドメインへリダイレクトする 何もしなければ独自ドメインを使用する場合もhttps://example.netlify.comでアクセスすることはできますが、同じコンテンツに複数のURLが存在することは好ましくないと思いますし、hugoのthemeで絶対URLが記載されていた場合はそもそもサイトが正常に機能しない可能性があります。あとはサイト内に独自ドメインが表記されていた場合にブラウザのURLと異なりユーザが混乱する、等の不都合が発生します。 ということで、https://example.netlify.comを独自ドメインにリダイレクトするよう手当てします。 Netlifyでは_redirectsというファイルを公開するコンテンツのrootに配置した場合、その内容に従ってリダイレクトさせることが可能です。 このファイルでできることの詳細はドキュメントを参照していただければと思いますが、単純にNetlifyのサブドメインを独自ドメインにリダイレクトさせる場合、下記のような表記をすることとなります。 # 転送元のURL 転送先のURL ステータスコード https://example.netlify.com/* https://www.example.com/:splat 301! 上記例では、https://example.netlify.com/ を含むすべてのURLへのアクセスをhttps://www.example.com/へステータスコード301でリダイレクトします。:splatは*の内容が置き換えられるため、サブディレクトリ以下もすべてリダイレクトされることとなります。 _redirectsの配置場所は公開ディレクトリのrootに配置すると書きましたが、サイトをzipでアップロードする場合は自分でzipに_redirectsを含めればよいのですが、hugo等の静的コンテンツジェネレータを使用してNetlifyで自動ビルドする場合はそうはいかず、何らかの手段で公開ディレクトリに配置する必要があります。ビルド時にファイルをコピーしてもよいのですがスマートではない気がしたので、私の場合はこのファイルもhugoに生成させることにしました。 基本的にはレイアウトを作成し、そのレイアウトにデータを差し込むことでファイルを作ります。html等と同じ流れですが、独自のファイルタイプを定義する必要があります。 config.tomlには下記のように記載しました。まず、拡張子の無いファイル向けのmimetypeをtext/noneと定義しています。 次に、_redirects用のフォーマットとして上記mimetypeを用いて_redirectsというファイル名でファイルを生成するよう定義しました。また、ドメインを変更する機会はないと思いますがテンプレートなので_redirectsに転送元URLをハードコードするのはなんだかなぁ、と思ったので転送元URLをparams.netlifyとしてパラメタ化しています。 # custom mimetype [mediaTypes."text/none"] suffix = "" delimiter = "" # format for _redirects [outputFormats.REDIRECTS] mediatype = "text/none" baseName = "_redirects" isPlainText = true notAlternative = true [params.netlify] originURL = "https://example.netlify.com" Sponsored Link (adsbygoogle = window.adsbygoogle || []).push({}); 次にテンプレートとしてlayouts/index.redirectsを下記のように作成しました。hugoを使用する場合.Site.BaseURLはconfig.tomlで定義されているはずです。 {{ .

今回はNetlifyにて独自ドメインやHTTPS化の設定を行っていきます。 自動生成されたURLを変更する Netlifyでは、サイト作成直後はhttps://president-cushion-68227.netlify.comのようなpresident-cushion-68227の部分が自動生成されたドメインとなります。独自ドメインを使用するにせよしないにせよ、自分で管理しやすい文字列に変更したくなるのは人間のサガなのでしょう。ということでこれを変更します。 設定画面のSite information内、Change site nameをクリックするとnetlify.comより前の部分が入力できるようになるので、入力後Saveをクリックするだけです。簡単ですね。 capture at Netlify capture at Netlify 独自ドメイン設定 Webサイトを作ると独自ドメインで運用したくなるものですね。NetlifyとDNSで独自ドメインの設定を行っていきます。 Netlifyの設定 Domain settingsからCustom domainの項目内、Set a custom domainをクリックします。 capture at Netlify その後独自ドメインを入力し、Saveをクリックします。 capture at Netlify その後、This site is using the custom domain ******と表示されればNetlify側での設定は完了です。簡単ですね。 capture at Netlify DNSの設定 今回はwww.example.comのように、サブドメインとしました。Netlifyのサイトを見ていると、CNAMEでネイキッドドメインを使用することは推奨していない様子。NetlifyのCDNが利用できなかったり、そもそもMXレコードやTXTレコードが使用できない、といった制約が発生するから、とのこと。 DNSサーバによってはANAME(NS1)レコードやALIASレコード(DNS Made Easy, Route53)が用意されており、これらを用いてネイキッドドメインを使用することは問題無いようです。 今回はお名前.

このブログをどこに配置しようかと考えた際に、VPSやパブリッククラウドは構築や運用が面倒なのでもっと楽な環境に配置しよう、と考えました。かつ無料。お金はかけたくない…(ドメインはお金払ってるけど) Netlifyを使う hugoで静的コンテンツを生成するので、GitHub Pagesあたりに置いてCloudFlareでhttps化しようかと思ったのですが、2つのサービスを使うのも面倒だと思いhttpsをやめるか、いやいやもっと別のサービスを使うか、と思っていたらNetlifyを見つけました。 Netlifyであれば無料で静的コンテンツのホスティング、さらに独自ドメインでhtttpsが使えて無料…！ということでひとまずNetlifyを使ってみて、問題があればGitHub pages+CloudFlareに変えればいいか、ということで今回はNetlifyにデプロイするまでのことを書いていきます。 Netlifyは他にも CDN DNSサーバ フォーム などなど、色々な機能がてんこ盛りです。 アカウント作成 トップページ右上のSign Upボタンよりアカウント作成を行います。 メールアドレス+パスワードでアカウント作成を行うことも可能ですが、GitHubやBitbucketのアカウントと連携させてSSOすることも可能です。 私はメールアドレス+パスワードでアカウントを作成しましたが、メールでVerificationコードが送られてきて、その値を入力することでアカウント作成は完了しました。 プロジェクト作成 Netlifyでデプロイする方法は下記3つです。 zipでアップロード GitHubやBitbucketと連携してデプロイ CLIでデプロイ ひとまずzipをアップロードしてみました。ログイン直後の画面にzipファイルをドラッグアンドドロップすることでアップロードできます。 capture at Netlify アップロードした内容はディレクトリにindex.htmlだけ入れてzipしたものです。 $ tree hello_netlify hello_netlify └── index.html 0 directories, 1 file $ cat hello_netlify/index.html <!DOCTYPE html> <html> <head> <title>Hello Netlify!</title> <meta charset="utf-8"> </head> <body> Hello Netlify! </body> </html> $ zip hello_netlify.zip hello_netlify/* $ ls | grep zip hello_netlify.

前回のpostでデザインの修正を行ったので、あとは設定ファイル等細かい部分を作っていきます。 faviconを追加する 今回のthemeではfaviconが設定されていません。themeの内容を確認したところ、themes/robust/layouts/partials/meta.htmlがすべてのページで読み込まれる、headタグ内に挿入されるpartialの用でした。従って、このpartialをlayout/partials/以下にコピーし、下記内容を追記しました。 <link rel="shortcut icon" href="/images/favicon.ico" /> これによりhttp://example.com/images/favicon.icoがfaviconのURLとなりますが、images/favicon.icoは静的ファイル、つまりstatic/以下のファイルを返すので、static/images/favicon.icoにファイルを配置することで任意のfaviconを使用することができます。 記事作成時のアーキタイプを修正する これはthemeというわけではないですが、themeに合わせてhugo newした際に出力されるmdファイルのデフォルト値を設定します。下記のようにしました。tocは目次を生成するかしないかです。 --- date: {{ .Date }} toc: true title: "{{ replace .TranslationBaseName "-" " " | title }}" tags: [] draft: true --- config.tomlの修正 見た目が整ったので、あとは全体的な設定を行います。 config.tomlで最低限下記の要素を修正する必要があります。 baseURL … 実運用環境でのURL languageCode … 日本語コンテンツなのでja-jp title … サイトのタイトル 他にGoogleAnalyticsやDisqus、今回使用するthemeであるRobustにおいてはauthor、各種シェアボタンやGoogle Adsenseに関する設定を必要に応じて行います。Robustの設定についてはRobustを参照してください。私は[outputs]と[params.author]を設定しました。 Sponsored Link (adsbygoogle = window.adsbygoogle || []).push({}); 記事を書いてビルド あとはhugo new post/*****で記事を書いていきます。 下記のようにFrontMatterのdraftはfalseにし、必要に応じてtagsとcategoriesにより記事にタグをつけ、カテゴリ分けましょう。Robustではサイドバーにタグごと、カテゴリごとのインデックスが生成されます。

前回のpostでhugoの動作確認までできました。 今回は、幾つかthemeにはない要素を追加したいので、themeをカスタマイズしていきます。 hugoでのテンプレートとthemeの考え方 themeのカスタマイズと書きましたが、themeディレクトリ以下のファイルを直接編集はしません。 Section Page Templates#Section Template Lookup Orderによるとテンプレートは下記の順番で探し、最初に見つかったものが適用されるとのこと。 なので、theme以下のテンプレートをlayouts以下にコピーした上で編集します。 /layouts/section/<SECTION>.html /layouts/<SECTION>/list.html /layouts/_default/section.html /layouts/_default/list.html /themes/<THEME>/layouts/section/<SECTION>.html /themes/<THEME>/layouts/<SECTION>/list.html /themes/<THEME>/layouts/_default/section.html /themes/<THEME>/layouts/_default/list.html サイドバーコンテンツの追加 今回はサイドバーに固定ページのリンクを作りたいので、themes/robust/layouts/partials/sidebar.htmlをlayouts/partials/へコピーします。 mkdir layouts/partials cp themes/robust/layouts/partials/sidebar.html layouts/partials/ そしてlayouts/partials/sidebar.htmlを編集していきます。 いい感じの位置に下記内容を挿入しました。 <aside class="l-sidebar"> <div class="sections sidebar"> {{ partial "author.html" . }} {{ partial "fixed.html" . }} {{ partial "latests.html" . }} {{ partial "categories.html" . }} {{ partial "tags.html" . }} </div> </aside> RobustテーマのサイドバーにはLATESTSというブロックがあり、直近10件のコンテンツが表示されます。これに習い、fixed.htmlのpartialを作ります。 <section class="sidebar"> <header>PINNED</header> <div> <div class="articles sm"> {{ with .

ブログを始めるにあたってWordpressだと運用が面倒なので静的コンテンツ系(Jekyll、Octpress、Middleman)でやっていくか、前使ったことのあるMiddlemanでいくか、と思ったのですが、コンテンツ生成速度はhugoがとても速い、と評判なので今回はhugoを使ってみることにしました。 Hugoをインストールする macであればbrew installすればよいのですがLinuxなのでreleasesから最新版のバイナリをダウンロードしてきました。 必要に応じてURLやファイル名は変更する必要があります。 バイナリの配置先は/usr/local/bin/にしており、既にpathが通っています。 hugo versionで動作確認を行い問題ないことが確認できました。 $ wget https://github.com/gohugoio/hugo/releases/download/v0.29/hugo_0.29_Linux-64bit.tar.gz $ sudo tar -C /usr/local/bin/ -zxvf hugo_0.28_Linux-64bit.tar.gz hugo $ rm hugo_0.28_Linux-64bit.tar.gz $ hugo version Hugo Static Site Generator v0.27.1 linux/amd64 BuildDate: 2017-09-13T20:04:10+09:00 スケルトン作成 まずはスケルトンを作成します。最低限必要なファイルやディレクトリが作成されます。 $ cd /path/to/dir/ $ hugo new site . $ tree . ├── archetypes │ └── default.md ├── config.toml ├── content ├── data ├── layouts ├── static └── themes 対象のディレクトリでgit initした後だったので、下記のようなエラーが出ました。 already exists and is not empty このため実際にはhugo new site .