Skip to content

Latest commit

 

History

History
225 lines (165 loc) · 6.15 KB

README.md

File metadata and controls

225 lines (165 loc) · 6.15 KB
Raw

Gatsby Icarus Theme Starter - Kun's Blog

GitHub license Accept Pull Requests Twitter Greenkeeper badge Build Status Netlify Status

简体中文 | English

Home Page

Build a blog system like Kun's Blog in ease.

If you like this project, please don't hesitate to star it. Thank you.

Feature

Structure

  1. GatsbyJS v3, faster than faster
  2. Google Analytics
  3. Offline support
  4. Web App Manifest
  5. Page pagination
  6. Netlify optimization
  7. Awesome comment component (powered by Gitalk)
  8. Search Engine Optimization
  9. Parse Markdown in high speed (powered by gatsby-transformer-remark)
  10. Support to sitemap
  11. Download as a desktop App
  12. Support typescript
  13. Support Editing with Notion(RoadMap)
  14. Support Search inside Site(RoadMap)

Design

  1. Pagination
  2. Different Tags
  3. Responsive Web Design
  4. Font Awesome is auto loaded (powered by react-fontawesome)
  5. Scroll smoothly (powered by smooth-scroll)
  6. theme-like Icarus in Hexo

Data Source

You can edit the posts in /src/content/*.md, or using Netlify-cms to edit the posts.

Customization for developers

  1. Optimize code
  2. Styled using SCSS
  3. Data Source

Get Started

Deploy with Netlify

Use the button below to build and deploy your own copy of the repository:

Deploy to Netlify

After clicking that button, you’ll authenticate with GitHub and choose a repository name. Netlify will then automatically create a repository in your GitHub account with a copy of the files from the template.

Next, it will build and deploy the new site on Netlify, bringing you to the blog system when the build is complete.

Code with Codesandbox

Use the button below to code with the blog system:

Edit blog

Prerequisites

  1. Git
  2. Node: 12.0.0 or higher
  3. A fork of the repo (for any contributions)
  4. A clone of the this repo on your local machine

Develop

How to start this project?

  1. Install Gatsby-CLI
npm install --global gatsby-cli
  1. Create new Gatsby project using this starter, awesome-blog is your blog's folder
gatsby new awesome-blog https://github.com/Kun8018/gatsby-starter-icarus-blog

## 使用ssh
gatsby new test-blog git@github.com:Kun8018/gatsby-starter-icarus-blog
  1. Open the folder
cd awesome-blog

  1. Run Development Server

    1. npm start to start the hot-reloading development server (powered by Gatsby)
    2. open http://localhost:8000 to open the site in your favorite browser

Configuration

Edit the export object in data/config

Note: To look up theme_color hex code, click here.

module.exports = {
  title: 'your blog title here',
  maxPages: 12
  meta: {
    description: 'blog description',
    keyword: 'blog, JavaScript',
    theme_color: '#hexcode',
    favicon: 'https:yourimageurl.com',
    google_site_verification: 'your google verification hash',
  },
  name: 'your name',
  email: 'your_email@gmail.com',
  iconUrl: 'https://youricon.jpg',
  License: 'by',
  url: 'https://yourblog.me',
  about: '/2018/05/01/about-your-name/',
  // Sidebar
  zhihuUsername: 'your zhiu user name here',
  githubUsername: 'your github user name here',
  friends: [
    {
      title: 'friend title',
      href: 'link to their blog',
    }
  ]

Plugins in the configuration file:

gaOptimizeId: 'GTM-WHP7SC5',
gaTrackId: 'UA-84737574-3',
navbarList: [
  {
    href: '/stats/',
    title: 'stat title',
  },
  {
    href: '/tags/',
    title: 'tags',
  },
  {
    href: '/guestbook/',
    title: 'guestbook',
  },
  {
    href: '/2018/10/04/about-your-blog/',
    title: 'your title',
  },
],
redirectors: [
  {
    fromPath: '/',
    toPath: '/page/1',
  },
],

Gitalk plugin configuration

gitalk: {
    clientID: '',
    clientSecret: '',
    repo: 'Kun8018.github.io',
    owner: 'Kun8018',
    admin: ['Kun8018'],
    distractionFreeMode: true,
  },
}

Deploy

Kun's blog is currently using Netlify, though, you may use Github Pages as an alternative.

  • Github Pages

    npm run deploy to deploy the blog to Github Pages

  • Netlify

    Auto Deploy

Troubleshooting

  • For window is defined, wrap the require in check for window:

    if (typeof window !== `undefined`) {
  const module = require("module");
}

  • npm run reset to clear the local cache

  • Check GatsbyJS Debugging Docs

Contributing

Please read CONTRIBUTING.md for more information.

And don't hesitate to put your star and watch this starter project.

Contact

If you are interested in this project, please feel free to contact Calpa Liu.

Thanks For Contribute... :)