Micasa

Micasa

Frontend and mobile developer

Всего 6 записей

Последние статьи

Топ советов и хитростей NPMКакие структуры данных должен знать JavaScript разработчик?Как создать дискорд бота?gatsby-starter-calpa-blog READMEAboutГостевая комната

Рекомендуемые ссылки

React Official WebsiteMozile Developer NetworkJavascript lessons

Calpa 的技術博客 Starter

透過這個 Starter，你可以快速建立一個如同 Calpa's Blog 的博客系統。

功能

系統架構

  1. GatsbyJS v2，更加快速
  2. Google Analytics
  3. 支持離線操作
  4. Web App Manifest
  5. Netlify 網站優化
  6. 精美評論區 (powered by Gitalk)
  7. 高速解析 Markdown (基於gatsby-transformer-remark)
  8. 支持站點地圖

設計

  1. 分頁設計
  2. 響應式設計
  3. 自動加載 Font Awesome (基於 react-fontawesome)
  4. 流暢滑動設計 (基於 smooth-scroll)

數據來源

你可以直接修改 /src/content/*.md，或者是使用 Netlify-cms 來編輯文章。

可自定的地方

如果你覺得這個系統需要更加完善的話，你可以從下面的地方入手：

  1. 搜索引擎優化
  2. 使用 SCSS 來自定義樣式
  3. 數據來源

快速入門

使用 Netlify 部署

你可以使用以下按鈕來構建和部署博客的一個副本：

在你點擊上面的按鈕之後，你就會賦予 Netlify 取得你的 Github 授權，以及選擇倉庫名稱。Netlify 會自動創建一個倉庫，並且複製那裡的文件。

之後，它會自動構建和部署一個新的網站，為你帶來一個完整的博客系統。

使用 Codesandbox 來寫代碼

你可以使用以下按鈕來嘗試修改博客系統的代碼：

Edit blog

如果你喜歡 我的博客，請給個 star，多謝。

前提

  1. Git
  2. Node：從 8.5.0 或更高版本開始的任何 8.x 版本
  3. fork 本項目 （想要貢獻的話）
  4. 在本地計算機上克隆本項目

開發

如何運行?

  1. 安裝 Gatsby-CLI
npm install --global gatsby-cli
  1. 使用 Gatsby 啟動器創建新的 Gatsby 項目，awesome-blog是您博客的文件夾
gatsby new awesome-blog https://github.com/calpa/gatsby-starter-calpa-blog
  1. 打開文件夾
cd awesome-blog

  1. 運行開發服務器

    1. npm start 啟動熱重載開發服務器 (基於Gatsby)
    2. open http://localhost:8000 在您喜歡的瀏覽器中打開

配置

在 data/config編輯 exports 的對象

註意壹下: 想要查找 theme_color 十六進制代碼，請單擊此處。

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',
    }
  ]

插件的配置文件:

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

gitalk: {
    clientID: '18255f031b5e11edd98a',
    clientSecret: '2ff6331da9e53f9a91bcc991d38d550c85026714',
    repo: 'calpa.github.io',
    owner: 'calpa',
    admin: ['calpa'],
    distractionFreeMode: true,
  },
}

部署

Calpa 的博客 目前正在使用Netlify，當然，您可以使用 Github Pages 作為替代方案。

  • Github Pages

    npm run deploy 將博客部署到 Github Pages

  • Netlify

    自動部署

故障排除

  • 對於 window is defined, 引包前檢查 window :

    if (typeof window !== `undefined`) {
const module = require("module");
}
  • npm run reset 清除本地緩存
  • 查 GatsbyJS 調試文檔

貢獻

請閱讀 CONTRIBUTING.md 獲取更多信息。

聯系

如果您對此項目感興趣，請隨時聯系Calpa Liu。

感謝您的貢獻...... :)