npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

gatsby-all-pack-theme-starter

v1.0.1

Published

[![Netlify Status](https://api.netlify.com/api/v1/badges/c04a44ac-d26e-4471-8cc7-929be2ae980e/deploy-status)](https://app.netlify.com/sites/gatsby-all-pack-theme-starter/deploys)

Downloads

4

Readme

Netlify Status

https://gatsby-all-pack-theme-starter.netlify.app/

What is this

gatsby-all-pack-theme-starter

GatsbyJS に最初からこんな機能が入っていれば良いのにと思い作成したのがこちらのBlog Themeです。

最初からワードの記事検索機能やRSSの生成機能、Google Analyticsでのランキング機能、関連記事の表示など ブログに最低限必要な機能をすべて詰め込んだThemeになります。

多機能ながらもカラーテーマやサイトテーマを細く設定でき、カスタマイズが可能になっています。 唯一GUIで設定が完結できるGatsby themeです

What is a feature?

  • Algoliaでの記事検索機能
  • Google Analyticsより取得されたPV数でランキング機能
  • 記事の関連リンク設定(関連記事の設定が可能)
  • サイトテーマカラー、デザインをNetlify CMSで調整可能
  • レスポンシブ対応・ハンバーガーメニューの実装
  • タグ機能・カテゴリー機能
  • RSSの生成機能・サイトマップ生成機能

How To Deploy & Site Setting

Netlify Upload

  1. gatsby new hoge でソースコードを取得する(CUI操作はここだけです)
gatsby new blog https://github.com/yoshiki-0428/gatsby-all-pack-theme-starter.git
cd blog
git remote add origin [your-git-repository-url]
git push origin master
  1. NetlifyのサイトでGit連携をする

  2. Netlify Envを設定する

秘匿情報をGit履歴にコミットしないようEnvを設定する必要があります。Themeでは2つのEnvが必要です。

  1. デプロイする

Site Setting

サイト名、タイトル、ブログ画像、ヘッダー画像、著者情報などブログに必要な内容を設定していく

Google Analytics & Algolia Setting

各種APIのAPI Keyを取得する必要があります。Skip可能です。

Color Setting

Theme Dark mode (Sample)

  • white: #1F1F1F
  • primary: #00FFC5
  • accent: #007ACE
  • baseBack: #121212
  • baseFont: #FAFAFA
  • baseGray: #3F3F3F
  • baseGrayLight: #4E4E4E

Theme Light mode (Sample)

  • white: #FFFFFF
  • primary: #00FFC5
  • accent: #007ACE
  • baseBack: #ebebeb
  • baseFont: #141414
  • baseGray: #282828
  • baseGrayLight: #E2E8F0

How To Post articles

Netlify CMSでの更新

  1. your-domain.com/admin にアクセスしログイン
  2. posts のタブに遷移し、記事を編集する

esa.io などのthird party CMSでの更新

こちらを参照