Hexo-免費博客搭建使用講解
初識hexo就給人以眼前一亮的感覺, 查看資料到自己搭建個人博客, 簡直是給人”帶你裝B,帶你F”的快感,簡單的博客生成操作, 多樣化美觀的主題選擇, 功能強大的插件定製,關鍵是這些都是免費開源的,作爲一個程序員,沒有什麼比遇到這種好使的軟件更加給人已激動了.
配置環境
安裝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
後續
歡迎溝通學習