Hexo部落格建立筆記

終於從Wordpress搬過來Hexo了(汗
大致上紀錄一下建立Hexo部落格的過程、看過的教學、使用的插件和做過的設定，方便以後回溯。

建立過程

• 按照官方文件快速建立Hexo部落格
• 部署到Github Pages上
  • 在_config.yml中，若部落格資料夾放置於Github上的倉庫中，url和root需要注意設定，否則會無法正確載入css

[_config.yml]

url: https://onlyfly34.github.io/倉庫名/
root: /倉庫名/

• 使用Custom Domain，並將Custom Domain託管在CloudFlare上，以達到Custom Domain的Github pages也能用HTTPS傳輸
  • 在DNS代管Server上(CloudFlare)，需要設定一筆CNAME紀錄指向Github的域名，詳細作法參照Github官方教學
  • Secure and fast GitHub Pages with CloudFlare：詳細英文說明
  • [免費SSL]Cloudflare 免費憑證讓網站綁上SSL加密連線(https)
  • Github Pages 自訂域名 – 輕鬆擁有 https 綠鎖頭 (1)
  • Github Pages 免費 ssl 設定 – 輕鬆擁有 https 綠鎖頭 (2)
• 撰寫備份和還原的Shell Scripts
  • 先在整個部落格資料夾的根目錄下指令 git init，方便後面版本控管
  • Shell Scripts：

#備份用
#!/bin/bash
hexo g      #產生靜態文件
hexo d      #部署至Github pages
git status  #查看git控管狀態
echo "Remember to backup blogs periodically."

#還原用
#!/bin/bash
git config --global user.email "onlyfly34@gmail.com"
git config --global user.name "Qi-Ze Huang"
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash #安裝nvm
. ~/.bashrc #功用相當於登出再登入Terminal

source ~/.nvm/nvm.sh
nvm install stable #安裝nodejs
npm install
npm install -g hexo-cli
git clone https://github.com/onlyfly34/xxxxxx-Blog.git .deploy_git #將原本github倉庫中的上傳紀錄，下載到.deploy_git資料夾裡
. ~/.bashrc

安裝插件整理

• hexo-excerpt
• hexo-generator-search
• hexo-generator-sitemap
• hexo-deployer-git
• gulp

npm install hexo-excerpt --save
hexo-generator-search
npm install hexo-generator-sitemap --save
npm install hexo-deployer-git --save
npm install gulp --save

設定項目 & 教學

採用NexT主題

• Hexo NexT主題官方Github：有初步設定的說明
• Hexo NexT主題設定：較深入的NexT主題設定中文說明

文章摘要顯示使用

• 使用hexo-excerpt (自動產生摘要的插件)
• 指令：

npm install hexo-excerpt --save

• 使用hexo-excerpt的原因：
  • 避免使用<!-- more -->手動截斷，省下審視版面的時間
  • 不想使用auto_excerpt，沒有截到一個段落結束的話，不喜歡。
• 在_config.yml中設定摘要要顯示多少個一級html標籤中的內容

[_config.yml]

#Excerpt
excerpt_depth: 1

• 其他參考
  • hexo小技巧-首页显示文章摘要及图片
  • hexo-excerpt插件實作概念：透過解析html標籤，來決定要如何顯示摘要

創立標籤頁

• 創立分類頁使用類似方法
• 指令：

hexo new page tags

• 編輯 source/tags/index.md和_config.yml

[source/tags/index.md]

---

title: Tags Cloud
date: 2017-09-29 23:01:13
type: "tags"
comments: false

---

[_config.yml]

# Tags generator
tag_generator:
  per_page: 20

啟用搜索文章功能

• 安裝hexo-generator-search
• 指令：

npm install hexo-generator-search --save

• 安裝&啟用教學

讓NexT主題的Markdown H2自動產生底線

• 在主題的css中添加自訂CSS

[themes/next/source/css/_custom/custom.styl]

h2 { border-bottom: 1px solid #cccccc; }

添加前：
{% asset_img "添加前.png" %}

添加後：
{% asset_img "添加後.png" %}

• 以及把themes/next/layout/_macro/post-collapse.swig檔案中的h2替換成h1，避免archives頁面產生h2，額外多了底線不美觀

讓NexT主題的List不只有圓形

• 在主題的css中將第55行註解

[themes/next/source/css/_common/components/post/post-expand.styl]

//ul li { list-style: circle; }

修改前：
{% asset_img "修改前.png" %}

修改後：
{% asset_img "修改後.png" %}

正確插入圖片

• 使用資源(資產)資料夾 之設定方式
• 設定網站的_config.yml

[_config.yml]

post_asset_folder: true

• 接下來在產生新文章或草稿時，會產生對應的資料夾，可以拿來放置圖片，用於隔離不同文章的圖片

正確顯示TOC(table of content)

• 更：在後來的版本已解決Bug，重裝後不需要這個步驟

• 解決之前TOC部分一直顯示#undefined
  {% asset_img "TOC修改前.png" %}

• 解法如Github上所示

• 更改插件的code後，下達指令hexo clean以及hexo g後TOC就能成功運作。

新增站點地圖

• 指令：

npm install hexo-generator-sitemap --save

• 接著再重新產生一次靜態文件和伺服器即可

部署

部署到github上相當簡單，教學如官網所示。

改善效能

• 透過壓縮css, html, javascript和圖片檔來加快網頁載入速度
• 安裝gulp

npm install gulp --save

• 安裝gulp相依性套件

npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp-imagemin --save

• 以目前的規模來說，壓縮後改善效能不大，只有圖片壓縮效果比較大
  {% asset_img "壓縮效果.png" %}

• 我的gulpfile配置如下，基本上是照抄，只做路徑修改

[gulpfile.js]

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');
// 压缩css文件
gulp.task('minify-css', function() {
  return gulp.src('./public/**/*.css')
  .pipe(minifycss())
  .pipe(gulp.dest('./public'));
});
// 压缩html文件
gulp.task('minify-html', function() {
  return gulp.src('./public/**/*.html')
  .pipe(htmlclean())
  .pipe(htmlmin({
    removeComments: true,
    minifyJS: true,
    minifyCSS: true,
    minifyURLs: true,
  }))
  .pipe(gulp.dest('./public'))
});
// 压缩js文件
gulp.task('minify-js', function() {
  return gulp.src('./public/js/**/*.js')
  .pipe(uglify())
  .pipe(gulp.dest('./public'));
});
// 压缩 public/demo 目录内图片
gulp.task('minify-images', function() {
    gulp.src('./public/images/*.*')
        .pipe(imagemin({
           optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
           progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
           interlaced: false, //类型：Boolean 默认：false 隔行扫描gif进行渲染
           multipass: false, //类型：Boolean 默认：false 多次优化svg直到完全优化
        }))
        .pipe(gulp.dest('./public/images'));
});
// 默认任务
gulp.task('default', [
  'minify-html','minify-css','minify-js','minify-images'
]);