通過Hexo在Github上搭建博客教程
Hexo簡介
hexo是一個基于Node.js的靜態博客程序,可以方便的生成靜態網頁托管在github和Heroku上。作者是來自臺灣的@tommy351
。
A fast, simple & powerful blog framework, powered by Node.js.
為什么我要使用Hexo:
- 之前使用過CSDN,博客園和jekyll博客,其中前兩個不能算是這個博客吧,主要是使用別的提供的平臺發博文,第三個jekyll,我記得是 Ruby語言寫的,是Github Page著力推薦的, 但其中有繁瑣的git操作, 而且有一些資源加載的問題(主要是我不太懂Ruby)
- 最近在學習JS后端Node.js, 現在火的不行, 異步IO的機制, 所以在學習過程中發現了
Hexo
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系統使用這條命令安裝
使用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 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!