從現在開始開始 Hexo !

contents

  1. 1. 用了 GitHub, 學到 Nodejs, 路過 Hexo, 到了這裡
    1. 1.1. 安裝各種有趣 ?
      1. 1.1.1. Hexo 第一步
    2. 1.2. Hexo 日常問題
    3. 1.3. Hexo 個人化問題

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

安裝各種有趣 ?

Hexo 第一步

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

Hexo 日常問題

  • 撰寫文章

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    $ 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
  • 文章標籤使用

    1
    2
    3
    4
    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
    1
    2
    3
    4
    5
    6
    # 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
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    # 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
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    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