Hugoでできること | Hugoブログテーマ「Salt」
最近はSSG（静的サイトジェネレータ）全盛期の時代で、サーバー代をかけずにブログが作れる時代になりました。 そこで実際にHugoを使ってこのブログを作ってみた所感とHugoでできることを紹介したいと思います ちなみにHugoとGatsbyどっちの方がいいの？サイト内でリッチなグラフやテーブルを使ったり、動きのあるサイトを作りたい場合は、Gatsbyのほうが良いと思います。 というのもGatsbyの方がReactベースで作られているので、jsとの相性が非常に良く、Reactのライブラリをそのまま使えます。 逆にHugoとjsの親和性は低いので、素のHTMLに対してjsやjQueryで操作・加工する事になり、時代を逆行する事になります。（SPAを導入することもできますが、それなら最初からGatsby使う方が、、、） さらにこれもHugoのデメリットなんですが、検索機能をつける際もゴリゴリなdo
Hugoのテーマを作ってテーマのギャラリーで公開されました | PengNote
Hugoでテーマを作ったのですが、申請して公開までいけました。 実際に作ったテーマ Hugo Gentoo Themeという名前でテーマを作りました。 d-kusk/hugo-gentoo-theme: Hugo theme こういうの何をテーマに作ろうか毎度悩むんですが、会社マシンのデスクトップの壁紙がジェンツーペンギンに変わったので、Gentooという名前にしました。前後のHugoとThemeはたまたま見かけたのでつけたんですが、別に要らないみたいですね…。 配色の感じも写真から色取って、ヘッダーを頭に、コンテンツ部分を体にしたんですがジェンツーらしさが全くないというか出せなかったです。 CSSフレームワークのBlumaを採用 楽してサクッとやりたいと思ったのでBlumaというフレームワークを入れてみました。 ぶっちゃけ要らなかったです。元気あればそのうち抜くかもしれない。 Bluma
Hugoでサイト全体で使われているタグやカテゴリーの一覧のページを作る | PengNote
Hugoでのテーマ制作を進めているのですが、サイト内で使われているタグとカテゴリーの一覧ページ(WordPressのウィジェットであるタグクラウドとかカテゴリー一覧みたいなイメージ)を出力する方法がイマイチ分からず、困っていましたがようやく解決したので覚書です。 バージョン Hugo v0.26 必要なこと config.tomlで設定 (テンプレートの用意) config.tomlへの記述 タグやカテゴリーといった分類を使う場合、config.tomlに以下を記述します。 [taxonomies] tag = "tags" category = "categories" 参考: Hugo | Taxonomies テンプレート(layout/terms.html)を用意する 基本的には、 list.html が出力されると思って問題ないと思います。 ただ、今回は一覧の出し方(レイアウト)
PengNote | 勉強した事や行った場所の感想を書くブログ
Terraformのディレクトリ構成を環境ディレクトリで分けるかたちで見直したTerraformでリソースを破壊せず名称の変更やモジュール化をするTerraformでGoogle Cloudのインフラ構成を管理し始めるためにやったことDBeaverからWSL上で起動しているMySQLコンテナに接続するStorybookで使っていたMSWを1系から2系にアップデートしてみたEMになる前となった後の話なるべくユーザー依存を減らしてGoogle App ScriptからGitHubAPIを利用するAWS CDKに入門し、AWS費用をSlack通知する処理を書き直したNode.jsのDockerイメージを使ってマルチステージビルドをやってみたFastifyで既存のOpen APIファイルを読み込んでSwagger UIで表示できるようにするOASの内容を元に、Orvalで型やクライアントを生成する
Hugoのテーマをgitのsubmoduleで管理し始めた | PengNote
はじめに このブログはHugoで生成しているのですが、テーマはブログのリポジトリと別で管理しています。 これまでは、ブログのリポジトリの theme/ ディレクトリにzipとかで落としてきて展開していました。 ですが、テーマのアップデート時に再度その作業を行うのは面倒だなと思い調べていた所、gitのsubmodule機能を使うことで、テーマのリポジトリをブログのリポジトリに取り込むことが出来る。つまり該当のテーマの所へ行けばgit pullできる。 git submodule は、外部の git リポジトリを、自分の git リポジトリのサブディレクトリとして登録し、特定の commit を参照する仕組みです。 Git submodule の基礎 - Qiita Hugoの公式でもやってるテーマの管理方法ですね submoduleで取り込む とりあえず、今の状態はこんな感じ。 . ├──
Hugo によるブログ作成と mainroad テーマのカスタマイズ | terashim.com
2023/11/29追記: このサイトはリニューアルしました。 ここで紹介した内容は現在このサイトでは使われていませんが、 過去の記事をそのまま掲載しています。 このサイトは Hugo を使って作成しました。 Hugo は Markdown などで書かれたソースファイルから静的なHTMLファイルのウェブサイトを生成するツールです。 Hugo では様々な テーマ を選択することができます。 このサイトではHugoテーマとして Mainroad を使用しています。 また、生成したサイトのホスティングには Netlify を利用しています。 この投稿では Hugo でサイトを作成する際の基本的な操作と、このサイトで行ったカスタマイズの内容を記しておきます。 Hugo サイトの作成 Hugo の基本的な使い方は公式ドキュメントの Quick Start などに書かれているのでここでは簡単に記します
個人ブログに最適なオススメの Hugo テーマ｜Abstract Archives
1. はじめに Go 言語で実装されている静的ジェネレーターである Hugo は，ユーザーが自作したテーマを投稿することができる Hugo Themes が公式より提供されています。しかし，Hugo Themes にはレビュー機能やランキング機能が実装されていないので，自分に合ったテーマを探すのは時間がかかります。本記事では，筆者が独断と偏見で個人ブログに最適な Hugo テーマを選び，概要を記述します。 2. Ananke Gohugo Theme Ananke Gohugo Theme は，シングルカラムレイアウトのテーマです。公式のクイックスタートガイドで採用されているベーシックな Hugo テーマでもあります。表面上は，シンプルな構成になっていますが，ブログに必要な機能は一通り実装されているので，初心者でも簡単にブログサイトを構築することができると思います。 3. Github S
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
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で新しくブログ作り直した - wadackel.me
これまでWebDesign Dackelという WordPress で構築したブログをやっていましたが、幾つか理由があって新しくブログを始めることにしました。 前ブログは消さずに更新を止めるだけにする予定です。 なぜ移行したか？ 大した理由では無いですが、以下が移行の理由です。 ブログ名を変えたくなった。ただ変更する位なら新規で作りたい 社会人になるのと同時に始めて丁度 3 年が経ち、色々と見直していきたくなった 技術的な記事以外のものも気軽に書けるような環境にしたかった (ブログ名に「DESIGN」とか入れちゃった…) WordPress のブログ運用に飽きた ブログを書く環境を最適化したい… Ghost、又はJekyll等の静的サイトジェネレータに変えたい 特別 WordPress が嫌いなわけでは無くて、ブログをやってみて管理画面もコメント欄も要らないやって思うようになりました。 そ
シンプルなHugoのテーマ「Angel's Ladder」を作りました | TANKSUZUKI.COM
先日記事に書きましたが、WordpressからHugoへの乗り換えにあたりテーマを作りました。 使い方とかは全部ここに載せてますが、一応ブログでも紹介しようかと。 ちなみに、Angel’s Ladderというのは、雲の間から強い光が出てくるやつのことです。 白とグレーベースに、1色だけ差し色を入れる配色なので。 意外とあっさり本家にマージしてもらえたので、テーマ作れる人は作ってみても面白いと思います。 テーマ作成時のルールはテーマカタログのREADMEにあります。 テーマの特徴 テーマの特徴は下記の通りです。 シンプルなデザイン レスポンシブデザイン ページネーション対応 投稿へのタグ付け対応 Disqusでのコメント対応 highlight.jsでのコードハイライト Google Analytics対応 スクリーンショット ほとんどこのサイトと同じですが、GitHub上のREADME.m
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Zen
Hugo Themes Site
GitHub - dsk52/minimage: Hugo's theme
https://nasust.com/hugo/theme/public_template/
Hugoでオリジナルテーマ作ってみた。 : かみし部
GitHub - rakuishi/hugo-zen: Hugo Zen is a minimal hugo theme.
http://blog.mismithportfolio.com/web/20160207hugomyblog
Hugoのオリジナルテーマ作ってみました｜pickles