使用hexo建立自己的網站-無經驗上手
前言
儘管目前有很多的Blog空間可以選擇,如WordPress,但是每個選擇都有自己的優勢在,而這邊我推薦使用Hexo架設自己的網站。
推薦的原因很簡單,因為好用又靈活,如果日後需要備份文章也能非常的迅速,而不用再透過平台商要求migration等。
相信你用久了,也會覺得非常好用的。
需要的元件
- Git
這邊推薦使用GitHub,可以用來備份程式碼和部署網頁。 - npm
需要用到node.js - markdown
寫文章需要用到的syntax,其他平台也是使用這個語法,如Trello。 - Hexo
主要需要用到的套件。
為什麼要使用Hexo
- 使用Markdown語法
- 更快速的撰寫文章。
- 很多的Themes
- 官方有提供很多協作者開發的Themes,挑選喜歡的主題,即可輕鬆入手。
- 官方提供很多Plugin
- 無論是要增加SEO或是網站特效等,都可以在官方中尋找適合自己的Plugins。
- 可搭配使用外部工具
- 可以在自己的網站上加入Google Analytics, Disqus……
- 資料夾分類整齊
- 文章僅需新增檔案在_posts資料夾,即可輕易撰寫文章。
- 靈活度較高
- 你可以把它當作是Blog紀錄日常生活分享給大家看,也可以當作記事本當作自己的線上閱讀頁面,甚至也可以修改成自己要的樣式或版型。
- 客製化網站
- 不太會程式的人也能輕鬆。
- 輕鬆移植網站
- 當你有移植網站的需求時,僅需備份你的文章和少部分的資料,就能輕鬆備份。
如何開始
如果看完上面的內容,覺得有興趣的話,那我們就來開始吧。
- 安裝IDE
- 推薦使用VS code
- 安裝node.js和npm
官方網站下載安裝檔,推薦安裝LTS版本
安裝完後,打以下的指令如果有出現版本,表示安裝成功。1
node –v
這邊也要檢查一下npm
1
npm –v
- 打開VScode的terminal
- 在上方找到,新增一個
- 安裝Hexo套件
- 這是必須要裝的,加上-g表示global
1
npm install -g hexo-cli
如果發生permission denied的話,請參考以下方法:
OSX
- 可在前面加上sudo
Windows
無法使用sudo,但是可以參考以下步驟:
- 以系統管理員的身份開啟應用程式,或是執行以下指令
1
runas /noprofile /user:Administrator
- 初始化Hexo
這邊輸入你的專案資料夾名稱
1
hexo init <專案名稱>
切換到你新增的資料夾
1
cd <專案名稱>
專案初始化
1
npm install
做到這邊的時候,其實你已經完成你的網站了唷!只是主題是官方default的。
專案指令
這邊有三個常用的指令一定要認識
build專案
每當你更動專案的任何東西,一定要build之後,才能看到你的最終版本。
g = generate1
hexo g
在local啟動
s = server1
hexo s
部署到remote
當你確定這是你的最終成果後,即可部署到網路上跟大家分享。
d = deploy1
hexo d
- 補充
如果不能使用的話,可以安裝1
npm install hexo-deployer-git --save
補充
其他安裝方式
- 官方提供安裝方式
1
curl http://npmjs.org/install.sh | sh
如果你是Linux系統
- 可以使用apt-get安裝
1
2
3
4sudo apt-get install python-software-properties
sudo add-apt-repository ppa:gias-kay-lee/npm
sudo apt-get update
sudo apt-get install npm
如果你是Mac系統
直接去官方下載或是用以下的方法
- 先安裝Homebrew
- 相信Mac開發者都會安裝這個
1
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
查看版本,有的話表示安裝成功
1
brew -v
安裝Node.js
1
brew install node
這篇文章只有介紹如何在本地建置Hexo,下一篇文章將會帶大家如何部署網站到遠端上。
All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.
Comment