前回の振り返り 前回は下記記事で、hugoを使いブログを作成しgithub actionsを使用した自動デプロイを設定しました。 今回はその続編で、投稿をリッチにするshort codeの紹介、投稿に画像を入れる方法、ページテンプレートのカスタマイズをやっていきます。 環境 項目
![hugoを使った爆速ブログをカスタマイズする](https://cdn-ak-scissors.b.st-hatena.com/image/square/3561d49ef1f0de3800996c8e1c4ec3668e0735a8/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--E8CI8MFI--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3Ahugo%2525E3%252582%252592%2525E4%2525BD%2525BF%2525E3%252581%2525A3%2525E3%252581%25259F%2525E7%252588%252586%2525E9%252580%25259F%2525E3%252583%252596%2525E3%252583%2525AD%2525E3%252582%2525B0%2525E3%252582%252592%2525E3%252582%2525AB%2525E3%252582%2525B9%2525E3%252582%2525BF%2525E3%252583%25259E%2525E3%252582%2525A4%2525E3%252582%2525BA%2525E3%252581%252599%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Aharachan%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzg0ODVjZDJhNzIuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
2023/11/29追記: このサイトはリニューアルしました。 ここで紹介した内容は現在このサイトでは使われていませんが、 過去の記事をそのまま掲載しています。 このサイトは Hugo を使って作成しました。 Hugo は Markdown などで書かれたソースファイルから静的なHTMLファイルのウェブサイトを生成するツールです。 Hugo では様々な テーマ を選択することができます。 このサイトではHugoテーマとして Mainroad を使用しています。 また、生成したサイトのホスティングには Netlify を利用しています。 この投稿では Hugo でサイトを作成する際の基本的な操作と、このサイトで行ったカスタマイズの内容を記しておきます。 Hugo サイトの作成 Hugo の基本的な使い方は公式ドキュメントの Quick Start などに書かれているのでここでは簡単に記します
mk-mode.com Linux, Debian, IT, Server, PG, Ruby, Rails, Python, C++, Fortran, PC, MariaDB, math, GIS, etc... nanoc ブログをページネーション(記事を指定件数別にページ化)するには、公式サイトのドキュメント(nanoc - Paginating articles)に記載さている通りの方法でできるようです。 しかし、説明に「ページにオブジェクトを追加するたびに、あふれたオブジェクトを後ろのページにシフトさせる作業が発生するので推奨していない」というような記述があります。(他に方法があるのかも知れませんが未確認) ですので、一覧ページのページネーションはとりあえず保留にし、個別の記事ページに「前ページ(Older)」・「次ページ(Newer)」のリンクを付けるようにしてみました。 0
Guard::Nanocで更新を即コンパイルしつつ、Powで確認するという流れ。Powの時点でMac限定でございます。Guard::Nanocはいけるはず。 こないだのNanocとFont Awesomeのサンプルに手を入れて実践してみましょう。 必要なGemの準備 動いている環境から取ってきたものなので余計なものがあるかもしれないけど、だいたい以下のような感じで。 Gemfile source 'http://rubygems.org' gem 'bundler' gem 'rake' gem 'nanoc', '3.6.4' gem 'rack' gem 'rack-rewrite' gem 'mime-types' gem 'adsf' gem 'i18n' gem 'powder' gem 'guard' gem 'guard-bundler' gem 'guard-nanoc'
すでに Middleman のプロジェクトがある場合,サンプルの index.html, tag.html, calendar.html や feed.xml, を作る必要があるため, blog テンプレートオプションとともに Middleman init を 再実行するか, 自分でファイルを作ってください。何が作られるか は GitHub で確認できます。 ブログ拡張にはたくさんの設定オプションがあります。プレビューサーバを起動し http://localhost:4567/__middleman/config/ にアクセスするとすべてのオプションが 確認できます。 記事 Middleman 自体がそうであるように, ブログ拡張は個別ファイルにフォーカスしています。 それぞれの記事はファイルごとに好きなテンプレート言語を使用できます。 記事のデフォルトのファイル名構造は {year}-{
おそらく、誰もがやる深夜のWebサーフィンは、究極のところ時間の無駄ではないのかもしれない。 それは、Webで夢をみているのにほかならないのだ。(T.B=リー「Webの創成」より) Created at: 2012-05-05 | Tags: nanoc nanocはデフォルトでは極めてシンプルな静的Webサイトを生成するだけですが、 付属のヘルパを利用することで新着記事表示やタグ分類機能などが使用できるようになります。 また、hamlやsassといったDSLを利用することでサイトの構築・メンテナンスを効率化したり、 Markdownおよび独自のフィルタによって記事作成時の手間を軽減することができます。 今回は、このサイトを構築するにあたり実施したカスタマイズの一部を紹介します。 Markdown, Haml, Sassのフィルタを適用する まずはサイト構築にあたり面倒なHTMLとCSSの
カスタムフィルター nanoc create_siteで作ったディレクトリにあるlib以下のファイルがコンテンツのコンパイル前に読み込まれるので、ここでNanocのフィルターを新しく作成したり、既存のものを上書きしたりできる。 こうしたカスタムのフィルターを作るにはNanoc3::Filterを継承(Nanoc3を使っている場合)し、runメソッドを定義/上書きすればOK。 runは引数としてコンテンツ本文とオプションパラメータを受け取る。 以下では試しにredcarpetフィルターをRedcarpet2に対応したものに改造してみた。 lib/filter_redcarpet.rb # -*- coding: utf-8 -*- module Nanoc3::Filters class Redcarpet < Nanoc3::Filter # for Redcarpet2 def run(
mk-mode.com Linux, Debian, IT, Server, PG, Ruby, Rails, Python, C++, Fortran, PC, MariaDB, math, GIS, etc... nanoc でブログ記事を作成する際、その都度ブログ用のタグ kind、 created_at を記述するのはほんの少しだけ面倒です。 今回は、記事を新規作成する際に自動で kind、 created_at をセットする方法についてです。 0. 前提条件 Linux Mint 14 Nadia (64bit) での作業を想定。 nanoc 3.4.3 を使用。 Ruby 1.9.3-p362 を使用。 記事作成先は ./content/articles 記事のファイル名は yyyy-mm-dd-hogehoge.md (タイトルに日本語を指定しても大丈夫) 1. 必要パッケー
今日は[header.php]を完成させようと思っていました。しかし、何がなんだか分からないテンプレートタグを使っているうちに自分でも何がなんだか分からなくなってきました。そこで、覚えたテンプレートタグをメモしながら進めることにしました。 このエントリーだけ見るとよく分からないことになると思いますが許して欲しいです。 <?php get_header(); ?> header.phpというモジュールを呼び出す <?php language_attributes();?> 管理画面で設定した言語設定を呼び出す <?php bloginfo(‘charset’);?> 管理画面で設定した文字コードを呼び出す <?php bloginfo(‘stylesheet_url’);?> スタイルシートのURLを呼び出す <?php bloginfo(‘pingback_url’);?> ピングバックの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く