Hexo your blog

Preface

本來打算個人blog用英文寫,BUT短時間內是不可能了,哈哈沒辦法,英語捉急,裝逼未遂。之前是用jekyll搭建的,用的主題是歪果仁寫的,有一些Google的東西還有字庫神馬的,雖然看起來高大上但是由于天朝一些不可抗力因素等等,總之頁面加載很慢,有限的生命都浪費在看進度條上了。后來看到童鞋在用hexo,艾瑪~人家這頁面加載颼颼的,themes也正是我喜歡的Lofter風格,果斷遷移啊!索性把之前博客園的幾篇搬到這里了,以后專一寫這個blog,不去其它地兒亂涂亂畫了。

Hexo

關于hexo的介紹啥的,雖然你沒問,但是我也就不說了。這里主要記錄一下我搭建的過程以及遇到的一些細節問題。

Step1. 安裝Git、Node.js以及npm工具

詳情參考hexo文檔

brew install git
bew install node
#查看是否安裝成功
node -v
npm -v

Tip1:
Node 一般會安裝在/usr/local/bin/node
npm 一般會安裝在/usr/local/bin/npm
有時候會出現這種情況

zsh: command not found: balabalabala

這時候你需要把上述相應的地址添加到$PATH中,執行如下語句

export PATH=/usr/local/npm/bin:$PATH

Tip2:
也許你按照hexo文檔安裝的時候會出現類似如下情況

zsh: command not found: nvm

那么你可能是漏掉了這個步驟,可以理解為安裝后還需要激活一下

source ~/.nvm/nvm.sh

Step2. 安裝Hexo并創建文件

npm install hexo -g
hexo init <folder> #folder為你創建博客的文件夾名稱
cd <folder>

這時候一個blog就已經搭建好了,folder的目錄結構如下:

.
├── _config.yml  # 配置文件
├── package.json
├── scaffolds
├── scripts
├── source
|   ├── _drafts
|   └── _posts  # 寫的文章都放到這個文件夾下
└── themes  # 各種主題

默認的theme是landscape,可以在themes文件下看到,以后想換主題只需要將相應的主題包下載到themes文件夾下即可。在_posts文件夾中自帶一篇hello world.md

Step3. Hexo常用命令

hexo new "postName" #新建文章
hexo new page "pageName" #新建頁面到上述目錄結構的_posts中
hexo generate #生成靜態頁面至public目錄
hexo server #開啟預覽訪問端口(默認端口4000,'ctrl + c'關閉server)
hexo deploy #將.deploy目錄部署到GitHub
#簡寫
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

現在可以先運行一下看看

hexo server

然后,在瀏覽器中輸入localhost:4000可以查看本地生成的效果。

Step4. 配置_config.yml文件

說明一下,這里有很多細節問題需要注意,我先把自己的配置放上來,然后慢慢說,先喝口水。

# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Beatrice7's Fancy
subtitle: To know enough to be dangerous
description: beatrice7's blog | font-end | 
author: Beatrice
email: aizun777@gmail.com
language: zh-CN

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://beatrice7.tk
root: /
permalink: :year/:month/:day/:title/
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
permalink_defaults:

# Directory
source_dir: source
public_dir: public

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
highlight:
  enable: true
  line_number: true
  tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Archives
## 2: Enable pagination
## 1: Disable pagination
## 0: Fully Disable
archive: 1
category: 1
tag: 1

# Server
## Hexo uses Connect as a server
## You can customize the logger format as defined in
## http://www.senchalabs.org/connect/logger.html
port: 4000
server_ip: localhost
logger: false
logger_format: dev

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: MMM D YYYY
time_format: H:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Disqus
disqus_shortname:

# Extensions
## Plugins: https://github.com/hexojs/hexo/wiki/Plugins
## Themes: https://github.com/hexojs/hexo/wiki/Themes
theme: landscape-plus
exclude_generator:
plugins: 
- hexo-generator-feed

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: github
  repository: git@github.com:Beatrice7/Beatrice7.github.io.git
  branch: master

網上的很多教程都已經說的很詳細了,我這里說幾點細節,也是我當時走的彎路

  • Archives模塊
    默認里面寫的是2,全都改成1,因為這里的注釋是有些問題的,否則就不能在archive目錄下按照年份月份歸檔文章了。
  • Deployment模塊
    這部分只要按照我的設置就好,但是注意 repository: git@github.com:后面添加的第一項是你github的名稱;第二項是你的博客所在的庫的名稱,不要看到網上很多.com.git就照搬照抄哦。

Step5. 上傳至github

hexo g
hexo d

Step6. 安裝插件和主題

Hexo提供豐富的插件以及主題
安裝方法如下:

npm install <plugin-name> --save
git clone <repository> themes/<theme-name>

附上幾篇更加詳細的教程鏈接:
hexo你的博客
使用hexo搭建博客
通過Hexo在Github上搭建博客教程
Hexo常見問題解決方案

從jekyll遷移到hexo

Tip1:
很簡單,只需要把原來的.md各種文件copy到_posts文件夾下即可,但這里有幾點細節,需要在_config.yml中添加

new_post_name: :year-:month-:day-:title.md

我之前犯二,竟然把permalink: :year/:month/:day/:title/給改了,然后導致文章沒有按照年月歸檔,全部生成在根目錄了。前車之鑒,閱讀文檔時請務必保持頭腦清醒!

Tip2:
關于代碼塊,你需要做一些替換。把之前的關鍵字highlight替換為codeblock; endhighlight替換為endcodeblock。

寫在最后

呦西,第一篇教程性質的文章終于寫粗來了。莫名的,竟生出一種無所不能的使命感,仿佛連期末考試都無需擔心了。
2015年到來之前,再寫一篇淡淡的總結就收工!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容