My Blog - HackMD

My Blog === #### Red’s Notes 410613032 **生科三廖虹婷** --- ### What is Hexo --- - - - --- ### Step of Constructing My Blog --- 1. **下載軟體** 1. **執行** hexo 1. **架設環境** 1. **編輯文章** --- ### **下載軟體** --- - **必要的背景軟體**： git、node.js - **程式編輯軟體**： VScode、notepad++ (**擇一即可**) --- ### **必要的背景軟體** git ![](https://i.imgur.com/rgXw0we.png "git") --- ### **必要的背景軟體** node.js ![](https://i.imgur.com/dcDXUpM.png "node.js") --- ### **程式編輯軟體** VScode ![](https://i.imgur.com/ki6tNgv.png "VScode") --- ### **程式編輯軟體** notepad++ ![](https://i.imgur.com/RZdEZ39.png "notepad++") --- ### Step 1: 下載 Hexo 套件 `$ npm install -g hexo-cli` --- - npm (node package manerger)**：以** JavaScript **編寫，為** node.js **預設的軟體套件管理系統，使用者可以上傳自己編寫的套件軟體，提供不同功能的套組下載。** - cli (command line interface) **命令行介面：即使用非圖標式的鍵盤輸入命令方式。** --- ### Step 2: 初始化 Hexo 資料夾 `$ hexo init "filename"` - **此資料夾會保存在本地端** (**電腦裡**) **有關部落格的所有資料。雖然有把數據** deploy **到** GitHub **上，但無法編輯文章內容，且下次重新** deploy **內容就會全部消失。總之，中程還沒過先不要刪。** --- ### Step 3: 安裝完整 Hexo 功能 ` $ cd filename` ` $ npm install` --- ![](https://i.imgur.com/T6xfzt9.png="100x") --- ![](https://i.imgur.com/YpdteyP.png="100x") --- ![](https://i.imgur.com/6dODvQI.png) --- ### 架設部落格基本環境 --- - **即為設定部落格之基本參數** - **基本設定**： - 6-12 (**基本標題、副標、描述、搜尋關鍵字、語言、時間**) - 15 (**架設成功的網址鏈結**) - 100-104 (**部屬的網站種類、**Repository **連結網址**) --- ### About git --- - **新增一個名為** "**帳號名**.github.io"**的** Repository**，產生網址就會像：** https://**帳號名**.github.io **在第** 100-104 **部署這個** repository **的網址** --- ![](https://i.imgur.com/Bj1R4C6.png) --- ### Before --- ![](https://i.imgur.com/Q1WCTxk.png) --- ### After --- ![](https://i.imgur.com/KMXwTGb.png) --- ### 編輯文章後佈署 - **已經架設好平台，就可以在離線狀態下產生靜態服務器** (hexo s)**，在網址列輸入** localhost:4000 **確認編輯內容** - **編輯完成之後退出編輯狀態** (ctrl+c)**，清除多餘數據** (hexo clean/hexo cl)**，產生網頁** (hexo generate/hexo g)**，最後佈署上** git **並且在指定的網址顯示部落格內容** (hexo deploy/hexo d) --- END ===