Hugoでできること | Hugoブログテーマ「Salt」
最近はSSG（静的サイトジェネレータ）全盛期の時代で、サーバー代をかけずにブログが作れる時代になりました。 そこで実際にHugoを使ってこのブログを作ってみた所感とHugoでできることを紹介したいと思います ちなみにHugoとGatsbyどっちの方がいいの？サイト内でリッチなグラフやテーブルを使ったり、動きのあるサイトを作りたい場合は、Gatsbyのほうが良いと思います。 というのもGatsbyの方がReactベースで作られているので、jsとの相性が非常に良く、Reactのライブラリをそのまま使えます。 逆にHugoとjsの親和性は低いので、素のHTMLに対してjsやjQueryで操作・加工する事になり、時代を逆行する事になります。（SPAを導入することもできますが、それなら最初からGatsby使う方が、、、） さらにこれもHugoのデメリットなんですが、検索機能をつける際もゴリゴリなdo
シンプルなHTMLで、モダンなWebサイトをすばやく簡単に作成できるクラスレスの超軽量CSSフレームワーク -Simple.css
その名の通り、シンプルなHTMLで、Webサイトをすばやく簡単に作成できるクラスレスの超軽量（4kB）CSSフレームワークを紹介します。 シンプルなWebページ、ポートフォリオやブログなどをすばやく作成したい時に便利で、レスポンシブにもダークモードにも対応しています。また、CSSリセットとして利用するのもありかもしれません。 Simple.css Simple.css -GitHub Simple.cssとは Simple.cssのデモ Simple.cssの使い方 Simple.cssとは Simple.cssは、セマンティックHTMLをすばやく簡単に見栄え良くするクラスレスのCSSフレームワークです。「クラスレス」とは、CSSまたはHTMLのどこにもCSSのclassがないことを意味します。 MITライセンスで、商用プロジェクトでも無料で利用できます。 classのないプレーンなHTM
RubyでWebスクレイピングしたい（ツール選定編） - マイペースなRailsおじさん
自作したスクレイピングツールで画像をあつめたい 現在開発中のアプリケーションで、エフェクターボードの画像が100枚くらい欲しかったので、Google画像検索から画像を集めることにしました。 画像収集は機械学習などでかなり需要があるらしく、自作せずとも利用可能なツールがいくらかあるようです。 GitHub - hardikvasa/google-images-download: Python Script to download hundreds of images from 'Google Images'. It is a ready-to-run code! 画像クローラー - Qiita せっかくですが、rubyではWebスクレイピングするようなプログラムは書いたことがなかったので、自作してみることにしました。 nokogiriかSeleniumか rubyでスクレイピングをする場合、
Rubyで始めるスクレイピング 〜入門編〜 - Qiita
スクレイピングとは Webサイトから自分の知りたい情報を抽出すること。 ex) 文章、画像、動画など 今回の目標 Qiitaで「ruby」と検索して「いいね順」に並べた検索結果一覧をスクレイピングします。 1. URLのパスパラメータ・クエリパラメータを理解する スクレイピングをするにはURLのパラメータについて理解する必要があります。 「そんなん余裕で知っとるわ！」という方は飛ばして次章へどうぞ！ パラメータの種類 URLでドメイン以降の/で区切られたパス1つ1つがパスパラメータです URLの?以降がクエリパラメータです（複数記述する場合は&で繋ぎます）。 例えばこのURLは。 https://qiita.com/search?page=1&q=ruby&sort=like 以下のパラメータになります。 種類 パラメータ名 パラメータの値
Hugoのテーマを作ってテーマのギャラリーで公開されました | PengNote
Hugoでテーマを作ったのですが、申請して公開までいけました。 実際に作ったテーマ Hugo Gentoo Themeという名前でテーマを作りました。 d-kusk/hugo-gentoo-theme: Hugo theme こういうの何をテーマに作ろうか毎度悩むんですが、会社マシンのデスクトップの壁紙がジェンツーペンギンに変わったので、Gentooという名前にしました。前後のHugoとThemeはたまたま見かけたのでつけたんですが、別に要らないみたいですね…。 配色の感じも写真から色取って、ヘッダーを頭に、コンテンツ部分を体にしたんですがジェンツーらしさが全くないというか出せなかったです。 CSSフレームワークのBlumaを採用 楽してサクッとやりたいと思ったのでBlumaというフレームワークを入れてみました。 ぶっちゃけ要らなかったです。元気あればそのうち抜くかもしれない。 Bluma
個人ブログに最適なオススメの Hugo テーマ｜Abstract Archives
1. はじめに Go 言語で実装されている静的ジェネレーターである Hugo は，ユーザーが自作したテーマを投稿することができる Hugo Themes が公式より提供されています。しかし，Hugo Themes にはレビュー機能やランキング機能が実装されていないので，自分に合ったテーマを探すのは時間がかかります。本記事では，筆者が独断と偏見で個人ブログに最適な Hugo テーマを選び，概要を記述します。 2. Ananke Gohugo Theme Ananke Gohugo Theme は，シングルカラムレイアウトのテーマです。公式のクイックスタートガイドで採用されているベーシックな Hugo テーマでもあります。表面上は，シンプルな構成になっていますが，ブログに必要な機能は一通り実装されているので，初心者でも簡単にブログサイトを構築することができると思います。 3. Github S
Rubyのnokogiriとmechanizeの使い分け
nokogirirはHTMLドキュメント解析 mechanizeは「シンプルログイン」認証突破 「シンプルログイン」の個人的な定義は、「フォームにIDとパスワードを入力してログインボタンをクリックしてマイページへ！」みたいなサイトです。 「え？逆にそれ以外何があるの？」最近よくあるじゃないですか、IDを入れたらパスワード入力フォームが現れたり、ログイン時にページが動的に動くサイト。そういうサイトでもmechanizeで認証とれるかもしれませんが、個人的に私はすぐに諦めます。そういうサイトはすぐにselelniumに移行します。 「すぐ諦めたら、力つかないよ！」確かに一理ありますね。しかし私はスピードとストレスと全体的なコストを比較して、「シンプルログインサイト以外はseleniumに即移行！」とすることにしました。 nokogiriの基本的な使い方 Webページ「https:// ○○○.
どうしてHTML5が廃止されたのか | フューチャー技術ブログ
フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5
とほほのＷＷＷ入門
はじめに ご使用上の注意 (1) 主な更新履歴 (24) 管理者へのメール (1) 自己紹介 (1) 基本編 用語集 (82) Webページ作成入門 (7) 逆引きリファレンス (32) フォーマット HTML (400) HTML5 (7) XHTML (1) MathML (1) DTD (1) JSON (1) SVG (1) VML (1) GIF (1) CSV (1) セマンティック・ウェブ (1) CSS CSS (ABC順)(719) Bootstrap (61) Less (1) Sass (1) Tailwind CSS (1) CSSフレームワーク (1) リセットCSS (1) プログラミング言語 JavaScript (39) TypeScript (1) Java (25) Perl (4) PHP (14) Ruby (11) Python (13) Go (
使いやすさを重視したHTMLスクレイピングライブラリを作った - 純粋関数型雑記帳
TL:DR レポジトリ https://github.com/tanakh/easy-scraper ドキュメント 背景 このところ訳あってRustでHTMLからデータを抽出するコードを書いていたのですが、 既存のスクレイピングライブラリが（個人的には）どれもいまいち使いやすくないなあと思っていました。 HTMLから望みのデータを取り出すのはいろいろやり方があるかと思いますが、 ツリーを自力でトラバースするのはさすがにあまりにも面倒です。 近頃人気のライブラリを見てみますと、CSSセレクターで目的のノードを選択して、 その周辺のノードをたどるコードを書いて、 欲しい情報を取り出すという感じのものが多いようです。 RustにもHTMLのDOMツリーをCSSセレクターで検索して見つかったノードをイテレーターで返してくれたりする、 scraperというライブラリがあります。 例えば、<li>要素
Sass(SCSS)の基本機能|メリット・デメリットも紹介！ | Bigmac inc
仕事でHTMLコーディングする人の約7割が、Sass(SCSS)を使用しているという調査結果があるように、コーディングする上でSass(SCSS)は欠かせない便利なものとなってきています。今回はSass(SCSS)の基本情報からメリット・デメリットもふまえて紹介していこうと思います。 Sassとは？ まず、Sassを使ったことがない方に向けて、簡単にSassの使い方を説明します。Sassとは「Syntactically Awesome Stylesheets」の略で、訳すると「構造的にとても凄い(最高な・素晴らしい)スタイルシート」という意味になります。 SassにはSASS記法・SCSS記法という2種類の記法があり、元々はSASS記法が採用されていましたが、CSSとの互換性に乏しいなどの理由から、CSSとの互換性を高めたSCSS記法が作られました。SCSSはCSSと記法が近いため、CSS
Hugo で次のページ、前のページへのリンクを表示する
ページ変数の .NextInSection や .PrevInSection を使用すると、同じセクション内の次のページ、前のページを参照することができます。 同じ階層にある「前のページ」「次のページ」へのリンクを表示する下記のテンプレートコードは、前のページへのリンクと、次のページへのリンクを表示するシンプルな例です。 テンプレートコード（抜粋） {{ with .PrevInSection }} <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a> {{ end }} {{ with .NextInSection }} <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a> {{ end }} Page 変数の .PrevInSection や .NextInSection には、同じセクショ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
scraper - Rust
Rustで簡単なスクレイピングコードを書いてみる - at backyard
Rust 初心者が Web スクレイピングしてみた
PaperMod
GitHub - causal-agent/scraper: HTML parsing and querying with CSS selectors
goqueryを使ったGo言語(Golang)スクレイピング入門
goquery package - github.com/PuerkitoBio/goquery - Go Packages
Hugoでオリジナルテーマ作ってみた。 : かみし部