korey的前端笔记

Appearance

flqin blog 搭建记录 ​

blog 从 wordpress 迁移至 hexo+next，并通过 husky+Actions 自动部署到 ftp 及 github

因 wordpress 后台臃肿反应慢，外加上本人作为前端代码狗，基于 nodejs 的 hexo 对我非常友好。所以花了 2 天时间终于把 blog 从 wordpress 迁移至 hexo， 通过直接在 md 里面来写博客，简直爽到飞起。特此记录一下我在迁移搭建中做了哪些操作，以便后面遗忘。

博客效果:

准备工作 ​

  1. 安装 node.js
  2. 安装 git
  3. 全局安装 Hexo-cli（生成 hexo 项目用）
bash
npm install -g hexo-cli

生成静态网站 ​

打开目标文件夹，执行命令：

bash
hexo init hexo-demo
cd hexo-demo
yarn //也可以用npm i，个人喜好

通过命令 hexo s可本地预览

通过命令 hexo g可本地生成建站资源 public 包，用来部署

相关文件夹的作用及配置点此查阅, 命令点此查阅

从 wordpress 迁移 ​

hexo-demo 里安装：

shell
yarn add hexo-migrator-wordpress -D

同时在WordPress仪表盘中导出数据(“Tools” → “Export” → “WordPress”)

安装好后执行：

shell
hexo migrate wordpress <source> #source为 WordPress 导出的文件路径或网址

转换后再自己检查修改下就可以了，因为这个转换插件我只需要用一次，然后我就把hexo-migrator-wordpress删掉了。

hexo 优化 ​

项目有两个_config.yml 文件，分别是项目_config.yml和主题_config.yml。

项目增强 ​

shell
yarn add hexo-helper-live2d -D
yarn add live2d-widget-model-koharu -D

项目config添加配置：

yml
live2d:
  enable: true
  scriptFrom: jsdelivr # 默认
  pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
  tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false # 调试, 是否在控制台输出日志
  model:
    use: live2d-widget-model-koharu # npm-module package name
    scale: 1
    hHeadPos: 0.5
    vHeadPos: 0.618
  display:
    superSample: 2
    width: 125
    height: 150
    position: left
    hOffset: 30
    vOffset: -5
  mobile:
    show: false
    scale: 0.05
  react:
    opacityDefault: 1
    opacityOnHover: 0.2
shell
yarn add hexo-generator-search -D

项目config 设置：

yml
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

主题config 设置：

yml
local_search:
  enable: true
shell
yarn add hexo-filter-optimize -D

配置见作者说明。

  • 注意插件与 next font-awesome 本地库有冲突，需要把主题config里的fontawesome替换为线上 CDN。详见
  • 在本地 sever 的时候很慢，建议只在发布部署的时候使用。（用sed -i在 travis 构建里开启）

主题相关 ​

采用了 star 最多的 hexo，官方文档查阅。设置方式：修改项目config里的 theme 为 next即可。

主题优化（以下配置均在主题config） ​

  • 生成缓存： cache.enable:true
  • 修改网站 favicon： favicon
  • 页脚修改： footer
  • 右上角 github banner 生成： github_banner
  • 设置导航： menu
  • 选择主题 Pisces：scheme: Pisces
  • 设置概览信息：social social_icons
  • 设置头像相关：avatar
  • 代码风格：highlight_theme
  • 设置百度统计：baidu_analytics
  • 设置显示加载更多：scroll_to_more
  • 保存滚动位置：save_scroll
  • 添加打赏：reward_settings reward
  • 拷贝滑动进度条并设置：reading_progress
  • 拷贝加载进度条并设置：pace pace_theme
  • 拷贝页面 3D 背景并设置canvas_nest
  • 拷贝fancyBox并设置fancybox
  • 拷贝字数统计插件并设置（需同时设置两个_onfig,并在项目 yarn add 该插件）：symbols_count_time

SEO 优化 ​

  • 百度站长平台

  • 谷歌站长平台

  • 通过在搜索引擎输入:site: blog.flqin.com测试是否被收录

  • 未被收录的话，在站长平台添加。

  • 提交链接：包括主动推送，自动推送，sitemap,效率:主动推送>自动推送>sitemap,可同时配合使用:

    shell
    yarn add hexo-generator-sitemap hexo-generator-baidu-sitemap hexo-baidu-url-submit -D

    并设置项目config:url,permalink,sitemap,baidusitemap,baidu_url_submit,deploy

husky+Actions 持续部署到 ftp 和 gitlab.io ​

部署到 ftp ​

安装 husky：

shell
npm i husky -D

package.json 添加：

js
  "husky": {
    "hooks": {
      "pre-push": "blog"
    }
  }

其中 blog 是本地 shell 命令，主要功能是将 hexo 构建后的代码传到 ftp。

为什么不用 hexo-deployer-ftpsync 直接上传？因为使用 github actions 的服务器构建上传到国内会出现墙的问题。只能手动本地上传。

部署到 github.io ​

添加部署相关插件：

shell
yarn add hexo-deployer-git -D

部署的项目config配置(详细配置查阅)

yml
- type: git
  repo: git@github.com:zhaoky/zhaoky.github.io.git

ci 配置

yml
 - name: Deploy
        uses: sma11black/hexo-action@v1.0.4
        with:
          deploy_key: ${{ secrets.DEPLOY_KEY }}
          user_name: zhaoky
          user_email: 623212389@qq.com

其中 DEPLOY_KEY 为私钥，而公钥则部署到 zhaoky.github.io 仓库的deploy key。

action 的配置文件 ​

yml
name: Action CI

on:
  push:
    branches:
      - master

jobs:
  run:
    name: Run
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Setup nodejs
        uses: actions/setup-node@v2-beta
        with:
          node-version: '12'
      - name: Install
        run: yarn
      - name: Set Env
        env:
          BAIDU_TOKEN: ${{ secrets.BAIDU_TOKEN }}
        run: sed -i "s/BAIDU_TOKEN/$BAIDU_TOKEN/g" ./_config.yml
      - name: Deploy
        uses: sma11black/hexo-action@v1.0.4
        with:
          deploy_key: ${{ secrets.DEPLOY_KEY }}
          user_name: zhaoky
          user_email: 623212389@qq.com

以下为原 Travis 的配置 ​

git 部署相关设置 ​

github 部署采用 ssh 的通讯加密方式，首先在 github 上建一个命名为 zhaoky.github.io(zhaoky 替换成 github 名)的仓库，然后本地本地生成一对公私钥（运行ssh-keygen -t rsa -C youremail@example.com生成）,将.pub 公钥配置在 zhaoky.github.io 仓库的 deploy key，把私钥和 ssh-config 发到 travis 的构建服务器里。私钥为了保证安全性，本地通过 travis 命令加密，然后在 travis 构建时再解密，这样就能自动发布了。

本地 travis 命令如何加密 ​

shell
gem install travis
travis login --com #如果仍在使用travis-ci.org，则需要使用--org
travis encrypt-file id_rsa --add --pro #使用--add自动添加到travis.yml,--pro将生成的加密环境变量添加到travis项目后台管理中

这样就生成了一个加密后的.enc 的文件了

ssh/config 怎么配置 ​

shell
Host github.com
    User git
    StrictHostKeyChecking no
    IdentityFile ~/.ssh/id_rsa
    IdentitiesOnly yes

我的做法是在项目里建了一个.travis 的文件夹，将加密后的.enc 文件和 ssh-config 放进去，在 travis 构建的时候发到构建的机器上。

我的.travis.yml 的配置 ​

直接看配置就明白了。

yml
language: node_js
node_js:
  - '10'
cache:
  directories:
    - node_modules
branches:
  only:
    - master
before_install:
  - openssl aes-256-cbc -K $encrypted_43f9974e8d06_key -iv $encrypted_43f9974e8d06_iv
    -in .travis/id_rsa.enc -out ~/.ssh/id_rsa -d
  - chmod 600 ~/.ssh/id_rsa
  - cp .travis/ssh_config ~/.ssh/config
  - git config --global user.name 'korey'
  - git config --global user.email 'keyu.zhao@foxmail.com'
  - yarn add hexo-cli -g
install:
  - yarn
script:
  - bash sed.sh
  - yarn run deploy #hexo clean && hexo g -d