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
- 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
- Start developing.
Navigate into your new site’s directory and start it up.
cd YOUR-PROJECT-NAME
npm run develop
- 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:navy90517@gmail.com",
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}`;