從現在開始開始 Hexo !

1. 用了 GitHub, 學到 Nodejs, 路過 Hexo, 到了這裡

用了 GitHub, 學到 Nodejs, 路過 Hexo, 到了這裡

安裝各種有趣 ?

Hexo 第一步

請先把 Nodejs 和 npm 架設好

下載 Hexo
1
$ npm install hexo -g
安裝到你的目標目錄下
1
$ hexo init blog && cd blog
以下操作會將文章從 markdown 檔案產生關聯
1
$ hexo generate
開啟 Server, 使用於本地調效, 之後可連到 http://localhost:4000/ 查看
1
$ hexo server

Hexo 日常問題

撰寫文章

$ hexo new [layout]
$ hexo new "New Post"
# => The file will be created at source/_posts/new-post.md
$ hexo new page "New Page"
# => The file will be created at source/new-page/index.html
$ hexo new draft "New Draft"
# => The file will be created at source/_drafts/new-draft.md

文章標籤使用

title: Start Hexo !
date: 2014-04-10 19:40:22
tags: [hexo, image]
categories: About This Blog

文章代碼高亮

1
2
3

{\% codeblock \%}
your code here. 自行去掉反斜線
{\% endcodeblock \%}

Hexo 個人化問題

修改主題, 修改完畢後, 請進行以下操作來對 deploy 運行, style.css 才會正確, 本地查閱不影響
1
2
3
$ hexo clean
$ hexo generate
$ hexo deploy

與 github page 連接做靜態操作

blog_folder/_config.yml

# Deployment
## Docs: http://zespia.tw/hexo/docs/deployment.html
deploy:
  type: github
  repository: https://github.com/morris821028/morris821028.github.io.git
  branch: master

RSS 設定

blog_folder/_config.yml

# Plugins
plugins:
  - hexo-generator-feed
  - hexo-generator-sitemap
# RSS hexo-generator-feed
feed:
  type: atom
  path: atom.xml
  limit: 20

BLOG 主題 pacman 配置 - 增加文章列表圖片 (詳見 http://yangjian.me/pacman/hello/introducing-pacman-theme/)

blog_folder/theme/pacman/layout/_partial/post/article.ejs

1
2
3

<@ if(item.content.indexOf('<img src="') >= 0) { @>
    <p itemprop="description"><img style='float:left;margin:5px;height:80px;' src="<@- item.content.substring(item.content.indexOf('src="', item.content.indexOf('<img src="')) + 5, item.content.indexOf('"', item.content.indexOf('<img src="') + 11)) @>">
    <@= strip_html(item.content).replace(/^\s*/, '').replace(/\s*$/, '').substring(0, 140) @></p>

BLOG 主題 pacman 配置 - 色彩配置

blog_folder/theme/pacman/css/_base/variable.styl

color-background = #1f1f1f
color-font = #ffffff
color-white = #ffffff
color-blue = #2ca6cb
color-theme = #1f1f1f
color-font-nav =#E9CD4C
color-section = #272822
color-footer = #1f1f1f
color-gray = #CCC
color-heading = #333333
color-code = #eee
color-twitter = #00aced
color-facebook = #3b5998
color-weibo = #eb182c
color-google = #dd4b39
color-qrcode= #49ae0f
color-top = #762c54

Morris' Blog