Hugo で画像をリサイズしたりトリミングしたりするテンプレートを書いてみる
Drupal をはじめとする一般的な CMS であれば、アップロードした画像ファイルのサイズ調整などを自動で処理する機能が準備されています。 Hugo にも同様の機能 がありましたので、試してみました。 やりたいことは、ブログ一覧に表示されるタイトル画像を縮小すること。そして、ブログの各投稿のページは上下を切り取った画像を表示すること。この 2 点です。 しかし、思った通りに動作しません。調べながら画像ファイルのサイズ調整の仕組みを作っていたのですが、結構はまってしまったのでまとめておこうと思います。 画像ファイルは記事毎に置く 先に結論を書きます。これが出来ていないから動作しませんでした。 Hugo のサイト にも次のように書かれています : The image is a Page Resource, and the processing methods listed below doe
Hugo で画像ファイルを Markdown ファイルと同じディレクトリに置く (Page Bundle)
ページバンドルとは初期の頃の Hugo では、画像ファイルは static ディレクトリに置いて、記事ファイル (Markdown) と別々のディレクトリで管理するという方法がとられていました。 content/_index.mdpage1.mdpage2.mdpage3.mdstatic/image1.pngimage2.pngimage3.pngしかし、これでは Markdown ファイルと画像ファイルをバラバラに管理しないといけないというユーザーの不満が出て、現状は content ディレクトリ以下に一緒に配置できるようになっています。 この仕組みを ページバンドル (Page Bundle) と言います。 参考: Page Bundles - Hugoページバンドルは、その名のとおり、各ページにバンドルする形で画像ファイル（リソース）を保持するという考え方です。 ページバンドルを作
HexoからHugoに移行する - ぺーぺーSEのテックブログ
Hexo から Hugo に移行する時のメモ。 タイトルは「移行する」だが、「移行」の方法については書いてない。 各記事 Markdown のフロント（ヘッダ？）部分の yaml が違うだけなので量が多ければスクリプトなどへ変換されたし。（人によって設定も違うし） Hugo 環境構築 記事の作成 Tips Hugo 環境構築 インストールは以下。 $ brew install hugo $ which hugo /usr/local/bin/hugo $ hugo version Hugo Static Site Generator v0.55.6/extended darwin/amd64 BuildDate: unknown $ hugo new site tech-blog-hugo Congratulations! Your new Hugo site is created in
【Hugo】静的サイトジェネレーターでのサイト作成方法｜CGメソッド
OSのよってデータが違います。今回はWindows版をダウンロード。 ディレクトリの作成 C:Hugoに「Hugo」フォルダを作成「hugo_バージョン名_Windows-64bit」フォルダをbinという名前に変えて、C:Hugobinに配置C:Hugositesに「sites」フォルダを作成 環境変数の設定 パスを保存して、コマンドを使えるようにします。 せっかくなのでこれもコマンドプロンプトで設定します。 win+Rから「cmd」と検索してコマンドプロンプトを起動 setx path "PATH=%PATH%;C:Hugobin" と入力。「成功: 指定した値は保存されました。」と表示されればOK 環境パスの設定がうまくいかない時 Hugoのコマンドの前にパスを入れましょう。 C:Hugobinhugo という感じにする方法もあります。 コマンドが使えるか確認 コマンドプロンプトで下
JekyllからHugoへの移行ポイント - SIS Lab
Hugoが爆速であること、HugoがGolangで作られていて読みながら勉強したいという理由で、JekyllからHugoに移行した。 基本的には、_postディレクトリにあるものを、Hugoでいうcontent/postディレクトリに配置すればよい。テーマを指定せずに、Hugoとしても何も出力されないのでそこは注意すること。 JekyllからHugoへ移行する際にハマった点を残しておく。 日付フォーマットの変更2015-08-30-post.markdown jekyllだと、2015-08-30 10:30で認識していたが、Hugoで読み取る日付フォーマットは、以下の通り。 2006-01-02T15:04:05Z07:002006-01-02T15:04:05Mon, 02 Jan 2006 15:04:05 -0700Mon, 02 Jan 2006 15:04:05 MST02 J
Hugoの基本的な使い方 · MM2E
Hugoいいですよ、Hugo。 まぁ静的サイトジェネレータ界隈は結構乱立してるので、別にHugoじゃなくてもいいんですけどね。エンジニア的にはエディタ×ターミナルでこなせることは重要なわけです( エディタとターミナルなら普段から使ってるので業務中にブログ書いてても怪しまれないですし )。 記事を作成する $ hugo new post/[filename].md 特になにも設定してなければ、 filename がそのまま記事URLになります。まぁただ書くならこれでもいいんですが、mdファイルの slug で指定できるので、気になる、あるいは公開URLは別で指定したいって場合は、 slug を使った方がいいでしょう。 で、 new すると、雛形が記入された状態でファイルが生成されます。雛形は自由にいじることができるので、お好みに合わせていじりましょう。 +++ date = "2016-02
Golang 製の爆速 Static Site Generator 「Hugo」のはまりポイント12 - (-> % read write unlearn)
前回の「Static Site Generator」エントリの続きです。 Static Site Generator の Hugo を使ってみました。 ビルドが爆速なのがすごく良いんですが、いくつかはまったのでまとめておきます。 実際には12個もはまってないんですが。 1. デフォルトのテーマ（theme）が設定されていないのでいきなり起動しても何も表示されない Hexoの場合 # hexo コマンドのインストール npm install hexo-cli -g # 新しいサイトを作成 hexo init blog && cd blog && npm install # ビルドしてサーバを起動 hexo server とするだけで、デフォルトで設定されたlandscapeというthemeで起動し、 http://localhost:4000/ を開けばトップページが見れます。 Hugoの場
静的サイトジェネレータHugoを使ったサイト構築（URL編）
こんにちは、tamaoki (@t0shiya) です。 今回は、静的サイトジェネレータ Hugo の URL について。 Hugoのデフォルト設定では、URLはコンテンツの配置によって決まりますが、フロントマターのパラメータで指定のURLに変更したり、エイリアスを配置することができます。 URLの変更(ページ単位) デフォルト設定では content/post/sample.md から以下のページが生成されます。 public/post/sample/index.html // URL: [baseurl]/post/sample/ // uglyURLs オプションが true の場合 public/post/sample.html // URL: [baseurl]/post/sample.html 任意のパスに変更したい場合は、フロントマターの url パラメータを使用します。 c
nginxで /welcomeとかを静的ファイルにマッピングする - Qiita
/welcomeをwelcome.htmlにマッピング /をindex.htmlにマッピング css js 画像も配信できるように location ~ ^/(index) {}がみそ。 /は/index.htmlに変換されてもう一度評価されるため、 上を書かないと、index.html.htmlなるファイルにアクセスしようとする。 listen 80; server_name stg.mono-street.at; access_log /var/log/nginx/stg.access.log; root /home/conoha/stg/htdocs; location = / { add_header Content-type text/html; default_type text/html; index index.html; root /home/conoha/stg/htd
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
なかけんのHugoノート
Methods