使用hexo+next 搭建部落格

村裡有個小芳是姑娘發表於2016-11-08
Hexo

一下為使用hexo框架搭建github部落格的簡要步驟
<!– more –>

1.安裝

前提是必須先安裝 Node.js，

再安裝hexo：
npm install hexo -g

2.在本地網頁資料夾下，進入命令列.

hexo init <folder>

3.建立自己的文章

hexo new "文章名"或者hexo n "文章名"

4.生成網站

輸入hexo generate或者 hexo g

5.開啟本地伺服器。預設監聽4000埠

hexo server
瀏覽器輸入：
http://localhost:4000
即可預覽本地的網頁。

// 改變需要監聽埠
hexo s -p 3000

6.編輯配置檔案_config.yml (在網站專案的根目錄下)

如果沒有以下的內容，就新增。注意冒號後面有空格。

deploy:
  type: github
  repo: http://github.com/使用者名稱/使用者名稱.github.io.git
  branch: master
title: 村裡有個小芳是姑娘
subtitle:
description:
author: fernandozhaxi
language: zh-Hans
timezone:

7.部署：

輸入： hexo deploy或者 hexo d

就可以完成我們的部落格搭建了。

以後要更新部落格，只需要以下步驟：
hexo new "Hello World"
hexo g
hexo d

過程中可能會遇到一些問題：
比如：

  • 1.Not found git

解決辦法: npm install hexo-deployer-git –save 即可

  • 2.Please tell me who you are
    輸入git郵箱和使用者名稱即可。

如：git config –global user.email “你的git郵箱”
git config –global user.name “你的git使用者名稱”

  • 3.the file will have be replaced by CRLF in ….
    解決辦法:git config –global core.autocrlf false
  • 4.Unable to access “https:github…….”
    解決辦法: 把https，改成http
  • 5.部署時提示 “Not a git repository”的異常資訊
    解決辦法: 刪掉.deploy目錄.

8.下載next主題(也可以用git clone命令，但是我這裡太慢，就直接下載zip包)：

https://github.com/iissnan/hexo-theme-next

  • 1.在本地網站專案的theme資料夾下建立一個next的資料夾，將下載的zip包解壓，把裡面的檔案複製到next資料夾中。
如圖：![圖片描述][1]

9.切換主題

開啟專案的根目錄中的_config.yml檔案，找到theme欄位，改為：theme：next
輸入hexo clean來清除hexo快取，再輸入：hexo server開啟本地伺服器，我們可以通過瀏覽器輸入：http://localhost:4000/測試訪問是否切換成功。

10.設定主題資訊

  • a.切換佈局：
    開啟主題目錄中的_config.yml檔案，找到如下欄位三種佈局任意選一個設定即可。
            #scheme: Muse
            #scheme: Mist
            scheme: Pisces
  • b.設定選單：
    開啟主題目錄中的_config.yml檔案，找到menu欄位，設定如下：
menu:
  home: /
  archives: /archives
  #about: /about
  #categories: /categories
  tags: /tags
  #commonweal: /404.html

  • c.選單項顯示文字：設定選單項的顯示文字。在第一步中設定的選單的名稱並不直接用於介面上的展示。Hexo 在生成的時候將使用 這個名稱查詢對應的語言翻譯，並提取顯示文字。這些翻譯文字放置在 NexT 主題目錄下的 languages/{language}.yml （{language} 為你所使用的語言）。以簡體中文為例，若你需要新增一個選單項，比如 something。那麼就需要修改簡體中文對應的翻譯檔案 languages/zh-Hans.yml，在 menu 欄位下新增一項：

    menu:
  home: 首頁
  archives: 歸檔
  categories: 分類
  tags: 標籤
  about: 關於
  search: 搜尋
  commonweal: 公益404
  something: 有料

  • d.設定側欄,設定側欄的位置，修改 sidebar.position 的值，支援的選項有：

       `` left - 靠左放置``
   `` right - 靠右放置``
  • e.設定頭像，新增欄位 avatar， 值設定成頭像的連結地址。其中，頭像的連結地址可以是：網際網路 URI： http://example.com/avtar.png
    本地檔案：放置在 source/images/ 目錄下配置為： avatar: /images/avatar.png
  • f.設定多說評論，

相關文章