用Hexo構建個性化博客

2019独角兽企业重金招聘Python工程师标准>>>

Hexo是一款快速、功能強大的博客構建框架。通過Hexo提供的命令輕鬆生成美觀、簡潔的個人站點。 Hexo是由nodejs開發的靜態資源生成器，本站就是通過修改Hexo主題風格生成靜態網頁。然後託管在github服務器上,由github創建域名和提供訪問服務。

<!--more-->

亂扯淡

一直想有自己的個人站點，因為總覺得國內各種博客實在丑而雷同。先後在redhat cloud用過WordPress，只為妹的不穩定，遂放棄。后看HTML5狂拽炫酷，準備自己開發。只為自己這個爛本本卡不死人，遂放棄。偶然見到Hexo，折騰2晚，愛她無法自拔！

快速開始

依賴環境

首先安裝git客戶端和nodejs,不知道咋麼安裝。請找度娘！

###打開git bash,輸入下列命令,安裝Hexo

$ npm install hexo -g  #安裝Hexo,将包安装到全局环境中
$ npm init    myblog
$ cd myblog  
$ npm install          #在myblog創建好所有工程目錄和文件

文件目錄如下：

├── _config.yml    #網站全局配置文件、可以配置網站名、分頁、部署等信息
├── package.json
├── scaffolds
├── scripts    
├── source        
|   ├── _drafts
|   └── _posts
└── themes

source:文章源文件所在目錄，_drafts是草稿。一般用Hexo new "title" 命令創建一篇新文章 themes；該目錄下存放主題文件，在主題文件中你可以設置當前主題的風格。

生成靜態頁面

$ hexo generate  #可以簡寫為hexo g

這時會在博客目錄下生成public目錄，裡面存放的就是Hexo框架生成的靜態web資源。 資源的目錄結構如下：

├─archives
│  └─2015
│      └─01
├─categories
│  ├─测试
│  └─hexo
├─2015
│  └─01
│      └─03
│          └─hello-world
├─tags
│  ├─hexo
│  └─hexo-command
├─fancybox
│  └─helpers
├─js
├─css
│  └─font
├─about
├─font
└─img

More info: Generating

啟動server

$ hexo server  #簡寫為hexo s

啟動nodejs http服務器,默認地址為http://localhost:4000 這時即可瀏覽Hexo生成的默認博客。

個性化設置

###配置網站信息

打開_config.yml文件，對照本站配置很容易理解各個配置項意思。ps:不懂的估計不是學計算機的。

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

# Site
title: I have a dream
subtitle: "|做一個安靜的美男子"
description: dream
author: ztjlovejava
email:
language: zh-TW

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://ztjlovejava.github.io/
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: 5
pagination_dir: page

# Disqus
disqus_shortname:

# Extensions
## Plugins: https://github.com/hexojs/hexo/wiki/Plugins
## Themes: https://github.com/hexojs/hexo/wiki/Themes
theme: pacman
exclude_generator:
- hexo-generator-feed
- hexo-generator-sitemap
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: github
  repository: https://github.com/ztjlovejava/ztjlovejava.github.io.git   #git託管地址
  branch: master

主題風格設置

在themes目錄下就是主題風格目錄，如本站的主題為pacman。

├─languages   #國際化 本站用的就是繁體字，有裝逼之嫌
├─layout      
│  ├─_partial
│  │  └─post
│  └─_widget  #掛件，就各種小插件:云標籤、分類、最新文章等
├─scripts
└_config.yml
─source
    ├─css
    │  ├─_base
    │  └─_partial
    ├─fancybox
    │  └─helpers
    ├─font
    ├─img
    └─js

主題個性設置，打開_config.yml文件

##### Menu
menu:
  主頁: /
  歸檔: /archives
  About: /about
  RSS: /atom.xml
## you can create `tags` and `categories` folders in `../source`.
## And create a `index.md` file in each of them.
## set `front-matter`as
## layout: tags (or categories)
## title: tags (or categories)
## ---

#### 掛件設置，就是指向目錄_widget下
widgets: 
- category
- tag
- rss
- recent_posts
## provide six widgets:category,tag,rss,archive,tagcloud,links.
## modify links in `/layout/_widget/links.ejs`.

#### RSS
rss: /atom.xml 
excerpt_link: 閱讀全文

#### Image
imglogo:
  enable: true             ## display image logo true/false.
  src:  img/logo.svg        ## `.svg` and `.png` are recommended,please put image into the theme folder `/pacman/source/img`.
favicon: img/favicon.ico   ## size:32px*32px,`.ico` is recommended,please put image into the theme folder `/pacman/source/img`.     
apple_icon: img/pacman.jpg ## size:114px*114px,please put image into the theme folder `/pacman/source/img`.

#### Author Avatar Picture
author_img_enable: true ## display author avatar picture
dataURI: false
## if the picture's format is dataURI please set the value to true,otherwise set the value to false.
## convert an image into base 64 data URIs http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/ .
author_img_data: ''
## paste the dataURI in ONE LINE and included it by ''.
author_img: img/author.jpg ## size:220px*220px.
## if the picture's format is `.png` or `.jpg`  instead of dataURI,you should set the `dataURI` value to false.

#### Font
ShowCustomFont: true  
## you can change custom font in `variable.styl` and `font.styl` which in the theme folder `/pacman/source/css`.

#### Toc
toc:
  article: true   ## show contents in article.
  aside: true     ## show contents in aside.
## you can set both of the value to true of neither of them.
## if you don't want display contents in a specified post,you can modify `front-matter` and add `toc: false`.

#### Fancybox
fancybox: true 
## if you use gallery post or want use fancybox please set the value to true.
## if you want use fancybox in ANY post please copy the file `fancybox.js`.
## in theme folder `/pacman/scripts` to your hexo blog folder `../scritps`.

#### Author information
author:
  google_plus:    ## eg:116338260303228776998 for https://plus.google.com/u/0/116338260303228776998
  intro_line1: "" ## eg: "Hello ,I'm Larry Page in Google."
  intro_line2: "" ## eg: "This is my blog,believe it or not."
  weibo:      ## e.g. 436062867 for http://weibo.com/436062867
  twitter:    ## e.g. yangjiansky for https://twitter.com/yangjiansky
  github:     ## e.g. A-limon for https://github.com/A-limon
  facebook:   ## e.g. yangjian for https://favebook.com/yangjian
  tsina:      ## e.g. 1664838973  Your weibo ID,It will be used in share button.
  linkedin:   ## e.g. in/jeffweiner08 for https://www.linkedin.com/in/jeffweiner08

#### Comment
duoshuo: 
  enable: true  ## duoshuo.com
  short_name: ztjlovejava  ## duoshuo short name.

#### Share button
jiathis:
  enable: false ## if you use jiathis as your share tool,the built-in share tool won't be display.
  id:    ## e.g. 1501277 your jiathis ID. 
  tsina: ## e.g. 1664838973 Your weibo id,It will be used in share button.

#### Analytics
google_analytics:
  enable: false
  id:   ## e.g. UA-1766729-8 your google analytics ID.
  site: ## e.g. yangjian.me your google analytics site or set the value as auto.
## You MUST upgrade to Universal Analytics first!
## https://developers.google.com/analytics/devguides/collection/upgrade/?hl=zh_CN

#### Custom Search
google_cse: 
  enable: false
  cx:  ## e.g. 000561263943549425496:mrzrm0gr4kg your Custom Search ID
## https://www.google.com/cse/ 
## To enable the custom search You must create a "search" folder in '/source' and a "index.md" file
## set the 'front-matter' as
## layout: search 
## title: search
## ---

##常見問題

1.在Themes目錄下可以放置多個主題文件(可以在github上獲取)，如果反復在多個主題切換生成靜態資源。容易出現網頁出現佈局錯誤，可以是因為緩存原因。解決方法是放置一個主題文件調試。

2.網站優化。有些主題生成的網頁訪問速度很慢。原因是所用靜態資源站是Google或者其他國外網站，你可以打開chrome的調試功能(F12)，去看那些資源加載比較慢，然後在主題文件中grep找到這些網址并替換掉為國內的靜態資源站。

转载于:https://my.oschina.net/hanhanztj/blog/473750