devblog下載 - devblog原始碼下載

devblog

其他類別

1.0.0

下載

開發部落格

DevBlog 是一個完全可自訂的部落格模板，專為想要進入部落格的開發人員（或任何其他人）而設計。它已準備好進行部署（輕鬆），或可根據您的喜好進行編輯和擴展。該部落格是透過 GatsbyJS 完全靜態生成的，具有開箱即用的語法突出顯示（透過 PrismJS），並且內建伺服器端渲染等。

要觀看現場演示，請按此處。

特徵

完全響應
簡約
可透過config.js檔案自訂
易於部署
透過 markdown 文件靜態生成
服務端渲染
透過 PrismJS 進行語法高亮顯示

內容

設定和配置
- 設定
- 配置
建立新帖子
部署
變更日誌
執照

設定和配置

設定

1. 安裝 Gatsby CLI

第一步是在本機安裝 GatsbyJS CLI。這可以透過執行命令npm install --global gatsby-cli來完成

2. 使用此儲存庫建立一個新的 Gatsby 站點

建立新的 Gatsby 網站時，CLI 允許您指定啟動器，在本例中只需提供此儲存庫的 URL。這可以透過執行指令gatsby new YOUR_BLOG_NAME https://github.com/RyanFitzgerald/devblog來完成

3. 根據需要編輯或使用模板

現在您已完成設置，您可以簡單地使用部落格或根據需要進行編輯。例如，執行gatsby develop來啟動 localhost:8000 上可用的熱重載開發環境，或執行gatsby build來建立最佳化的生產版本。有關 Gatsby 的 CLI 命令的完整列表，請查看他們的文檔。

替代設定

或者，如果您希望簡單地分叉此存儲庫或克隆它，那麼您只需運行npm install ，然後運行gatsby develop即可啟動並運行。

配置

基本配置可以透過專案儲存庫根目錄中的config.js檔案完成。透過此文件，您可以編輯部落格的主要顏色、添加部落客和描述等等。預設值如下：

 export default {
  title : 'Dev Blog' , // Required
  author : 'Ryan Fitzgerald' , // Required
  description : 'Full-stack Web Developer' ,
  primaryColor : '#3498db' , // Required
  showHeaderImage : true ,
  showShareButtons : true ,
  postsPerPage : 5 , // Required
  social : {
    website : 'https://ryanfitzgerald.ca' ,
    github : 'https://github.com/ryanfitzgerald' ,
    twitter : 'https://twitter.com/ryanafitzgerald' ,
    linkedin : 'https://ca.linkedin.com/in/ryanafitzgerald'
  }
} ;

注意：出於基本演示目的，需要標記為“必需”的任何配置選項。如果您不希望使用任何沒有「必需」註釋的內容，則可以將其刪除。

了解配置變數

上面引用的配置變數的使用方式如下：

多變的	使用說明
標題	部落格的標題。這主要用於頁面標題。
作者	該部落格的作者。這用於標題名稱和頁面標題。
描述	作者的描述。這用於作者下方的標題。
原色	部落格的主色。
顯示標題圖片	標記是否顯示標題圖像。
顯示共享按鈕	標記是否在每個部落格文章上顯示社交媒體分享按鈕。
每頁貼文數	部落格主頁上每頁的貼文數。這用於分頁。
社會的	部落客的社群媒體資料。目前僅支援個人網站、GitHub、Twitter 和 LinkedIn。

更改主標題圖像

要更改預設標題圖像，只需覆蓋/src資料夾中的main.jpg檔案即可。

更改圖示

要更改預設的圖標，只需覆蓋/src資料夾中的favicon.ico檔案即可。

建立新帖子

所有部落格文章都可以在/src/pages中找到，並且在執行gatsby build命令後靜態建置。要建立新帖子，只需在/src/pages中建立一個新資料夾，並使用您想要的網址名稱。例如，如果您希望 url 顯示為myblog.com/hello-world您可以將資料夾建立為hello-world 。建立資料夾後，只需在其中建立一個index.md檔案即可。

頁面頂部必須包含相同的降價，告訴 Gatsby 有關特定帖子的所需資訊。基本模板是：

 ---
title : New Beginnings
date : " 2018-07-01 "
featuredImage : ' ./featured.jpg '
---

This top portion is the beginning of the post and will show up as the excerpt on the homepage.

<!-- end -->

在上面的程式碼片段中，所需的只是標題和日期。特色圖像是可選的，只需將圖像添加到您剛剛創建的頁面資料夾並像上面的示例一樣引用即可添加。摘錄部分也是可選的，如果您不使用標記，帖子的第一位將自動用作摘錄。

此範本附帶 3 個部落格文章範例，其中包含從程式碼片段使用、插入圖像、使用特色圖像和摘錄等內容。

部署

一旦您準備好部署部落格並使其上線，您就有幾個可用的選項。

手動部署

手動部署部落格只需要執行gatsby build即可建立生產建置。之後，您可以使用通常使用 React 應用程式的任何伺服器，例如 Digital Ocean Droplet 或 AWS 執行個體。所需要的只是某種方式來提供靜態文件。

如果您不熟悉部署 React 應用程序，還有許多其他選項。

GitHub 頁面

為了部署到 GitHub 頁面，您需要先在gatsby-config.js中設定路徑前綴。預設值為pathPrefix: '/devblog'但應將其變更為您選擇的儲存庫名稱。例如，如果您的部落格位於https://github.com/YOURUSERNAME/myblog並希望將其部署到https://YOURUSERNAME.github.io/myblog ，那麼您可以將路徑前綴設為pathPrefix: '/myblog' 。

接下來，只需執行npm run deploy即可部署您的部落格。

或者，如果您希望將其部署到https://YOURUSERNAME.github.io （即您的使用者/組織網站而不是專案網站），則需要進行一些額外的變更。 Gatsby 官方文件在這裡對它們進行了很好的概述。