教你10分鍾搭建酷炫的個人博客

以個人博客為例，博客地址

准備工作

安裝

$ npm install -g hexo-cli

初始化

$ hexo init <folder>
$ cd <folder>
$ npm install

創建新文章

$ hexo new "My New Post"

運行開發環境

$ hexo server
$ hexo s

構建

$ hexo generate
$ hexo g

部署

$ hexo deploy
$ hexo d

詳細准備工作，可以查閱hexo官網

安裝主題cactus，一個很程序員的主題，推薦！

克隆倉庫，並且將源文件復制到博客項目中themes目錄下

git clone https://github.com/probberechts/hexo-theme-cactus.git themes/cactus

themes/cactus/_config.yml相關配置,詳細解釋可以看官方文檔

# 首頁Projects的url
projects_url: https://github.com/xiaobinwu
# 設置頁面方向
direction: ltr
# 首頁導航
# $ hexo new page about，可以創建page頁面
nav:
  home: /
  about: /about/
  articles: /archives/
  categories: /categories/
  search: /search/
# 社交鏈接
social_links:
  github: https://github.com/xiaobinwu
  mail: mailto:[e-mail]
# 開啟標簽快捷方式
tags_overview: true
# 首頁 Writing的展示條數
posts_overview:
  show_all_posts: false
  post_count: 5
  sort_updated: false
# 排列方式
archive:
  sort_updated: false
post:
  show_updated: false
# logo設置
logo:
  enabled: true
  width: 50
  height: 50
  url: /images/logo.png
  gravatar: false
# ico設置
favicon:
  desktop:
    url: /images/favicon.ico
    gravatar: false
  android:
    url: /images/favicon-192x192.png
    gravatar: false
  apple:
    url: /images/apple-touch-icon.png
    gravatar: false
# 高亮語法
highlight: kimbie.dark
# 博客主題色，dark, light, classic, white
colorscheme: dark
page_width: 48
# rss設置
rss: atom.xml
open_graph:
  fb_app_id:
  fb_admins:
  twitter_id:
  google_plus:
# disqus評論，默認不開啟，需翻牆
disqus:
  enabled: false
  shortname: cactus-1
# 谷歌統計
google_analytics:
  enabled: false
  id: UA-86660611-1
# 百度統計
baidu_analytics:
  enabled: false
  id: 2e6da3c375c8a87f5b664cea6d4cb29c

gravatar:
  email: [e-mail]

valine:
  enable: true
  app_id: xxxxxx
  app_key: xxxxxxx

Valine評論系統

themes/cactus/_config.yml配置Valine，需要申請app_id，app_key

valine:
  enable: true
  app_id: xxxx
  app_key: xxxx

themes/cactus/layout/_partial/comments.ejs,寫入

<% if(theme.valine.enable) { %>
    <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
    <script src='//unpkg.com/valine/dist/Valine.min.js'></script>
    <div id="vcomments" class="blog-post-comments"></div>
    <script>
        new Valine({
            el: '#vcomments',
            visitor: true,
            appId: '<%=theme.valine.app_id %>',
            appKey: '<%=theme.valine.app_key %>',
            placeholder: 'ヾﾉ≧∀≦)o來啊，快活啊!',
            avatar: 'robohash'
        })
    </script>
<% } %>

自動部署hexo博客到阿里雲服務器

創建倉庫(遠端服務器創建git倉庫),可以使用ssh登入雲服務器

mkdir blog.git && cd blog.git
git init --bare

Hexo配置

deploy:
  type: git
  message: update
  repo: [e-mail]:/www/wwwroot/blog.git,master

插件安裝

npm install hexo-deployer-git --save

自動部署

進入到git倉庫hooks目錄，並創建鈎子post-receive

cd /www/wwwroot/blog.git/hooks
touch post-receive
vim post-receive

輸入下面腳本：

#!/bin/bash -l
GIT_REPO=/www/wwwroot/blog.git
TMP_GIT_CLONE=/www/wwwroot/tmp/blog
PUBLIC_WWW=/www/wwwroot/blog
rm -rf ${TMP_GIT_CLONE}
mkdir ${TMP_GIT_CLONE}
git clone $GIT_REPO $TMP_GIT_CLONE
rm -rf ${PUBLIC_WWW}/*
cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW}

更改權限

chmod +x post-receive
chmod 777 -R /www/wwwroot/blog
chmod 777 -R /www/wwwroot/tmp/blog

最后部署

$ hexo g -d