提姆寫程式

0%

第一次建立 Hexo 與推上 GitHub

發表於 更新於 分類於 Disqus：
Hexo

為什麼要建立 Hexo 部落格

從今年 2 月開始學習前端，在不同階段給我自己設立目標去挑戰，算一算也 10 個月了，看自己的能力還需要一個挑戰來幫助自己升級，讓我自己可以更快投入前端產業領域，經與 Ray 討論後，開始建立 Hexo 部落格，平台這麼多為什麼要使用 Hexo？

因為 Hexo 是要使用指令來做開發，也要配合 GitHub 使用，一方面可以練習指令，另一方面可以練習 GitHub 版本控制，算是一石二鳥。

使用 Hexo 是使用 Markdown 撰寫格式，也需要熟悉 Git 指令還有一點 npm 的知識，可以參考下方連結教學。

Markdown

Git

npm

建立 Hexo 部落格

版本與環境

作業系統： Windows10 X64

Nodejs:：V12.13.1 LTS

IDE：VS Code

本文環境

Hexo 版本

hexo: 4.1.1

hexo-cli: 3.1.0

NexT 版本

Next: 7.6.0

從 GitHub 建立新的數據 (Creat a new Repository)

初始 GitHub 畫面

  • 名稱務必要謹慎設定，因為之後就無法更改，若想要修改只能重新建立數據庫，記得後面的 github.io 要打一樣的。
  • 下方的權限直接用 Public (公開) 即可，若一開始還不想公開就選擇 Private (私人的)。
  • 其他不用更動，直接選擇最下方的綠色按鈕 (Create repostory) 建立數據庫。

Warning

  • 有提到 HEXO 是用指令建立的，所以不要在本地端建立數據庫，建立的格式內容會是錯誤的 (我已經失敗過一次，最後還是重新來過。)

這是一開始看到的樣子，如下圖：

安裝 Hexo

使用指令安裝 Hexo，開啟終端機 (cmd)輸入以下指令：

1
npm install hexo-cli -g

安裝 Hexo

*指令說明：透過 npm 在 全域 (-g) 下安裝 Hexo-Cli

輸入後會看到有進度條再跑，大概幾秒後就完成了。

建立 Hexo

在要存取的硬碟中開啟一個新資料夾，並自訂名稱 (建議用英文)，之後的資料就會在這個資料夾內，並輸入以下指令：

1
hexo init projectname
  • projectname 改成自己定義的名稱，建議用英文，安裝完成後如下圖：

進入 Hexo

在終端機輸入：

1
cd projectname
  • projectname 改成自己定義的名稱，建議用英文

安裝相關套件

由於建立完畢的 Hexo 還必須安裝 npm 相關套件，所以必須在這個目錄下輸入：

1
npm install
  • 指令說明：將 package.json 相依套件下載下來

啟動 Hexo

完成上方內容後再輸入下方指令：

1
hexo server

啟動 hexo server

使用主題 themes

使用 Next 7.6.0 ，主題連結，或是可以到官方網站取得想要的主題，但因為每個主題要修改的程式碼不同，如果要按照我這邊設定，建議選用一樣的樣式!!

替換主題

下載 themes 並解壓縮到資料夾內的 themes 資料夾內，並使用 VSCODE 開啟跟目錄資料夾中的 congig.yml

資料夾 themes 選項

找到第 96 行更改 themes 後面的名稱如下：

1
theme: hexo-theme-next-master

Hexo 基礎設定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Site
title: TimCodingBlog// 網站標題
subtitle: 提姆寫程式。 // 網站副標題
description: 提姆的前端筆記 // 網站敘述
keywords: // 關鍵字
author: Tim // 網站作者
language: zh-TW // 網站語系
timezone:

// URL
url: http://yoursite.com  //輸入您的網站URL，舉例我的就是ray.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

部署 GitHub

需要安裝一個 Hexo 沒有安裝的插件

1
npm install hexo-deployer-git --save

修改 _config.yml 中的 Depolyment 如下：

1
2
3
4
deploy:
  type: git // 模式
  repo: https://github.com/yourGithub /yourGithubName.github.io.git // 自己 GitHub repos 連結
  branch: master // 分支

修改完後輸入下方指令：

1
hexo d g
  • 指令說明：d →部屬、g →生成靜態頁面

其他指令

1
hexo new "title"
  • 說明：建立新文章
1
hexo s -g
  • 說明：s →啟動伺服器 -g →生成靜態頁面
1
hexo d -g
  • 說明： d →部屬模式 -g →生成靜態頁面
1
hexo clean
  • 說明：刪除已生成的靜態頁面及快取檔案

刪除指定文章

在本地端 source 資料夾，把指定的 md. 檔案刪除，在重新佈署即可，指令為：

1
hexo d -g

參考文章：https://hsiangfeng.github.io/hexo/20190411/932826160/