GitHubPages

今回は、github-pagesというgemについて書きます。 Gemfileの利点 前回（「Jekyllを勉強中（４）」）Gemfileを使ってJekyllを動作させる上で必要なgemを指定しました。 実際に追加されるgemはGemfileに書いたものより多く、10以上のgemが追加されることが多いです。 これをいちいちインストールする手間を考えれば、GemfileとBundlerの便利さが分かります。 しかし、それだけではありません。 最も重要なことはバージョン管理をサポートしていることです。 Gemfileでは、gemの後に、そのバージョンを指定することができます。 gem 'abcd'…

Jekyllはプログラム名ですが、読み方が難しいです。 Jekyllは小説「ジキル博士とハイド氏」のジキルと同じスペルで、英語の発音は「ジェクル」または「ジークル」らしいです（辞書で確認）。 前回のブログに貼り付けたユーチューブのプレゼンターは「ジェキル」または「ジェクル」と呼んでいました。 GitHub Pagesでウェブサイトを作る 今回のテーマは「GitHub Pagesでウェブサイトを作る」です。 一見Jekyllから離れてしまうように思うかもしれませんが、実はそうではありません。 GitHub PagesはJekyllをサポートしています。 もちろん、Jekyllを使わなくてもウェブ…

おはよーございます。 以前から少しずつこのブログにCSSを追加したりして楽しんでいるのですが、問題発生。 デザインCSSに何書いてるかわけわかんなくなってきた！ 画像だとスクロールバーが消えててわかりづらいですが、勢いのままに追加してきた歴代のCSSがずらずらと書いてあります。。 ということで、このCSSをどうにかしてスッキリさせたくなってきた話、前編です。 デザインCSSをスッキリさせる方法。外部からCSSを読み込むようにする。 どうやって外部からCSSを読み込めるようにするか？ GitHub Pagesというサービスを使うと無料でWebサイトが作れるようです。 デザインCSSをスッキリさせ…

2次元コード（以下QRコード）をリダイレクトしたい チラシや告知などでQRコードを画像として貼り付けたいと思うことはよくあります。ただ、たまにQRコードで指定されるURLが間違っていることがたまにでてきます。そんなとき紙面の場合には、修正ができないことが多くて非常に苦い思いをしてしまいます。加えて、長期間表示しているQRコードのリンク先の情報が古くなったので、リンク先を変更したいなどの要望が出ることもあります。（例えばマニュアルに印刷したりするとき）こういう場合にもなかなか修正できないという悩みがあります。 そこで、QRコードのリンク先をリダイレクトしてくれる中間サーバがあればよいのですが、そ…

対象 Qiitaから脱したい Qiitaにはエモ記事が書けないので、そういった記事を独自のブログの方に書きたい hugoとは https://gohugo.io/ Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again. Hugoは人気のあるオープンソースの静的サイトジェネレータの1つである。 半端ないスピードと柔軟性で、Hugoは再びウェブサイトの構築を楽し…

必要なこと やるべきことは、三つ。 ドメインの取得 Github Pagesに取得したドメインを追加 DNSレコードの設定 https://help.github.com/articles/using-a-custom-domain-with-github-pages/ を読みつつ進めていく。 ドメインを取得する 王道のお名前.comで取得しました。正味値段はどこもそんなに変わらない。 一般的な.comがだいたい ¥1,200/年 って感じ。 https://www.onamae.com/service/d-price/ に基本料金が掲載されてあります。 ドメイン料金の落とし穴 安い！に突進し…

そろそろ自分のブログを作るか。全然技術ブログなど書いてないけど。ということで、作ってみました。 TL;DR Hugoを使って、Githubにブログをホスティングし公開しました。 やってるうちに色々メリットなど気づいたので、エンジニアさんがブログを開設するならばこの技術スタックでやることをお勧めします。（カレーブログとかテーマはなんでもいい） キーワードはGithub PagesとHugoのみ。 公式ページがわかりやすくシンプルです。本記事はセットアップ方法について詳しくは説明しません。 Github Pagesとは https://pages.github.com/ Websites for …

日本語と英語でAND検索できた。

Storybookの導入 .npmrcとはなんぞや GitHubActionsの設定 package.jsonの修正 Reactのライブラリを開発しているときに立ちはだかるのが、実際に開発中のものをインストールして動かしたりしないと確認できないということです。 ここでStorybookという、Previewにもってこいのライブラリがあったので、導入していきたいと思います。 あと、このStorybookはGithubPagesに公開することで、Repositoryから簡単にテストしてもらうことができるようになります。 Storybookの導入 とりあえず、プロジェクトにStorybookを導入し…

Storybookの導入 .npmrcとはなんぞや Storyboardの書き方 cssを適用する background-colorを変更できるようにする storiesファイルを作る Reactのライブラリを開発しているときに立ちはだかるのが、実際に開発中のものをインストールして動かしたりしないと確認できないということです。 ここでStorybookという、Previewにもってこいのライブラリがあったので、導入していきたいと思います。 あと、このStorybookはGithubPagesに公開することで、Repositoryから簡単にテストしてもらうことができるようになります。 Story…

はじめに あけましておめでとうございます！ 今回は2022年の振り返り、そして2023年の目標について書いていこうと思います。 はじめに 2022年振り返り Unity1Week 正座ネコ Fxxxin Fashion Club Glow in the Dark その他 ランキングライブラリの作成 売り子のお手伝い NOA's PROJECT ISUCON レイトレ合宿 自作キーボード kugi日記 NaTsu Beats クライミング 2023年の目標 まとめ 2022年振り返り Unity1Week Unity1Weekには3回参加しましました。 「正」：正座ネコ 「そろえる」：Fxxxi…

特別お題「わたしの2022年・2023年にやりたいこと」 「2023年にやりたいこと」 こんにちは～二回目の投稿です！ 今回は特別お題キャンペーン？に自分の書きたいことが丁度載ってたので、「2023年にやりたいこと」について書きたいと思います。それはずばり！このブログを継続して書くことです！今まで色々なことに挑戦してきましたけど、振り返ってみると案外続かなかったことが多いんですよね...なので今回のブログはきちんと継続して続けていきたいなと思ってます！実は昔GitHubPagesでブログ(といってもpタグで文章を続ける簡素なもの)をやっていたんですが、それは他にやりたいことができてから辞めてし…

はじめに この記事は Akerun Advent Calendar 2022 - Qiita の18日目の記事です。 設計書に最適なドローツールは何なのかベストプラクティスを探す 終わらない旅です。 ドキュメントとしての管理・公開スキーム シームレスなドキュメント作成と図の編集 バージョン・変更管理 にフォーカスしたベスプラを今年も探してきました。 結論だけ知りたい人むけ Markdown + Honkit + plantuml + VSCode + draw.ioプラグイン が結果最高でした 🎉 Honkitについて 以前、gitbookで設計書を書くお話をブログにしましたが、OSSとしての…

昨日まではHexo + GitHubPagesでブログを書いていましたが、今日からはてなブログに移行することにしました。 元々勉強も兼ねて作ってみたけど、記事も増えて管理が面倒になってきたので・・・。 vscodeでmarkdown書いてdeployするだけで良かったので、更新自体は楽だったんですがね。 とりあえず、ちょっとずつ記事を移行しながら今後はこっちで書いていこうと思います。

はじめに 飾り帯の意が強ければ、斧とて飾り帯に砕けることもあろう。1 nikkieです。 Sphinxでランディングページを作って得た知見を、1ヶ月ほど前（11/19(金)）にLTしました。 実はこのひと月の間、そのLTに関連して執筆したエントリがいくつかあったんです！ この記事でLT報告、そして、一連の記事を編み上げます。 目次 はじめに 目次 勉強会の概要 LT「Sphinxで作るランディングページ」 こちらのランディングページはSphinx製です！ 1️⃣&2️⃣ sphinx-designでボタンやカード！ 3️⃣ Alabasterテーマのスタイル変更 4️⃣ Sphinx拡張を自作…

最近やっててハマった代表的なものをメモる。

はじめに 先輩、飲みます？ nikkieです。 Python Boot Camp（a.k.a. pycamp）のライディングページをSphinxで作って得た知見をアウトプットするシリーズです。 このページ、HTMLなのでmake htmlでビルドしてると思うじゃないですか〜1。 実はmake singlehtmlを使うという工夫2をしてるんです！ 目次 はじめに 目次 ドキュメント変換ツールSphinx SphinxのMakefileの秘密 singlehtmlビルダー 過去の記事との関連 終わりに ドキュメント変換ツールSphinx Sphinx（スフィンクス）は、あるルールに従って記述され…

はじめに 「みんな、ウタだよ！」、nikkieです。 先日、愛用しているsphinx.ext.githubpagesを紹介しました。 今回はsphinx-revealjsとsphinx.ext.githubpagesの組合せについて紹介します。 目次 はじめに 目次 本記事の立ち位置 結論：sphinx.ext.githubpagesも使ったsphinx-revealjs製スライドのデプロイ 仕組み：sphinx.ext.githubpagesはなぜsphinx-revealjsでも動くのか？ sphinx.ext.githubpagesの実装 Sphinxのビルダー sphinx-revea…

某社フロントエンドコーディング試験を題材とした React 学習記（作成時の考慮事項まとめ） はじめに React 学習経緯 フォルダ構成/コンポーネント構成 フォルダ構成の再検討 ステート管理 サーバーデータのキャッシュ Global State エラーハンドリング CSS styled components を使用する上で考慮したこと emotion を実際に使う上での方針 テスト Github Pages Github Pages 時のみ専用スクリプトを取り込む その他参考になりそうなもの 残課題 某社フロントエンドコーディング試験を題材とした React 学習記（作成時の考慮事項まとめ…