Hugoでできること | Hugoブログテーマ「Salt」
最近はSSG（静的サイトジェネレータ）全盛期の時代で、サーバー代をかけずにブログが作れる時代になりました。 そこで実際にHugoを使ってこのブログを作ってみた所感とHugoでできることを紹介したいと思います ちなみにHugoとGatsbyどっちの方がいいの？サイト内でリッチなグラフやテーブルを使ったり、動きのあるサイトを作りたい場合は、Gatsbyのほうが良いと思います。 というのもGatsbyの方がReactベースで作られているので、jsとの相性が非常に良く、Reactのライブラリをそのまま使えます。 逆にHugoとjsの親和性は低いので、素のHTMLに対してjsやjQueryで操作・加工する事になり、時代を逆行する事になります。（SPAを導入することもできますが、それなら最初からGatsby使う方が、、、） さらにこれもHugoのデメリットなんですが、検索機能をつける際もゴリゴリなdo
個人ブログに最適なオススメの Hugo テーマ｜Abstract Archives
1. はじめに Go 言語で実装されている静的ジェネレーターである Hugo は，ユーザーが自作したテーマを投稿することができる Hugo Themes が公式より提供されています。しかし，Hugo Themes にはレビュー機能やランキング機能が実装されていないので，自分に合ったテーマを探すのは時間がかかります。本記事では，筆者が独断と偏見で個人ブログに最適な Hugo テーマを選び，概要を記述します。 2. Ananke Gohugo Theme Ananke Gohugo Theme は，シングルカラムレイアウトのテーマです。公式のクイックスタートガイドで採用されているベーシックな Hugo テーマでもあります。表面上は，シンプルな構成になっていますが，ブログに必要な機能は一通り実装されているので，初心者でも簡単にブログサイトを構築することができると思います。 3. Github S
『はてなブログをはじめよう！』がいつの間にか強制挿入されている件。せめて仕様変更の際にはアナウンスしてほしいなと思います。 - SONOTA
いつから挿入されていたのかはわかりませんが、はてなブログに『はてなブログをはじめよう！』というブログ広告がいつの間にか挿入されるようになってました。 下記は私が運営している「クレジットカードの読みもの」というサイトに挿入されいたもの。私は月会費をちゃんと払っているはてなブログPROなんですが、どうやら無料会員だけでなくPRO会員にも強制的に挿入されているようです。 他、参考までに有名ブログに挿入されている例も紹介しておきます。 今日はヒトデ祭りだぞ！ ゆとりずむ 鈴木です。別館 はてなブログ運営者には見えない： ではなぜここまでこの問題が騒がれていないのか…というと、これは『はてなブログをはじめよう！』という欄ははてなブログ開設者には見えないため。 要するにはてなブロガーがログインしている状況下では表示されないので、気付いていないブロガーのほうが圧倒的に多いのではないかと思うのです。 はて
Hugo Zen: これから Hugo を始める人向けのミニマムなテーマを作りました | rakuishi.com
Hugo Zen という、静的サイトジェネレータ Hugo で使えるテーマを作りました。理由は、公開されているテーマ hugoThemes には、主張が強すぎるものが多く、どれを参考にオリジナルテーマを作ればいいか分からなかったからです。 Hugo Zen は、ミニマムに作られています。Skeleton という素敵な CSS ライブラリと、100 行に満たない custom.css から出来ていて、Hugo Zen を元に自分のテーマを作るのに向いています。 導入 Hugo プロジェクトから以下のコマンドを打てば、使えるようになります。 $ cd themes $ git clone https://github.com/rakuishi/hugo-zen $ hugo server --theme=hugo-zen --buildDrafts --watch 設定 config.toml
シンタックスハイライトに highlight.js を使うことにしました | rakuishi.com
ブラウザで実行されるクライアントサイドのシンタックスハイライト（ソースコードを意味ごとに色付けしてくれる）に、google-code-prettify を使用していたのですが、highlight.js に乗り換えました。 経緯 prettify は、ハイライトするコード部分を <pre class="prettyprint"> ~ </pre> で囲う必要がありました。 ですが、先日から記事をマークダウンで記述するようになり、コード部分が、<code><pre> ~ </pre></code> に変換されるため、クラスを指定する prettify が使えなくなりました。 highlight.js 導入 ブログに JavaScript と、CSS を読み込ませるだけです。ハイライトする部分は、<code><pre> ~ </pre></code> 形式で囲まれている必要があります。 Gett
ソースコードをハイライトする google-code-prettify の設置方法 - 高密度商業地域
この「高密度商業地域」のように、HTMLやCSS、JavaScriptのコードをブログに掲載する際、単純に<pre>タグで囲うだけでも良いのですが、ソースコードの可読性を上げたり見た目をカッコよくしたいと思うことが稀によくあると思います。 世の中には同じようなことを思う方がたくさんいるわけで、いわゆるテキストエディタのようなかたちでソースコードをハイライトし、可読性を高めてくれるツールが存在します。 その手のツールで最もメジャーなのは SyntaxHighlighter だと思うのですが、導入にあたっていくつもファイルをサーバにアップロードする必要があり、FC2ブログで使うには少し面倒くさいなぁ、という感がありました。 そこで、もう少し何か簡単なソースコードのハイライトツールがないかな、と探してみると、Google が提供している google-code-prettify というツールがあ
ニュースやブログはどんどんレスポンシブデザインに移行すべき。無計画なレスポンシブデザインは氏ね！（作る方からの意見 - eupho
最近、レスポンシブデザインの案件をちょこちょこやるようになりました。時代はレスポンシブ！って感じですが、それは本当に正しいのか？という場面もしばしばあります。この件についてはいろんなサイト・ブログで語られていますが、今日は私の考えについて書いてみます。 結論 告知系サイトやブログ、SNSで拡散するのが前提のサイトは、レスポンシブにするのが良いと思います。でも、コーポレートサイトやポートフォリオサイトは無理して対応しなくてもいい気がします。 そもそもレスポンシブデザインとは レスポンシブWebデザイン（Responsive Web Design）は、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。 今までは、ガラケーに対応させようと思ったら携帯用のサイトを作らなければなりませんでした。でもレスポンシブは、ページは1枚で良
Zephyr Cradle Diary(2011-08-17)
■ [tdiary][PG] tDiaryの2カラムデザイン化と、iPhone向けデザイン調整 というものに最近こだわってました。今日ようやく完成。 tDiaryはデフォで1カラムデザインなのですが、やっぱり味気ないので次のようなことを目指してました。 基本は2カラム表示（今回は左にサイドバー）ただしスマフォ（＝iPhone）では1カラムで表示 最近のtDiaryのUpdateでスマフォ用との切り替えが出来るようになっていたのは知っていたので、じゃあそうしようじゃないかってことで色々試行錯誤してました。今回はそのメモ。 2カラムなデザイン 基本的には以下のリファレンスに従います。今回のデザインではヘッダが横いっぱいに広がるほうのデザインにしてます。 tDiaryドキュメント - ヘッダ・フッタ ちなみに、サイドバーの内容はフッタ側に書くこと、みたいな推奨事項は、TwitterでtDiary
JekyllをStep by Stepで使って理解する - Qiita
jekyllは静的サイトジェネレータ。Github Pageなどでも使われており、ブログとしても使うことができて、ブログのフレームワークとしてOctopressやJekyll-Bootstrapがメジャーどころ。 OctopressやJekyll-Bootstrapを読んで勉強するのもありだがあえて素のjekyllを使って流れを理解するの巻。事前セットアップとしてRubyとbundlerは入れておいてください。 Step1 まずはブログとは関係ない任意のページをmarkdownで作成して公開する。 ファイル構成 .bundle/ └─ config _layouts/ └─ default.html # レイアウト _site/ │ code.html │ index.html └─ pygments.css vendor/ └─ bundle/ .gitignore _config.ym
ブログをリニューアル - URIN HACK
ブログをGitHub Pagesに移転して完全にリニューアルした。CMSはJekyllでホストはGitHub。 Jekyll • Simple, blog-aware, static sites 去年あたりから忍者ブログのサービス内容がどんどん劣化していってついに我慢が限界に達した。 何か新しいことが始まるとき、その多くは「負（怒りや悲しみ）」のモチベーションからスタートすると聞いたことがある。まさに、それだ。 Jekyllを選択したわけ ブログサービスを選ぶ判断基準は以下。 無料で容量制限が厳しくない 将来性がある（１０年間くらいはサービスが継続すると思われる） HTMLやCSS、Javascript含めてほぼ完全にカスタマイズできる 余計な広告が入らない 記事にもHTMLが使えてコードのシンタックスハイライトなどもできる 無料のブログサービスを調べる 日本向けのブログサービスを見てみた
jekyllの実験的テンプレート - T.I.D.
jekyll で本格的ブログを作るためのテンプレート jekyll-experiment を作ってみたが、色々と作り込むうちに複雑になってきたので、ここに記録しておく。 制作方針 モジュール化により、カスタマイズし易くすること。 ブログに必要な最小限の機能が、プラグインの使えない GitHub Pages 上の jekyll でも動作すること。 構成 . ├── _deploy/ # デプロイ時の静的ファイル群を保存しておく ├── _includes/ # 他からインクルードされるテンプレート部品 │ ├── asides/ # サイドバー用各種テンプレート部品 │ ├── post/ # 個別記事ページ用各種テンプレート部品 │ ├── libs/ # 小さなテンプレート部品 │ ├── js/ # 小さな js 部品 │ ├── css/ # 小さな css 部品 │ │ └── p
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PaperMod
Hugoでオリジナルテーマ作ってみた。 : かみし部
ブログのソースコード記載段落だけ横スクロール可能に@iPhoneブラウザ – sgryjp.log.old
リモートインターン ｜ MIddleman 実践（1）
歩み286. ノートを模したデザインのサイトにした | jpico
webtech-walker.com – webtech-walker.com