Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

ターミナルっぽいHogoのテーマを作ってみた

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Yukuro Yukuro
July 26, 2021
Design
150
0

 ターミナルっぽいHogoのテーマを作ってみた

Dendai;LT @2021/07/26

Avatar for Yukuro

Yukuro

July 26, 2021

More Decks by Yukuro

See All by Yukuro
M5Stackな Cansatをつくってみた
Avatar for Yukuro yukuro
0
2.3k
魔改造のススメ
Avatar for Yukuro yukuro
0
500

Other Decks in Design

See All in Design
デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み
Avatar for Kota SAITO kotasaito_cnt
0
760
UI生成の鍵は要件整理 -デザインプロセスのエッセンスを プロンプト作成に取り入れよう-
Avatar for 都村　美帆 abokadotyann
4
1.1k
ボタンUIの冪等性の話をしたらVimmerに刺さっちゃった
Avatar for たと ottatto
3
1.8k
(2026 FlowCon Keynote) Sociotechnical Architecture Finding Flow
Avatar for xinyao xinyao
0
120
Webデザイナー中田美穂_ポートフォリオ
Avatar for miho nakada omy
0
130
設計の進め方と 品質特性品質特性
Avatar for harachan harakeishi
0
1.3k
組織で働く大人が「知らないままにやってみる」を取り戻す方法とその意味〜企業で働く実務家による実践知の言語化を事例とした考察〜
Avatar for ChiemiTaki chiemitaki
1
410
2026/6/26 第6回韓日リビングラボネットワークフォーラムin世宗　ー未来を作るリビングラボー アジアの社会システム転換に向けたリビングラボの可能性
Avatar for Kimura Atsunobu a2k
2
110
工房としてのAI ── デザイナー、作家、ビルダー
Avatar for hiranotomoki hiranotomoki
0
460
なぜ、インサイトを貯めるのか？
Avatar for 田島佳穂 tajima_kaho
3
2.7k
ISO 9241-171:2025っていうのがあってな
Avatar for Shoji Ohashi shosira
1
310
AVI 2026 Keynote "Vision-Driven Design"
Avatar for Hiroshi Ishii ishii_mit
0
140

Featured

See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
240
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
699
190k
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
1
1.2k
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
540
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
18k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
380
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
380
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
464
34k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
360
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
1k

Transcript

  1. ターミナルっぽいHugoの テーマを作ってみた 1

  2. Hugoとは? 2

  3. • 静的サイト生成ツール • コマンドをいくつか打つだけで　 HTMLファイルを半自動生成 • Theme(テーマ)が豊富 3

  4. 4 https://themes.gohugo.io/

  5. 作ったテーマ 5

  6. 6

  7. 推しポイント 3 つ 7

  8. ① ターミナルっぽい見た目 8

  9. ① ターミナルっぽい見た目 9 cd / cat tree

  10. ② 選べるカラースキーマ 10

  11. ② 選べるカラースキーマ 2/8 monokai powershell 11

  12. ② 選べるカラースキーマ 4/8 gruvbox dark gruvbox light 12

  13. ② 選べるカラースキーマ 6/8 solarized dark solarized light 13

  14. ② 選べるカラースキーマ 8/8 ubuntu retro 14

  15. ③ パフォーマンスの良さ 15

  16. ③ パフォーマンスの良さ 16 Google Lighthouse

  17. デモサイト 17 https://hugo-theme-shell.netlify.app/ GitHub https://github.com/Yukuro/hugo-theme-shell

  18. まとめ • Hugoのテーマ作った • ターミナルっぽい見た目や選択可能なカラースキーマ、パフォーマ ンスの良さが推しポイント • Hugo ThemesやGithubで公開しているので、試しに使ってみてね！ 18