目錄

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

建立過程

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

[_config.yml]

url: https://onlyfly34.github.io/倉庫名/
root: /倉庫名/
#備份用
#!/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主題

文章摘要顯示使用

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

[_config.yml]

#Excerpt
excerpt_depth: 1

創立標籤頁

  • 創立分類頁使用類似方法
  • 指令:
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]

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'
]);
最後修改日期: 2019 年 7 月 15 日

作者

留言

撰寫回覆或留言

發佈留言必須填寫的電子郵件地址不會公開。