# 第四週：Hexo 極速免費架站全攻略

* 記得錄影
* [台中場宣傳](https://discord.com/channels/801807326054055996/1240701836063932436)
* 詹姆士志工直播時間(時間到後請前往[直播分享台](https://discord.com/channels/801807326054055996/1235619737770397726))
* 5/26(日)下午2點
* 5/28(二)晚上8點(偽元素、漢堡選單)

## 什麼是 Hexo？
- [Hexo 官網](https://hexo.io/zh-tw/)
- [六角學院流量排名](https://www.similarweb.com/zh-tw/website/hexschool.com/#overview)

## 常見部落格服務
1. medium、方格子
2. wordpress
3. Hexo 靜態部落格網站

## 環境安裝

- [Hexo 官網](https://hexo.io/zh-tw/)
- [Node.js 官網](https://nodejs.org/en)
- [Git 官網](https://git-scm.com/)

node -v
npm -v
git -v

npm install -g hexo-cli

hexo -v 

## 終端機操作

- [終端機操作分享](https://w3c.hexschool.com/git/8dc4619b)
- 前往指令：cd
## hexo 指令
1. 建立部落格：`hexo init 你的網站名稱 `
3. 開啟伺服器：`hexo server`
4. 新增一篇部落格：`hexo new "部落格標題"`
5. 輸出實際網頁： `hexo generate`
6. 清除快取：`hexo clean`
7. 部署網站：`hexo deploy`

## markdown 教學

- [Markdown 官方教學](https://markdown.tw/)
- [Ray 助教部落格 Markdown 教學](https://israynotarray.com/other/20191111/1875438261/)

標題： #、##
連結： [文字](連結)

## config.yml 全站介紹

* [文件連結](https://hexo.io/zh-tw/docs/configuration)

## 中場休息
* 神秘加碼公布
* [體驗營同學會，今晚截止](https://hexschool.tw/3myoU)，**台北場已額滿，可申請線上錄影場。建議想瞭解後續直播培訓班的學員報名**

上週小組抽獎：
2
4
6
10
13
16
17
18
21
27
38
39
45
50
61
71
72

:::spoiler 圖示

* 每週一份設計稿，鍛鍊四大技能
* 首次導入 Git 團隊協作教學
* 分組專題

:::

## 新增頁面

1. `hexo new page 頁面名稱`

## 安裝 theme 內建樣版
* [安裝網址](https://github.com/hexojs/hexo-theme-landscape)

git clone --depth 1 https://github.com/hexojs/hexo-theme-landscape themes/landscape

## hexo 架構

- theme
 -landscape
  - config.yml 主題 config

- config.yml 全站設定

## 準備部署嘍！

- Git 安裝連結：[https://git-scm.com/](https://git-scm.com/)
- Git 版本查詢指令：`git --version`
- [GitHub 官方網站](https://github.com/)、[詳細步驟影片](https://courses.hexschool.com/courses/2484395/lectures/52651393)

## 讓 VSCode 綁定你的 GitHub 帳號，準備部署網站嘍！

## 在 GitHub 開啟一個網站空間

## 部署流程

1. [Hexo + GitHub Pages 官方部署說明](https://hexo.io/zh-tw/docs/github-pages#%E4%B8%80%E9%8D%B5%E9%83%A8%E5%B1%AC)

要調整 config yml 的 url
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'

## 圖床 ([GitHub 使用限制](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages#usage-limits))

1. [firebase 圖床服務](https://firebase.google.com/)
2. 在 `source` 資料夾增加 `images`，在部落格添加圖片方式

![image](/images/vision-pro.png)

## tag 加入方式

在 .md 檔的表頭加上

tags:
- jQuery
- 表格

## 架站任務：[Hexo 部落格架站影音任務](https://rpg.hexschool.com/#/training/12062289980032551059/board/content/12062289980032551060_12062289980032551075)
1. 有修改 title
1. 表頭標題、子標題有更換
1. 右邊有標籤、標籤雲
1. 有新增兩篇部落格，且可點擊內頁觀看更多
1. 表頭選單的首頁、部落格、關於我的連結都正常
1. 有新增「關於我」頁面