Hexo-免費個人博客搭建框架使用

Hexo-免費博客搭建使用講解

初識hexo就給人以眼前一亮的感覺, 查看資料到自己搭建個人博客, 簡直是給人”帶你裝B,帶你F”的快感,簡單的博客生成操作, 多樣化美觀的主題選擇, 功能強大的插件定製,關鍵是這些都是免費開源的,作爲一個程序員,沒有什麼比遇到這種好使的軟件更加給人已激動了.

casper美到爆,有木有想擁有嗎?繼續學習把...

配置環境

安裝Node(必須)作用:用來生成靜態頁面的, win\mac\linux都有相關版本自行到官網下載。
安裝Git(必須)作用:作爲一個21時間程序員,這個肯定大家都會用, 測試過程發現最好配置ssh, 體驗會更好。

開發及配置

1. 安裝hexo

        $ npm install -g hexo
新版本需要安裝git插件  $ npm install hexo-deployer-git --save

2. 初始化項目

新建一個你放hexo的新項目目錄, cd到裏面執行:

        $ hexo init
        $ npm install  #安裝相關依賴

3. Demo生成及預覽

    $ hexo generate #生成靜態頁面
    $ hexo server #啓動本地預覽服務

然後用瀏覽器訪問http://localhost:4000/,此時,你應該看到了一個漂亮的博客了

4. 主題選擇及下載

hexo3.0使用的默認主題是landscape, 我們可以自行下載主題到theme目錄下

    $ npm install <plugin-name> --save
    $ git clone <repository> themes/<theme-name>

安裝失敗情況可參考切換國內鏡像源:
nmp國內鏡像

無論是插件還是主題在安裝後都需要在根目錄下_config.yml中修改plugins和theme的值以啓用他們。

fancybox - 是否啓用Fancybox圖片燈箱效果
duoshuo - 多說評論 shortname
disqus - Disqus評論 shortname
google_search - 默認使用Google搜索引擎
baidu_search - 若想使用百度搜索,將其設定爲true
swiftype - Swiftype 站內搜索key
tinysou - 微搜索 key
self_search - 基於jQuery的本地搜索引擎,需要安裝hexo-generator-search插件使用。
google_analytics - Google Analytics 跟蹤ID
baidu_analytics - 百度統計 跟蹤ID
shareto - 是否使用分享按鈕
busuanzi - 是否使用不蒜子頁面訪問計數
menu - 自定義頁面及菜單,依照已有格式填寫。填寫後請在source目錄下建立相應名稱的文件夾,幷包含index.md文件,以正確顯示頁面。導航菜單中集成了FontAwesome圖標字體,可以在這裏選擇新的圖標,並按照相關說明使用。
widgets - 選擇和排列希望使用的側邊欄小工具。
links - 友情鏈接,請依照格式填寫。
Static files - 靜態文件存儲路徑,方便設置CDN緩存。
Theme version - 主題版本,便於靜態文件更新後刷新CDN緩存。

5. 發佈到github上

配置根目錄 _config.yml

    deploy:type: git   
    repository: https://your_github_url.git    
    branch: master

相關屬性設置註釋:

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

# Site  這下面的幾項配置都很簡單,你看我的博客就知道分別是什麼意思
title: 常興驛站 #博客名
subtitle: Goals determine what you are going to be  #副標題
description: Goals determine what you are going to be #用於搜索,沒有直觀表現
author: changxing   #作者
language: zh-CN #語言
timezone:   #時區,此處不填寫,hexo會以你目前電腦的時區爲默認值

# URL   暫不配置,使用默認值
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory     暫不配置,使用默認值
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# 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
future: true
highlight:
  enable: true
  line_number: true
  tab_replace:

# Category & Tag    暫不配置,使用默認值
default_category: uncategorized
category_map:
tag_map:

# 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: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination    
## Set per_page to 0 to disable pagination
per_page: 10    #每頁顯示的文章數,0表示不分頁
pagination_dir: page

# Extensions    插件配置,暫時不配置
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
plugins:
- hexo-generator-feed
theme: light    #使用的主題

feed:   #之後配置rss會用,此處先不配置這個
  type: atom
  path: atom.xml
  limit: 20  

# Deployment    用於部署到github,之前已經配置過
## Docs: http://hexo.io/docs/deployment.html

deploy: 
  type: git
  repository: https://your.git
  branch: master

執行命令上傳到雲端github上

hexo deploy


介紹幾個hexo常用的命令,#後面爲註釋。

$ hexo g #完整命令爲hexo generate,用於生成靜態文件
$ hexo s #完整命令爲hexo server,用於啓動服務器,主要用來本地預覽
$ hexo d #完整命令爲hexo deploy,用於將本地文件發佈到github上
$ hexo n #完整命令爲hexo new,用於新建一篇文章

發表一篇文章

1. $ hexo new "my new post"

2. 編輯 my-new-post.md

title: my new post #可以改成中文的,如“新文章”
date: 2015-04-08 22:56:29 #發表日期,一般不改動
categories: blog #文章文類
tags: [博客,文章] #文章標籤,多於一項時用這種格式,只有一項時使用tags: blog
---
#這裏是正文,用markdown寫,你可以選擇寫一段顯示在首頁的簡介後,加上<!--more-->,在<!--more-->之前的內容會顯示在首頁,之後的內容會被隱藏,當遊客點擊Read more才能看到。

3. $ hexo g 生成靜態文件

4. $ hexo d 同步到github


後續

個人博客地址
新浪微博

歡迎溝通學習

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章