Mac端使用Hexo + GitHub搭建博客

之前有用Django搭建博客的一個(gè)教程系列，今天再發(fā)一個(gè) Hexo + GitHub 的簡(jiǎn)單版本。雖然網(wǎng)上已經(jīng)有了很多類似教程，但是能讓非技術(shù)人員跟著做下來的很少，所以還是整理下。

Hexo 的官網(wǎng)介紹：

Hexo 是一個(gè)快速、簡(jiǎn)潔且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在幾秒內(nèi)，即可利用靚麗的主題生成靜態(tài)網(wǎng)頁。

接下來開始開始一步步說明。

GitHub 賬號(hào)注冊(cè)及倉庫創(chuàng)建

• 如果還沒有 GitHub 賬號(hào)，那么需要先創(chuàng)建 GitHub 賬號(hào)（因?yàn)榫W(wǎng)頁和博客數(shù)據(jù)是托管在 GitHub 上）。進(jìn)入 GitHub官網(wǎng)，注冊(cè)賬號(hào)成功后，創(chuàng)建一個(gè)新的倉庫。創(chuàng)建倉庫的名字必須為 username.github.io，這里的 username 就是注冊(cè) GitHub 時(shí)的用戶名，需要一致。如果不一致，后續(xù)會(huì)顯示 404。

  

• 創(chuàng)建頁面不需要選擇太多內(nèi)容。倉庫選擇公開就行。

安裝node.js

• 首先檢查是否安裝了node.js

  node?-v?#?是否出現(xiàn)安裝版本信息，出現(xiàn)說明已經(jīng)安裝了
  

• 如果未安裝，去Node.js官網(wǎng)下載相應(yīng)的安裝包，安裝就行。

  #安裝完成之后打開終端，分別輸入一下命令，如果出現(xiàn)版本信息，就說明安裝成功。
  node-v???
  npm?-v
  

安裝 Git

安裝 Git 主要是因?yàn)樾枰峤淮a到 GitHub。Mac 下安裝Xcode就自帶Git。

• 首先檢查是否安裝了 Git

  git?--version?#?是否出現(xiàn)安裝版本信息，出現(xiàn)說明已經(jīng)安裝了
  

• 未安裝通過 Homebrew（安裝Homebrew這里就不寫了，有官網(wǎng)說明可以查看） 安裝 Git，終端命令輸入：

  brew?install?git
  

配置SSH Key

配置 SSH Key 主要是為了方便本地博客文件上傳到 GitHub。配置教程說明。

安裝Hexo

• 安裝 Hexo。接下來只需要使用 npm 即可完成 Hexo 的安裝。如果可以的話，建議先去 Hexo 官網(wǎng)了解下相關(guān)命令。

  npm?install?-g?hexo-cli
  

• 如果有報(bào)錯(cuò)信息，比如

Error:?EACCES:?permission?denied,?access?'/usr/local/lib/node_modules

原因: 執(zhí)行命令行時(shí)沒有獲得管理員權(quán)限 解決方案：在命令行前面添加 sudo 獲取管理員權(quán)限，輸入管理員密碼就行 例如原來的是: npm install -g hexo-cli應(yīng)該改為：sudo npm install -g hexo-cli

再輸入密碼就行。如果沒有提示權(quán)限報(bào)錯(cuò)信息，則繼續(xù)。

• 創(chuàng)建博客目錄。在任意位置創(chuàng)建一個(gè)文件夾，如 MyBlog，cd 到該路徑下。

  #?在你選擇的目錄下創(chuàng)建一個(gè)MyBlog文件夾
  mkdir?MyBlog
  #?進(jìn)入目錄
  cd?MyBlog
  

• 初始化目錄，在 MyBlog 目錄下

  hexo?init
  

• 啟動(dòng)本地服務(wù)

  hexo?s?
  

  INFO??Start?processing
  INFO??Hexo?is?running?at?http://localhost:4000?.?Press?Ctrl+C?to?stop.
  

  如果出現(xiàn)以上信息說明成功，瀏覽器輸入http://localhost:4000/ 就可以訪問了。

  

博客關(guān)聯(lián)到 GitHub 倉庫

博客文件夾MyBlog中的_config.yml文件，這是博客的主要配置文件。

• 編輯博客配置文件_config.yml中的deploy節(jié)點(diǎn)。記得將username換成自己的username

  deploy:
  ??type:?git
  ??repo:[email protected]:username/username.github.io.git
  ??branch:?master
  

  注意：repo為這種形式的是配置了SSH Key之后的，如果沒有配置則使用Https形式的地址。下圖是地址位置。

  

• 為了能夠使Hexo部署到GitHub上，需要安裝一個(gè)插件，在博客目錄下運(yùn)行以下命令

  npm?install?hexo-deployer-git?--save
  

• 然后在博客目錄中執(zhí)行

  #清除緩存
  hexo?clean
  #?產(chǎn)生靜態(tài)網(wǎng)頁
  hexo?g
  #?部署到GitHub?page上
  hexo?d
  

  在瀏覽器輸入username.github.io就可以訪問你的博客了

博客操作方式

創(chuàng)建新文章，博客目錄下執(zhí)行以下命令

hexo?new?'文章標(biāo)題'

或者不想用命令行的話，直接去 source > _posts 文件夾下，新建博客md文檔就行。博客其他的分類創(chuàng)建、標(biāo)簽創(chuàng)建這些博客操作，都可以看 Hexo官網(wǎng)。有詳細(xì)說明。

• 編輯完成之后本地地址預(yù)覽，在博客目錄下運(yùn)行以下命令

  hexo?clean?&&?hexo?g?&&?hexo?s
  

• 預(yù)覽沒問題后，完成之后上傳Github，在博客目錄下運(yùn)行以下命令

hexo?clean?&&?hexo?g?&&?hexo?d

博客的主題選擇

博客的主題選擇，可以直接去 Hexo官網(wǎng)查看，對(duì)于沒有技術(shù)前端基礎(chǔ)的同學(xué)，建議選擇使用人數(shù)較多，文檔詳細(xì)的主題。因?yàn)橐恍┹^偏的主題文檔不全，報(bào)錯(cuò)了會(huì)很麻煩。有些即使按照教程一步步操作，也有肯能因?yàn)?Hexo 的版本等各種原因而出現(xiàn)各類報(bào)錯(cuò)。我觀察了下，Next主題維護(hù)和使用的人比較多，可以選擇使用看看。

綁定個(gè)人域名

如果還想擁有個(gè)人博客域名，可以繼續(xù)往下設(shè)置。在國內(nèi)可以直接去萬網(wǎng)買。進(jìn)入萬網(wǎng)/控制臺(tái)/云解析DNS/域名解析/解析設(shè)置

• 獲取 GitHub 的二級(jí)域名 IP 地址

  ping?username.github.io
  #例如：ping zhangsan.github.io
  

• 在萬網(wǎng)解析域名如下設(shè)置

• 在 hexo 項(xiàng)目下，source 文件夾下面創(chuàng)建 CNAME 文件（沒有后綴名的），在里面寫上購買的域名。比如：

  

• 在GitHub上面，打開username.github.io項(xiàng)目的（Settings）設(shè)置，然后在 GitHub Pages的 Custom domain設(shè)置里填上購買的域名。比如：

  

域名綁定成功，已經(jīng)可以用獨(dú)立域名訪問博客了。

相關(guān)鏈接：

• Hexo 官網(wǎng)：https://hexo.io/zh-cn/docs/

• Node.js官網(wǎng)：https://nodejs.org/en/

• Next主題：https://github.com/theme-next/hexo-theme-next