papan01 / gatsby-starter-papan01

A Gatsby starter for creating a markdown blog with the bare essentials needed(SEO, pagination, category etc.)

Papan01 Gatsby Starter

A Gatsby blog starter. The theme is controlled yourself.

See the starter in action » Demo WebSite

⛩ Features

• React Hooks
• Theme Toggle(light/dark)

Light	Dark

• Pagination
• SEO(Sitemap, Schema.org, OpenGraph tags, Twitter tags)
• Web application manifest and offline support
• Google analytics
• Tags
• Categories
• Posts in Markdown
• Disqus comments
• RSS feeds
• Development tools
  • ESLint(Airbnb) for linting
  • Prettier code formatting
  • gh-pages for deploying to GitHub pages
• Netlify CMS
  • gatsby-plugin-netlify-cms
  • custom Previews

🚀 Getting Start

1. Create a Gatsby site.

Use the Gatsby CLI to create a new site.

gatsby new YOUR-PROJECT-NAME https://github.com/papan01/gatsby-starter-papan01

1. Start developing.

Navigate into your new site’s directory and start it up.

cd YOUR-PROJECT-NAME
npm run develop

1. Open the source code and start editing!

Your site is now running at http://localhost:8000!

Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using thitool in the Gatsby tutorial.

Or

git clone https://github.com/papan01/gatsby-starter-papan01.git YOUR-PROJECT-NAME
cd YOUR-PROJECT-NAME
rm -rf .git
npm install
npm run develop

⚙️ Configuration

Edit the confing in config/siteConfig.js:

const config = {
  author: "Papan01", // Site owner
  siteTitle: "Gatsby-Starter-Papan01", // Site title.
  siteTitleShort: "GatsbyJS P01", // Short site title for homescreen (PWA). Preferably should be under 12 characters to prevent truncation.
  siteTitleAlt: "GatsbyJS-Starter-Papan01", // Alternative site title for SEO.
  siteLanguage: "en", // Site language.
  siteDescription:
    "A blog starter with the bare essentials needed for a Gatsby site(SEO, pagination, category etc.)", // Website description used for RSS feeds/meta description tag.
  siteLogo: "static/favicons/favicon.png", // Logo used for manifest.
  siteUrl: "https://gatsby-starter-papan01.netlify.com", // Domain of your website without pathPrefix.
  pathPrefix: "/", // Prefixes all links. For cases when deployed to example.github.io/gatsby-material-starter/.
  siteRss: "/rss.xml", // Path to the RSS file.
  siteFBAppID: "464217807633356", // FB Application ID for using app insights
  siteGATrackingID: "UA-153303709-3", // Tracking code ID for google analytics.
  disqusShortname: "gatsbyjs-starter-papan01", // Disqus shortname.
  twitterUserName: "", // twitter creator for SEO
  datePublished: "2019-12-08", // for SEO
  copyrightYear: "2019", // for SEO
  postsPerPage: 4, // posts per page used in gatsby-node.js
  // Links to social profiles you want to display in the footer.
  rrssb: [
    {
      label: "github",
      url: "https://github.com/papan01",
      iconClassName: "fab fa-github"
    },
    {
      label: "mail",
      url: "mailto:[email protected]",
      iconClassName: "fa fa-envelope"
    },
    {
      label: "facebbok",
      url: "https://www.facebook.com/louis.peng.58?ref=bookmarks",
      iconClassName: "fab fa-facebook"
    },
    {
      label: "instagram",
      url: "https://www.instagram.com/n_louis_peng/?hl=zh-tw",
      iconClassName: "fab fa-instagram"
    }
  ],
  // Links to pages you want to display in the navigation bar.
  navbarLinks: [
    {
      label: "Archives",
      url: "/archives",
      iconClassName: "fa fa-book-open"
    },
    {
      label: "Categories",
      url: "/categories",
      iconClassName: "fa fa-list-alt"
    },
    {
      label: "About",
      url: "/about",
      iconClassName: "fa fa-address-card"
    }
  ]
};
config.copyright = `Copyright © ${config.copyrightYear}. ${config.author}`;

gatsby-starter-papan01's Issues

Word wrapping problem

Hello my friend! I can't open PR. If the sentence is too long to fit on the line, the separation of the letters seems erroneous. I solved the problem by deleting word-break line at layout/style/style.scss@34:

div,
form,
p {
  margin: 0;
  padding: 0;
  word-break: break-all;
}

On homepage:

On post:

Meta tag problem on template

Hello there, I used this repo for my personal blog and it is such a amazing, but I couldn't right meta tags. Other websites can't reach my manifest.webmanifest file so can't read my site title, description and logo. Also my app can't render Helmet component in index.jsx file,
I checked papan01's and gatsby-starter-papan01's meta tags and same situation. Also you can check them on heymeta.com, or metatags.io or any similar site.
How can we solve this problem?