gatsby starter gcn下載 - gatsby starter gcn原始碼下載

gatsby starter gcn

其他類別

v3.0.1

下載

gatsby-starter-gcn

用於使用 Gatsby、Contentful 和 Netlify 建立令人驚嘆的靜態網站的入門範本。受到 gatsby-contentful-starter 的啟發。

特徵

與隨時可用的佔位符內容進行內容集成
Netlify 集成，包括預先建立的聯絡表單
最小響應式設計 - 定製或拆解
分頁邏輯
主題介面
SEO 友善組件
- OpenGraph 共享支持
- 網站地圖生成
Google分析
漸進式網頁應用程式
離線支援
Gatsby 標準模組，用於使用 StandardJS 檢測 Javascript
Stylelint 支援樣式元件以檢查 JS 中的 CSS

示範

https://gcn.netlify.app/

入門

安裝

 git clone https://github.com/ryanwiemer/gatsby-starter-gcn.git
yarn install

或透過 Gatsby CLI

 gatsby new gatsby-starter-gcn https://github.com/ryanwiemer/gatsby-starter-gcn.git

設定內容豐富

註冊 Contentful 並建立一個新的空白空間
yarn run setup
輸入您在此處找到的 Contentful 空間的請求資訊： app.contentful.com →空間設定→ API 金鑰。您需要提供標準 API 金鑰（第一個選項卡）和管理金鑰（第二個選項卡）。

客製化

網站數據

編輯/src/gatsby-config.js中的 siteMeta 數據

  siteMetadata: {
    title : 'GCN' , // Title of the website
    description : // Description of the website
      'A starter template to build amazing static websites with Gatsby, Contentful and Netlify' ,
    siteUrl : 'https://gcn.netlify.app' , // Website URL. Do not include trailing slash
    image : '/images/share.jpg' , // Path to default image for SEO
    menuLinks : [ // The links used in the top menu
      {
        name : 'Home' ,
        slug : '/' ,
      } ,
      {
        name : 'About' ,
        slug : '/about/' ,
      } ,
      {
        name : 'Contact' ,
        slug : '/contact/' ,
      } ,
    ] ,
    postsPerFirstPage : 7 , // Number of posts on the first page
    postsPerPage : 6 , // Number of posts used on all other pages
    /*
      Root URL for posts and tags
      For example: 'blog' will result in:
        - www.example.com/blog/
        - www.example.com/blog/post-name/
        - www.example.com/blog/tag/tag-name/
    */
    basePath : '/' , // Defaults to the homepage
  }

注意：如果您在本機開發時沒有看到變更已反映，您可能需要執行yarn clean然後透過yarn develop重新啟動伺服器。

主題介面

編輯/src/gatsby-plugin-theme-ui/index.js

 export default {
  colors : {
    background : '#ffffff' ,
    text : '#121212' ,
    primary : '#121212' ,
    secondary : '#e9e9e9' ,
    tertiary : '#f3f3f3' ,
    highlight : '#5b8bf7' ,
  } ,
  fonts : {
    body : '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif' ,
  } ,
  sizes : {
    maxWidth : '1050px' ,
    maxWidthCentered : '650px' ,
  } ,
  responsive : {
    small : '35em' ,
    medium : '50em' ,
    large : '70em' ,
  } ,
}

使用蓋茲比標準

使用yarn test腳本快速檢查程式碼是否有錯誤
您可以查看 Gatsby Standard 自述文件，以詳細了解如何將此項目包含的 Gatsby Standard、Stylelint 和 Prettier 模組整合到您的文字編輯器中

內容和搜尋引擎優化

您可以取代static/images目錄中的share.jpg和favicon.png檔案。
元描述在 Contentful 中定義。如果您選擇在新貼文中將此欄位留空，則將使用貼文/頁面的 320 個字元摘錄。

部署

手動 Netlify 部署

運行gatsby build
將資料夾/public/拖曳到 Netlify 中

從 Git 進行 Netlify 部署（建議）

來自 Git 的新 Netlify 網站
連接 GitHub 並選擇您的儲存庫
導覽至 Netlify：設定→建置和部署→建置環境變數。使用空間 ID 和內容交付 API 新增以下環境變數 - 來自 Contentful 的存取權杖。此外，如果需要，您可以輸入 Google Analytics ID。變數的命名必須與此完全相同才能正常運作。

 ACCESS_TOKEN
SPACE_ID
GOOGLE_ANALYTICS

導覽至 Netlify：部署.按一下Trigger deploy以手動觸發部署，以確認網站正在使用您的建置環境變數成功建置。此時請注意，每次您推送到master時，部署都會自動啟動並發佈到生產環境。

附加設定

內容豐富的 Webhook（可選）

導航到 Netlify：設定→建置和部署→建置掛鉤。建立一個新的建置掛鉤。
導覽至 Contentful： app.contentful.com →空間設定→ Webhooks 。使用您剛剛建立的 Netlify 建置 URL 建立一個 Webhook，並配置哪些事件應觸發生產建置。例如，每次發布、取消發布或刪除貼文或頁面時，以下內容都會重建生產網站：