hexo 教學說明

註冊 github 帳號

建立專案 使用 GitHub Pages 功能

建立自己[username] github 的專案名稱[hexo-blog]
git remote add origin git@github.com:username/hexo-blog.git

如我的 Github 帳號與專案名稱
git remote add origin git@github.com:iachievedream/hexo-blog.git

本機下載 hexo 專案 並選擇部落格模板

本機需要安裝 node(為一套 JavaScript 執行與建置環境)
VScode 編輯器軟體
選擇:hexo 模板

專案結構說明

my-blog/
├── _config.yml                 # Hexo 主設定檔
├── package.json                # npm 套件設定
├── package-lock.json
├── scaffolds/                  # 文章範本
│   ├── post.md
│   ├── page.md
│   └── draft.md
├── source/                     # 網站原始內容
│   ├── _posts/                 # 部落格文章
│   │   ├── hello-world.md
│   │   └── laravel-octane.md
│   ├── _drafts/                # 草稿
│   ├── images/                 # 圖片
│   │   ├── logo.png
│   │   └── banner.jpg
│   ├── css/
│   ├── js/
│   ├── about/
│   │   └── index.md
│   └── contact/
│       └── index.md
├── themes/                     # 主題
│   └── fluid/                  # 例如 Fluid 主題
│       ├── _config.yml
│       ├── layout/
│       ├── source/
│       ├── scripts/
│       └── languages/
├── public/                     # Hexo 產生的靜態網站
│   ├── index.html
│   ├── archives/
│   ├── categories/
│   ├── tags/
│   └── assets/
├── db.json                     # Hexo 快取資料庫
└── node_modules/               # npm 套件

撰寫文章

備註

安裝的流程 使用終端機

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
# 安裝 Hexo CLI
npm install -g hexo-cli

# 建立專案 [以資料夾為 gitpag 為例 可更換名稱]
hexo init gitpag
cd gitpag

git init
git add .
git commit -m "init"

## 建立自己[username] github 的專案名稱[hexo-blog]
git remote add origin git@github.com:username/hexo-blog.git
git remote add origin git@github.com:iachievedream/hexo-blog.git

git push
## 如果沒有該分支 會自動出現下列指令讓你複製
git push --set-upstream origin master

npm install

## 安裝 Fluid 主題
==========
AI:幫我安裝 https://github.com/fluid-dev/hexo-theme-fluid 在 package 管理工具中
下方為操作回應:
==========
npm install --save hexo-theme-fluid 2>&1
cp node_modules/hexo-theme-fluid/_config.yml _config.fluid.yml

### 修改 _config.yml
theme: landscape
改為
theme: fluid

### 確認主題是否成功 [如果設定沒吃到 需要重起 須先將原先的 hexo s 關閉]
hexo clean && hexo g && hexo s

# GitHub Pages 自動部署
npm install hexo-deployer-git --save

## 修改 _config.yml
deploy:
type: git
repo: https://github.com/username/hexo-blog.git
branch: gh-pages


# 建立三個頁面
hexo new page archives
hexo new page categories
hexo new page tags


# 部署
hexo clean && hexo g && hexo deploy


[Utterances GitHub App](https://github.com/apps/utterances)
文章需添加下列 才會無法顯示留言板
comments: false


# hexo 以及 SEO 的關係
以及如何優化
優化後會有那些的好處

npm install hexo-generator-sitemap
npm install hexo-generator-baidu-sitemap

何時導入 hexo 部落格 時機

在教學產業
如直排輪或是講座教育等

分成兩塊
推廣(加廣認識更多人)與部落格(加深讓人深入了解)

有些時機特別
如打廣告讓人看見後
但卻沒有所謂的報名頁
會讓報名者感覺少了些信任感

這個時候就需要累積信任
部落格為必須投資


在預算不足
參與者還少的時間
可以使用下列方式
使用賴官方聯絡人
建一個簡易型的 hexo 部落格
使用 google 表單來讓人報名

使用匯款轉帳的方式收取參與者的報名費