通過Hexo在Github上搭建博客教程

jopen 10年前發布 | 36K 次閱讀 Hexo 建站系統CMS

Hexo簡介


hexo是一個基于Node.js的靜態博客程序,可以方便的生成靜態網頁托管在github和Heroku上。作者是來自臺灣的@tommy351

A fast, simple & powerful blog framework, powered by Node.js.

為什么我要使用Hexo:

  1. 之前使用過CSDN,博客園和jekyll博客,其中前兩個不能算是這個博客吧,主要是使用別的提供的平臺發博文,第三個jekyll,我記得是 Ruby語言寫的,是Github Page著力推薦的, 但其中有繁瑣的git操作, 而且有一些資源加載的問題(主要是我不太懂Ruby)
  2. 最近在學習JS后端Node.js, 現在火的不行, 異步IO的機制, 所以在學習過程中發現了Hexo
  3. Hexo更加簡單優雅, 而且風格多變, 適合程序員搭建個人博客,而且支持多平臺的搭建

使用的軟硬件

Mac Pro    #軟件的安裝基本都是基于brew
Node.js    #v0.10.33
npm        #2.1.6 包管理,類似于Python中的pip

下面正式講述如何部署:

1. Git安裝和Github設置


使用Mac電腦可以直brew安裝,

brew install git         #Mac電腦使用brew安裝
sudo apt-get install git #Ubuntu系統使用這條命令安裝

git操作和github上SSH設置請看這篇博文

使用Github Page搭建博客, 需要遵循一定的規則, 需要在github建立倉庫,倉庫名為Github用戶.github.io, 更多詳情請參考官方文檔

2. Node.js安裝


mac電腦可以直接通過brew安裝

#安裝命令
brew install node  #如果我沒記錯的話,最新版的node.js的包中已經集成了npm包管理工具

使用以下命令驗證是否安裝成功
node -v
npm -v

Node.js的詳細內容請參考Node.js學習筆記

3. Hexo安裝與設置


Node, npm和Git都安裝成功, 開始安裝hexo,

npm install hexo -g  #-g表示全局安裝, npm默認為當前項目安裝

Hexo使用命令:

hexo init <folder>  #執行init命令初始化hexo到你指定的目錄
hexo generate       #自動根據當前目錄下文件,生成靜態網頁
hexo server         #運行本地服務,

瀏覽器輸入http://localhost:4000就可以看到效果。

4. 添加博文


hexo new "postName"  #新建博文,其中postName是博文題目

博文會自動生成在博客目錄下source/_posts\postName.md

#文件自動生成格式:
title: "It Starts with iGaze: Visual Attention Driven Networkingwith Smart Glasses"  #博文題目
date: 2014-11-21 11:25:38      #生成時間
tags: Paper                    #標簽, 多個標簽使用格式[Paper1, Paper2, Paper3,...]
---

如果不想博文在首頁全部顯示, 并能出現閱讀全文按鈕效果, 需要在你想在首頁顯示的部分下添加<!--more-->

此處及以上的內容會在首頁顯示
<!--more-->
一下是在首頁隱藏的部分

5. 主題更改


Hexo提供了官網的主題, 初始化hexo時也會自動生成一個主題, Hexo還支持個性定制主題, 可以根據自己的喜好對主題進行修改, 更多主題可以在官網中找到

  • 個性化博客的設置
    博客的根目錄下對喜愛的主題進行主題進行克隆
git clone git@github.com:yunlzheng/hexo-themes.git themes/writing

#在./_config.yml,修改主題為writing
theme: writing

#查看本地效果
hexo g       #hexo generate簡寫
hexo s       #hexo server簡寫

6. 部署到Github


以上內容都是在本地進行查看, 現在將博客部署到github上
打開./_config.yml

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

# Site
title: Snow Memory    #博客名
subtitle: 雪憶, 如雪般單純, 冷靜思考.  #博客副標題
description:          #網站描述, 用于爬蟲抓取的關鍵詞
author: Andrew Liu    #作者名稱
email: Liu.bin.coder@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://andrewliu.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
#Archives 默認值為2,修改為1,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評論,  與多說類似, 國內一般使用多說
disqus_shortname: 

# Extensions
## Plugins: https://github.com/hexojs/hexo/wiki/Plugins
## Themes: https://github.com/hexojs/hexo/wiki/Themes
theme: yilia    #主題設置
exclude_generator:

# Deployment  站點部署到github要配置這里, 非常重要
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: github    #部署類型, 本文使用Github
  repository: git@github.com:Andrew-liu/Andrew-liu.github.io.git  #部署的倉庫的SSH
  branch: master   #部署分支,一般使用master主分支
plugins: 
- hexo-generator-feed   #此插件用于RSS訂閱, 以后有時間再介紹

在配置文件中設置號部署設置后,

hexo deploy  #進行部署

Initialized empty Git repository in /Users/andrew_liu/Andrew-liu.github.io/.deploy/.git/
[master (root-commit) bb3079b] First commit
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 placeholder
[info] Clearing .deploy folder...
[info] Copying files from public folder...
[master 6e24e8d] Site updated: 2014-11-21 11:16:23
 172 files changed, 34969 insertions(+)
 create mode 100644 2014/09/08/Hello-World/index.html
 ...
 create mode 100644 "tags/\345\277\203\350\267\257\346\234\255\350\256\260/index.html"
To git@github.com:Andrew-liu/Andrew-liu.github.io.git
 + 11237d0...6e24e8d master -> master (forced update)
Branch master set up to track remote branch master from git@github.com:Andrew-liu/Andrew-liu.github.io.git.
[info] Deploy done: github


#表示部署成功

可以使用Github用戶名.github.io進行訪問, 或者設置個性域名。

來自:http://www.jianshu.com/p/858ecf233db9#

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!