hexo搭建github部落格

深藍一人發表於2017-11-12
HexoGithub

使用hexo搭建github部落格

搭建環境:Mac

使用hexo的優點：可以使用Markdown編輯頁面，各種各樣的Markdown編輯器使用起來非常方便

步驟一、建立github倉庫

在github建立與使用者名稱對應的倉庫，如使用者名稱為Lie8466，則需要建立的倉庫為 Lie8466.github.io。

參考文件：pages.github.com/ 中的步驟1
注：如果已經建立過，請忽略此步。hexo部署完畢後會更改預設的index頁面

步驟二、安裝hexo

$ npm install -g hexo複製程式碼

手動建立hexo資料夾,假如建立的目錄為/Users/yaweili/Documents/hexo

$ cd /Users/yaweili/Documents/hexo
$ hexo init
$ npm install
$ hexo server複製程式碼

Hexo Server已經啟動了，在瀏覽器中開啟 http://localhost:4000 ，
你可以按Ctrl+C 停止Server。

開啟新的命令列視窗(command+T)，建立新文章，"My New Post"

$ hexo new "My New Post"複製程式碼

執行下面的命令，將markdown檔案生成靜態網頁。

$ hexo generate複製程式碼
編輯文章

在/Users/yaweili/Documents/hexo/source/_posts下可以看到My-New-Post.md檔案，利用markdown編輯器編輯該檔案

部署github

在/Users/yaweili/Documents/hexo下找到檔案_config.yml，用編輯器開啟，找到

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:複製程式碼

修改為：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: https://github.com/Lie8466/Lie8466.github.io.git
  branch: master複製程式碼

安裝hexo-deployer-git， 以及部署

$ npm install hexo-deployer-git --save
$ hexo deploy複製程式碼

參考文件 hexo.io/zh-cn/docs/…
部署參考 hexo.io/zh-cn/docs/…

部署成功

在瀏覽器中開啟 Lie8466.github.io ，正常顯示網頁，表明部署成功。

除錯

修改/Users/yaweili/Documents/hexo/source/_posts下的.md檔案，重新整理localhost:4000可以看到實時的更新

部署：

$ hexo clean
$ hexo generation // 或者hexo g
$ hexo deploy // 或者hexo d複製程式碼

其它

/Users/yaweili/Documents/hexo/_config.yml有很多可以自己配置的小功能點，理解每一個配置項的含義可以個性化定製自己的頁面

配置標題
# Site
title: Yawei Li // 配置網站首頁的大標題，預設為hexo
subtitle: knowing something of everything and everything of something // 配置網站首頁的副標題，預設無
description:
author: Yawei Li
language: zh
timezone:複製程式碼
配置頁面路徑
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:title/  // 配置頁面的路徑，預設為年/月/日/標題，會顯示太長，可以自行刪掉一些資訊
permalink_defaults:複製程式碼
配置分類及標籤
# Category & Tag
default_category: conclusion
category_map: ['學習筆記', '總結', '分享', '其它']
tag_map: ['JS', 'Vue', '前端效能', '其它']複製程式碼

上述配置的分類和標籤可以在新建的.md檔案中使用，如下：

---
title: hexo搭建github部落格

date: 2017-10-30 11:06:24

category: 總結

tags: 其它

---複製程式碼

配置完成的分類和標籤會在部落格首頁有相應的篩選項，可以快速查詢某一個型別或者某個標籤下的文章。

更多功能等待發現。。。


參考文件：www.cnblogs.com/zhcncn/p/40…

相關文章