圖片並茂教你搭建hexo部落格,部署github,更換主題

必備環境

• Git(安裝了Xcode就會自帶, 所以不再贅述)

• Node.js 可以用很多種方式安裝Node.js, 但是為了必免因缺少各種環境而安裝失敗, 這裡推薦直接下載安裝包安裝. nodejs.org/zh-cn/downl…

• Hexo

開啟終端, 輸入npm install -g hexo-cli進行安裝.

搭建本地Hexo

Hexo只是幫你生成靜態網頁部落格的工具, 你可以在本地進行除錯. 如果你想讓別人也能看到. 你必須上傳到github或者自己的vps伺服器. 別急, 接下來我都會為你講解如何操作.

1.為了測試方便, 我把我的本地環境搭建在桌面的某個資料夾. 你也可以存放到你想存放的資料夾去.

注: 如果你想存放到別的地方, 那麼你需要開啟想存放的地方, 並且cd進去, 拖拽目標資料夾到終端, 既可獲取目標路徑, 拷貝路徑, 然後cd進去既可.

2.開啟終端, 輸入cd Desktop到桌面.

3.我準備把環境搭建在桌面的peng資料夾中, 所以我繼續在終端輸入mkdir peng建立名叫peng的資料夾.

4.cd peng進入叫peng的資料夾中.

5.輸入hexo init進行初始化.

6.輸入npm install進行安裝, 過一會兒會卡在> node scripts/install.js這裡, 你繼續等待既可, 當出現如下圖片, 安裝成功.

7.輸入npm install hexo-deployer-git --save安裝簡化命令的外掛.

8.輸入hexo s, 並且拷貝地址http://0.0.0.0:4000/到瀏覽器, 進行本地預覽.

9.對, 就是這麼簡單, 本地環境搭建成功. 按control + c退出預覽.不要關掉終端, 待會所有的操作, 都要在這個叫peng的資料夾中操作

10.接下來我們需要讓本地環境生成靜態網頁, 並且上傳到github中.

部署部落格到github pages

1.開啟github.com並且登入你的賬號, 賬號必須已經通過了郵箱認證點選 Verify email address 連結驗證郵箱, 否則可能導致部署失敗出現404. 在你註冊賬號的時候, github就會傳送郵件到你的郵箱.

2.登入賬號後, 點選右上角的github頭像, 點選Your profile.

3.然後將瀏覽器位址列,紅框框起來的github使用者名稱記錄下來.

4.點選右上角的+號按鈕, 建立新的倉庫.

5.倉庫名必須是你的使用者名稱.github.io組成, 其他的都可以不用管, 填完倉庫名後, 直接Create repository既可.

6.點選按鈕複製並且記錄倉庫地址, 待會要用到.

7.在終端輸入open _config.yml, 開啟hexo配置檔案, 滑動到最下面, 找到deploy, repository和branch這兩個預設沒有, 你按我的格式貼上既可.

type後面寫git, repository後面是你剛剛複製並記錄的倉庫地址, branch直接寫master既可, 然後儲存並關閉

deploy:
    type: git 
    repository: https://github.com/pengpengtest/pengpengtest.github.io.git
    branch: master
複製程式碼

8.輸入hexo g -d, 重新生成並部署網頁到github倉庫.期間會讓你輸入賬號和密碼.賬號和密碼每輸入完一項回車既可.密碼是不會顯式出現的.

9.出現下圖,表示部署部落格到github倉庫成功.開啟github倉庫, 裡面已經有了檔案了.

10.接下來在瀏覽器輸入你的使用者名稱.github.io開啟.部落格已成功部署到github倉庫!別人也可以通過這個地址你的使用者名稱.github.io來訪問你的部落格了!

釋出新文章

1.在終端輸入hexo n "文章名", 建立文章.並且用open xxxxx開啟它. 寫入文章內容.

2.分別輸入hexo g(生成)和hexo d(部署)後, 或者直接hexo g -d後, 再開啟你的使用者名稱.github.io. 新的文章也釋出成功了.(有時候可能需要清除一下瀏覽器快取才行)

• 分別輸入hexo g和hexo d等效於hexo g -d.

更換hexo主題

1.在搜尋引擎搜尋 hexo theme 既可.

2.在這裡, 我們用iissnan/hexo-theme-next主題來演示.首先進入你想用的主題github倉庫, 拷貝倉庫地址.

3.在終端輸入git clone 主題倉庫地址 theme/主題名字.接下來一頓下載.

git clone https://github.com/iissnan/hexo-theme-next.git themes/iissnan

4.下載完成後, 輸入open _config.yml找到theme,修改hexo配置, 告訴hexo你想用的主題名字.

5.接下來hexo clean清理快取, hexo g -d重新生成部落格並且部署. 開啟你的使用者名稱.github.io, 更換主題成功!(有時候可能需要清除一下瀏覽器快取才行, 瀏覽器快取就是這麼麻煩, 你懂的)

6.以後想更換主題, 按這個步驟來就行了.清理快取並不會刪除你的文章, 可以放心操作.

用github當圖床

如果需要用github當圖床, 可以把圖片放到本地hexo目錄/source/資料夾裡面, 我是新建了一個images來存放的. 需要先部署和生成, 把圖片放到github上, 才能通過連結找到.

如果是直接放在source目錄下, 那麼你的圖片連結地址就是http://域名/圖片名.圖片字尾.

比如:http://cxp.im/favicon.ico這個小圖示, 我是做了https轉發, 所以實際瀏覽器上顯示的連結不一樣(你可以直接拷貝我給的連結檢視)

如果是放在二級目錄下, 就需要加上目錄名稱, 比如我放在images下的這個頭像, 那麼就是http://cxp.im/images/icon.jpg

科普時間

• 重點: 所有hexo xxx的操作, 必須用終端cd 你本地環境目錄下, 然後才能用hexo xxx操作.

• 有時候明明已經新建, 修改了文章, 或者改變了部落格或主題的各種配置, 並且生成部署了, 還是不能顯示, 可能是github還沒快取好, 稍微等半分鐘的樣子, 再看看. 不行就清理瀏覽器快取. 還是不行, 就hexo clean清理本地快取. 再重新生成和部署.

hexo本地環境介紹

_config.yml 用來存放hexo部落格的個人描述, 部落格小圖示地址, 頭像地址等等.
source下的_posts 存放你所有的博文.md檔案 你可以通過 hexo n "xxx" 建立部落格文章, 也可以直接把xxx.md 格式的檔案直接拖入進去
themes 存放你的所有主題檔案
複製程式碼

各種hexo xxx操作

hexo clean 清理快取, 一般是在配置不能生效, 或者文章釋出了不顯示, 等等異常情況下使用的. 當然有時候清除瀏覽器快取也是必須的操作.
hexo g 重新生成靜態網頁, 所有釋出文章, 修改文章, 修改hexo配置, 修改主題配置等等操作, 都需要.
hexo d 讓你的靜態網頁從本地部署到github
hexo s 你可以邊寫文章, 邊使用這個命令在本地預覽, 包括修改各種配置, 都可以預覽. 
複製程式碼

必備語法和工具

• 使用hexo部落格, 你需要會markdown語法, 才能編寫更漂亮排版的文章.自行搜尋markdown 語法關鍵字查詢.

• 並且你需要一個能識別並編寫markdown語法的編輯器. 自行搜尋markdown 編輯器關鍵字查詢. 各種免費的, 收費的.