タグ

2019年12月8日のブックマーク (6件)

  • Firebase Hostingを使って静的Webサイトを独自ドメインかつSSL証明書付きで公開する - araya's reservoir

    ブログのホスティング先を GitHub Pages から Firebase Hosting に変えてみた。 Firebase Hosting とは その名の通り Firebase が Web サイトをホスティングしてくれるサービス。 https://firebase.google.com/docs/hosting/ 嬉しいポイントは Zero-configuration SSL is built into Firebase Hosting so content is always delivered securely. ここにあって、なんと独自ドメインでも SSL をサポートしてくれる。 料金も、フリーでそこそこ使えて、ホスティングしてくれるファイルの最大容量は計 1GB・ 月 10GB まで配信できる。 個人ブログくらいならフリーで間に合うし、足りなくなっても月$25 払えば 10GB

    Firebase Hostingを使って静的Webサイトを独自ドメインかつSSL証明書付きで公開する - araya's reservoir
    i_mairy
    i_mairy 2019/12/08
  • Firebaseを使って独自ドメインWebサイトを公開する方法 - Qiita

    1. はじめに Firebaseを使って独自ドメインWebサイトを公開する方法をまとめました。 一般的にはレンタルサーバーなどへFTPツールなどを利用してHTMLファイルをアップして、Webサイト公開という流れですが、Firebaseを使用すると、コマンド一発でWebサイト公開できるようになります。 ただ、独自ドメインを設定するのは少し複雑です。 ボク自身も数ヶ月経ったら独自ドメインの設定方法忘れそうなので、備忘のために当記事を書きました。 ぜひ参考にしていただければと思います。 2. 前提事項 今回ドメイン取得はお名前.comを利用する前提で解説していきます。 3. ドメイン取得 まずは、お名前.comでドメイン取得します。 取得したいドメインを入力し、検索ボタンをクリックします。 お名前.com 次にトップドメインを選択します。 オプションは特に不要なので、すでにIDを持っている方はI

    Firebaseを使って独自ドメインWebサイトを公開する方法 - Qiita
    i_mairy
    i_mairy 2019/12/08
  • Customizing html.js | Gatsby

    Gatsby uses a React component to server render the <head> and other parts of the HTML outside of the core Gatsby application. Most sites should use the default html.js shipped with Gatsby. But if you need to customize your site’s html.js, copy the default one into your source tree by running: And then make modifications as needed. If you need to insert custom HTML into the <head> or <footer> of ea

    Customizing html.js | Gatsby
    i_mairy
    i_mairy 2019/12/08
  • まいのこマート:追従ハンバーガーメニューを実装 - Qrac BLOG

    まいのこマート:追従ハンバーガーメニューを実装Closedfirst published: 2019/01/20last updated: 2019/01/31 かねてより実装して欲しいと言われていた追従ハンバーガーメニューを「まいのこマート」へ設置した。コンテンツも100を超えているので、追従メニューがないとカテゴリーの移動が不便だった。 例によってReactで既存コンポーネントを探したのだけど、良いものが見つからなかった。セッティングがコンポーネントをまたいで複雑になっていたり、中にはFontAwesomeの古いバージョンがインクルードされていたりw 個人的にはオンオフ切り替えられれば、残りはCSSで完結させるつもりだったため、大げさな仕組みは必要なかった。 最初は既存コンポーネントの書き方を参考にしたつもりが、propsやstateがundefinedになってうまくいかず。結局、Ga

    まいのこマート:追従ハンバーガーメニューを実装 - Qrac BLOG
  • Gatsby + NetlifyでWebページを作って、公開するところまでやってみた - むにえる牧場

    概要 とある友人から頼まれてポートフォリオサイトを作るという案件を趣味でやることにしました。 せっかくだからReact製の静的サイトジェネレーターGatsby.jsを使って、ホスティングサービスにはNetlifyを使ってモダンな感じで作ろうと、技術選定を行いました。 (僕はReactの経験、はたまたフロントエンドの経験全然ないです) 今回は、 Gatsbyを利用してジェネレート Netlify上でサイトを公開する まで備忘録として書き残します。 Gatsbyとは GatsbyJS Node.js環境で動作するWebサイトジェネレーター 静的サイトを製作することに特化している React Webpackとモダンな技術てんこ盛り PWA(Progressive Web App)として生成することもできる どんなに適当に作っても爆速で動作する設計になっている(らしい) とメリットだけ見ると良い感

    Gatsby + NetlifyでWebページを作って、公開するところまでやってみた - むにえる牧場
  • Gatsbyプラグイン45選 - Qiita

    なにこれ React.js製の静的サイトジェネレーター Gatsbyは、プラグインを使って簡単に機能拡張できる仕組みを持っています。公式プラグインとコミュニティ提供のものをあわせると、なんと502個もあるそうです。今回はその中でも、おすすめ45個をユースケース別にご紹介します。 ※ 記事はブログの転記です。Qiitaで使えない機能(コードブロックの指定行強調表示など)の表示結果はスクリーンキャプチャにしています。HTMLでの表示結果を見たい場合はブログをご覧ください。 ユースケース別目次 ※クリックすると説明セクションにとべます。 マークダウン系 コードブロックでシンタックスハイライトする コードブロックにタイトルを追加する 見出しにGitHub風ホバーリンクをつける 絵文字を使う Graphvizでグラフを描画する 数式を使う コードブロックにJavaSriptファイルなどを埋め込む

    Gatsbyプラグイン45選 - Qiita