A GatsbyJS Blog Template for blogging purpose.
Install this template (assuming Gatsby is installed and updated) by running from your CLI:
gatsby new YourProjectName https://github.com/completejavascript/gatsby-blog-template
npm run develop # or gatsby developOr you can fork the project, make your changes there and merge new features when needed.
Alternatively:
git clone https://github.com/completejavascript/gatsby-blog-template YourProjectName # Clone the project
cd YourProjectname
rm -rf .git # So you can have your own changes stored in VCS.
npm install # or yarn install
npm run develop # or gatsby develop Navigate to localhost:8000.
- Posts and pages in Markdown
- Tags and categories with pagination
- Homepage as list of articles, support "Load more" function
- Code highlight using Prism.js and Tomorrow Night theme
- Disqus for comment
- Style using Shiba.CSS
Edit the export object in data/SiteConfig:
const config = {
// Site info
siteTitle: "Gatsby Blog Template", // Site title.
siteTitleShort: "GB Template", // Short site title for homescreen (PWA). Preferably should be under 12 characters to prevent truncation.
siteTitleAlt: "Gatsby Blog Template", // Alternative site title for SEO.
siteLogo: "/logos/logo-1024x1024.png", // Logo used for SEO and manifest.
siteUrl: "https://gb-template.netlify.com", // Domain of your website without pathPrefix.
pathPrefix: "", // Prefixes all links. For cases when deployed to example.github.io/gatsby-advanced-starter/.
siteDescription: "A GatsbyJS Blog Template for blogging purpose.", // Website description used for RSS feeds/meta description tag.
siteRss: "/rss.xml", // Path to the RSS file.
siteLang: "en",
siteFBAppID: "399626517562189", // FB Application ID for using app insights
googleAnalyticsID: "UA-96543695-7", // GA tracking ID.
postDefaultCategoryID: "", // Default category for posts.
// Common for tag, category pages and widget
numberLatestPost: 8,
postsPerPage: 6,
// Use for post
dateFromFormat: "YYYY-MM-DD HH:mm", // Date format used in the frontmatter.
dateFormat: "MMMM Do, YYYY", // Date format for display.
postTagged: "TAGGED",
postInCategories: "POSTED IN",
postOnDate: "Posted on",
// Use for comment
lazyLoadComments: true,
disqusShortname: "gb-template", // Disqus shortname.
btnLoadComments: "Load comments",
// Use for home page
numberLoadmore: 6,
btnLoadmore: "Load more",
homeHasLoadmore: true,
homeHasThumbnail: true,
homeHeader: "Home",
// Use for page
pathPrefixPagination: "/page", // Prefix path for pagination
pageNotFoundTitle: "Page Not Found", //
pageNotFoundBtn: "Back to our site",
pageNotFoundContent: "Looks like you've followed a broken link or entered a URL that doesn't exist on this site.",
// Use for tag
pathPrefixTag: "/tag", // Prefix path for tags
tagHeader: "Posts tagged as", // use in header of tag-template page
tagHasThumbnail: true,
// Use for category
pathPrefixCategory: "/category", // Prefix path for category
categoryHeader: "Posts in category", // use in header of category-template page
categoryHasThumbnail: true,
// Use for widget
categoryWidgetTitle: "Categories",
tagWidgetTitle: "Tags",
latestPostsWidgetTitle: "Latest posts",
// Use for user info
userName: "Lam Pham", // Username to display in the author segment.
userEmail: "completejavascript.super@gmail.com", // Email used for RSS feed's author segment
userTwitter: "CmpltJavaScript", // Optionally renders "Follow Me" in the UserInfo segment.
userLocation: "Hanoi, Vietnam", // User location to display in the author segment.
userAvatar: "https://www.gravatar.com/avatar/42fd3d526fde1ef76d5002e4ebd303e9.jpg?s=300", // User avatar to display in the author segment.
userDescription:
"Software Engineer, Web Developer, JavaScript Lover & Blogger @completejavascript.", // User description to display in the author segment.
// Links to social profiles/projects you want to display in the author segment/navigation bar.
userLinks: [
{
label: "Email",
url: "mailto:completejavascript.super@gmail.com",
iconClassName: "far envelope"
},
{
label: "Website",
url: "https://completejavascript.com/",
iconClassName: "fas globe"
},
{
label: "Twitter",
url: "https://twitter.com/CmpltJavaScript",
iconClassName: "fab twitter"
},
{
label: "Facebook",
url: "https://www.facebook.com/completejavascript/",
iconClassName: "fab facebook-f"
},
{
label: "Linkedin",
url: "https://www.linkedin.com/in/completejavascript/",
iconClassName: "fab linkedin-in"
},
],
// Use for navigation
navTitle: "GB Template",
navLinks: [
{ label: "About", url: "/about" },
{ label: "Contact", url: "/contact" },
],
// Use for footer
socialLinks: [
{
label: "Codepen",
url: "https://codepen.io/completejavascript/",
iconClassName: "fab codepen"
},
{
label: "FreeCodeCamp",
url: "", // Ignore
iconClassName: "fab free-code-camp"
},
{
label: "GitHub",
url: "https://github.com/completejavascript",
iconClassName: "fab github"
},
{
label: "Facebook",
url: "https://www.facebook.com/completejavascript/",
iconClassName: "fab facebook-f"
},
{
label: "Linkedin",
url: "https://www.linkedin.com/in/completejavascript/",
iconClassName: "fab linkedin-in"
},
{
label: "Twitter",
url: "https://twitter.com/CmpltJavaScript",
iconClassName: "fab twitter"
},
{
label: "RSS",
url: "https://gb-template.netlify.com/rss.xml",
iconClassName: "fas rss"
},
],
footerLinks: [
{ label: "Home", url: "/" },
{ label: "About", url: "/about" },
{ label: "Contact", url: "/contact" },
{ label: "Terms of Use", url: "/terms" },
{ label: "Privacy Policy", url: "/privacy" },
{ label: "Sitemap", url: "https://gb-template.netlify.com/sitemap.xml" },
],
copyright: "Copyright © 2019 Lam Pham. Unless otherwise noted, all code MIT license.",
// Use for manifest
themeColor: "#2196F3", // Used for setting manifest and progress theme colors.
backgroundColor: "#FFF" // Used for setting manifest background color.
};
// Validate
// Make sure pathPrefix is empty if not needed
if (config.pathPrefix === "/" || config.pathPrefix === "") {
config.pathPrefix = "";
} else {
// Make sure pathPrefix only contains the first forward slash
config.pathPrefix = `/${config.pathPrefix.replace(/^\/|\/$/g, "")}`;
}
// Make sure siteUrl doesn't have an ending forward slash
if (config.siteUrl.substr(-1) === "/")
config.siteUrl = config.siteUrl.slice(0, -1);
// Make sure siteRss has a starting forward slash
if (config.siteRss && config.siteRss[0] !== "/")
config.siteRss = `/${config.siteRss}`;
module.exports = config;This project is based on:
This project is open source and available under the MIT License.