handmade blog

✍️

手作部落格

以另一種語言閱讀此文件： ?? ?? ?? ?? ?? ?? ??

Handmade Blog 是一個輕量級的靜態部落格產生器，適合想要快速建立部落格的人。它支援部落格文章的文章類型文件、作品集的工作類型文件、程式碼亮點、KaTeX 語法、腳註等。

示範：這裡

展示櫃

• betty-grof.github.io：https://github.com/betty-grof/betty-grof.github.io
• parksb.github.io：https://github.com/parksb/parksb.github.io

燈塔結果

行動裝置上的article/0.html

桌面上的article/0.html

入門

1. 按一下檔案清單上方的「使用此範本」按鈕以建立新儲存庫。如果您想要使用 github.io 網域，則必須將儲存庫命名為{YOUR_ID}.github.io 。 （例如， betty-grof.github.io ）不要忘記啟用「包含所有分支」選項。

   

   

2. 點擊儲存庫中的「設定」選項卡，並將 GitHub Pages 的來源分支設定為gh-pages分支。 GitHub Pages 將基於gh-pages分支來託管您的網站。幾分鐘後您就可以透過https://{YOUR_ID}.github.io/造訪該網站。

   

   

3. 克隆儲存庫並安裝節點包。

   $ git clone https://github.com/{YOUR_ID}/{REPOSITORY_NAME}.git # git clone https://github.com/betty-grof/betty-grof.github.io.git
   $ cd {REPOSITORY_NAME} # cd betty-grof.github.io
   $ npm install

4. 自訂一些文本，例如導航標題（在app/templates/navigations.ejs中），然後執行npm run build 。

    < nav >
     < a class =" logo-link " href =" / " >
       < h1 > CUSTOMIZED BLOG TITLE </ h1 >
       < span > customized blog subtitle </ span >
     </ a >
     < small >
       < a id =" about " class =" info-link " href =" /about.html " > ?About </ a > /
       < a id =" works " class =" info-link " href =" /works.html " > Works </ a > /
       < a id =" articles " class =" info-link " href =" /articles.html " > Articles </ a >
     </ small >
   </ nav > 

   $ npm run build

5. 執行npm start腳本來啟動本機伺服器偵聽http://localhost:8080/ 。本機伺服器基於dist目錄。

   $ npm run build
   $ npm start

   

6. 提交工作目錄中的變更並將其推送到遠端儲存庫。

   $ git add ./app/templates/navigations.ejs
   $ git commit -m " Customize the blog title and subtitle "
   $ git push origin master

7. 如果您準備好託管網站，請執行deploy腳本。該腳本將本機檔案建置到dist目錄並將其推送到僅包含dist目錄中的檔案的gh-pages分支。 GitHub Pages 將自動基於gh-pages分店將您的網站託管在https://{YOUR_ID}.github.io/上。

   $ npm run deploy

用法

即時重新載入

1. 運行npm run watch來即時追蹤變化。
2. 運行npm start啟動本地伺服器。 （ npm run watch必須仍在背景或其他選項卡或其他會話中運行。）
3. 現在，每當您更改app/templates 、 app/styles和_articles目錄中的任何檔案時，它都會自動建置。

撰寫和發布文檔

1. 在_articles或_works目錄中撰寫文件。
2. 執行npm run publish article或npm run publish work腳本將 Markdown 文件轉換為 HTML。
3. 使用npm start腳本在本機伺服器上預覽轉換後的文件。
4. 提交更改並將其推送到儲存庫，然後執行npm run deploy進行部署。

編輯模板

修改 ejs 範本以變更現有頁面的內容。例如，如果要將圖片放置到登陸頁面，請開啟app/templates/index.ejs文件，並將img標籤新增至main-container元素。

 < main id =" main-container " >
  < img src =" ../assets/profile.jpg " alt =" My profile picture " />
  < p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. </ p >
</ main >

然後，執行npm run build script 以發布修改後的登入頁面，並使用npm start腳本在本機伺服器上預覽變更。

$ npm run build
$ npm start

如果您準備好部署，請執行npm run deploy腳本。您不僅可以變更登入頁面，還可以像這樣變更任何頁面。 （您可能需要了解專案結構。）

新增自訂網域

在根目錄中建立 CNAME 檔案。建置流程將自動為您取得 CNAME，您可以從自訂網域提供部落格服務。

要了解有關 Github 如何管理 CNAME 的更多信息，請查看文檔

專案結構

• _articles - 部落格文章的 Markdown 檔案。
• _works - 作品集的 Markdown 檔案。
• app
  • assets - HTML 文件要匯入的任何文件，例如圖像、字體等。
  • public - 由publish腳本產生的 HTML 檔案。 server和dist目錄都是基於這個目錄的。不要直接更改該目錄下的檔案。
    • article - 從_articles目錄轉換的 HTML 檔案。
    • work - 從_works目錄轉換的 HTML 檔案。
  • styles - 由 HTML 檔案匯入的 CSS 原始碼。
  • static - 任何未由build腳本編譯的靜態文件，例如robots.txt 、 sitemap.xml或 SEO 文件。 build腳本將該目錄下的所有檔案複製到dist目錄中。
  • templates - EJS 模板檔。 publish腳本將此目錄下的範本轉換為 HTML 檔案。
• dist - 由build腳本編譯的檔案。 start腳本根據目錄開啟本機伺服器， deploy腳本根據目錄將網站部署到GitHub頁面。不要直接更改該目錄下的檔案。
• services - 實作publish腳本的源代碼。
  • classes
  • models
• tools - 實作各種 npm 腳本的原始碼。

可用腳本

npm start

啟動本機開發伺服器偵聽 http://localhost:8080/。

npm run publish

將模板轉換為 HTML 文件。

$ npm run publish article

轉換所有文章。

$ npm run publish works

轉換所有作品。

$ npm run publish article 5

轉換id為5的文章。

$ npm run publish work 3

轉換id為3的作品。

$ npm run publish page

轉換所有頁面。

npm run watch

每當檔案被修改時，都會自動重建templates目錄中的範本檔案、 styles目錄中的 css 檔案和_articles目錄中的 markdown 檔案。

npm run build

使用包裹捆綁器建立檔案。

npm run deploy

建置並部署文件。

執照

該項目根據 MIT 許可證獲得許可 - 有關詳細信息，請參閱許可證文件。