环境

在以下环境中部署:
系统: ubuntu 20.04
编辑器: WebStorm
node: v16.18.0
npm: v8.19.2

安装

1
2
3
4

# 全局安装hexo-cli 命令行工具
npm install -g hexo-cli
# 当前目录下初始化项目
hexo init

初始化的目录必须是一个空目录

创建新页面

文件名参考jekyll和VuePress的推荐格式, year-month-day-title.
修改_config.yml配置项, 使创建的文件名为上述格式:

1
2
3
4

# 设置文件名格式
new_post_name: :year-:month-:day-:title.md
# 启用资源文件夹,方便以后copy, 不启用
# post_asset_folder: true

图片资源采用全局文件夹的形式,采用资源文件夹形式,主页上会请求不到资源,需要到具体页面里才能正常显示.
图片资源目前按年划分,正常应该也不会很多.

1

hexo new "Hexo quick start"

然后填写正文内容

配置文件

以下配置优先级从高到低, 高优先级覆盖低优先级.

1. _config.yml项目配置文件
2. _config.<theme_name>.yml项目的主题配置文件
3. themes/<theme_name>/_config.yml主题默认配置文件

修改_config.<theme_name>.yml配置,需要重启服务才能生效

使用next主题

https://github.com/theme-next/hexo-theme-next
next 主题设置教程

1
2
3
4
5

cd <hexo project>
# 这个部署方式容易出问题, 适合主题开发人员用, 采用npm部署
git clone https://github.com/theme-next/hexo-theme-next themes/next
# 采用npm安装主题
npm install hexo-theme-next

编辑_config.yml

1

theme: next

next的主要用法看themes/next/_config.yml里面的内容

本地测试

1
2

# 本地运行服务器
hexo server

一键部署到 github pages

修改_config.yml, 使支持一键部署到github

1
2
3
4
5
6

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: 'git'
  repo: 'git@github.com:eleksbai/eleksbai.github.io.git'
  branch: gh-pages

执行命令hexo clean && hexo deploy部署github上.

调整github项目下的page设置, 是github page显示的内容指向gh-pages分支,
Project(***.github.io) >> Settings >> Pages >> Branch >> gh-pages

github.io项目从jekyll迁移到hexo

通过以下步骤完成博客框架的迁移:

1. 从github拉取***.io项目.
2. 在一个项目的目录创建新文件夹, 并初始化hexo项目.
3. 将***.io项目中_post文件的内容复制到hexo项目source/_posts下
4. 将***.io项目清空,仅留下.git目录
5. 将hexo项目内容完成复制到***.io目录下.

参考

Documentation | Hexo

背景

近期想重新整理一下博客了，作为自己的一些技术积累，方便自己日后翻阅，并且日后如果有了新的感悟可以进行迭代。
以前使用Github Pages搞过（实际上只是折腾搭个博客，文档没写几篇，现在这个从历史经验看大概率也是这个下场），
后来看了小林coding的使用vuepress搭建了个人博客，而且vue个人比较感兴趣所以打算采用vuepress重新整一下博客。
因为vssue是官方维护的评论插件，所以打算来用它作为评论系统，平台选择gitee即码云（国内的访问方便，现在代码仓库也基本用gitee了）。
应为这个vssue和gitee配合使用存在问题，才有了这篇文章。（希望作者维护一下， 毕竟我也不会整前端，只能搞个自用的解决方案）

vuepress

Vue 驱动的静态网站生成器，类似于GitHub Pages的jekyll。
目前了解主要有两种应用，一种是文档， 一种是博客。

vssue

vuepress 官方开发的评论插件，利用git平台的issue功能来实现评论功能。
目前支持多个平台，包括 GitHub, GitLab, Bitbucket, Gitee 和 Gitea。
码云的插件为@vssue/api-gitee-v5

码云评论插件

码云评论插件需要在码云平台上创建一个第三方应用来使用， 一般用户就可以，不需要使用企业版。

问题

使用vssue+gitee搭的评论系统， 在登录时会提示无效的登录回调地址。
这是由于码云只支持单个的url地址回调导致的。
@vssue/api-gitee-v5插件在调用码云接口时采用的回调地址为当前的url地址，如http://localhost:8080/2022/10/29/vuepress-quick-start/
而一般码云上配置的应用回调地址为http://localhost:8080/。这两个的url不匹配导致了码云评论插件无法正常使用。
官方demo也存在这个问题，但是没有维护了。

解决方法

1. 请求的回调地址改为码云上配置的回调地址，并缓存当前的页面地址
2. 码云回调后自动到之前的缓存地址。

修改vssue中api-gitee-v5的源码,

1. 增加callbackURL参数, 此参数目前固定为当前的window.location.protocol + '//' + window.location.host即默认的主页地址.
2. 去掉proxy的参数, 当前gitee平台接口已经支持CORS,需要配置代理了.而且vssue默认配置的代理已经无法访问了.
3. 在向码云平台请求的接口的redirect_uri参数均改为callbackURL.
4. 在向码云进行应用授权时缓存当前路径的path.使用sessionStorage.setItem('cacheOriginPath', this.getCurrentPath());

修改博客项目的enhanceApp.js

因为主页没有评论模块,所以vssue相关代码还没有初始化,无法处理缓存的path.(可能也有办法,但在博客项目改一下也简单)
如果当前有缓存的path, 则跳转到对应的path路径下.
enhanceApp.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

function getCacheOriginPath() {
    const cacheOriginPath = sessionStorage.getItem('cacheOriginPath');
    sessionStorage.setItem('cacheOriginPath', '');
    console.log(`get cacheOriginPath  ${cacheOriginPath}`);
    return cacheOriginPath || '';
}


export default ({
                    Vue, // the version of Vue being used in the VuePress app
                    options, // the options for the root Vue instance
                    router, // the router instance for the app
                    siteData // site metadata
                }) => {
    // ...apply enhancements to the app
    console.log("enhanceApp ...",)
    const cacheOriginPath = getCacheOriginPath()
    if (cacheOriginPath) {
        console.log("change path", window.location.href, cacheOriginPath)
        window.location.href = window.location.protocol + '//' + window.location.host + cacheOriginPath + window.location.search;
    }


// http://localhost:8080/2022/10/29/vuepress-quick-start/
}

应用

1. 使用@vuepress/theme-blog搭建好博客, 引用@vssue/api-gitee-v5码云模块并做相应的配置.
2. 拉取修改过的vssue项目git clone git@gitee.com:eleksbai/vssue.git
3. 进入项目根路径安装依赖cd vssue && yarn install
4. 编译码云评论模块 cd packages/@vssue/api-gitee-v5 && yarn build
5. 在码云模块路径下将编译的码云链接到系统yarn link
6. 进入到博客项目, 链接刚刚编译的码云模块yarn link @vssue/api-gitee-v5
7. 运行博客项目测试效果yarn dev

基础环境 nodejs 环境搭建

在ubuntu20.04下搭建vuepress开发环境.

1
2
3
4

# 系统 ubuntu 20.04
sudo apt install nodejs
sudo apt install npm
cnpm install -g vuepress

hyman@hyman-MS-7A37:$ node -v
v10.19.0
hyman@hyman-MS-7A37:$ npm -v
6.14.4

cnpm 包

1
2
3
4

sudo npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install --global yarn
sudo ln -s /opt/programs/nodejs/node-v16.17.1-linux-x64/bin/yarn /usr/local/bin/yarn
yarn config set registry https://registry.npmmirror.com

淘宝npm启用新域名了
https://developer.aliyun.com/article/801032

包管理还是应该使用yarn， 不然很可能使用的时候部署不起来

配置 docs/.vuepress/config.js

教程1中建议对配置进行切分， 我这里建议不需要。
这种东西等需要再去搞，而且大多数人等不要需要的哪个时候。
早期阶段保持简单即可。

插件安装

1
2

cnpm install @vuepress/plugin-back-to-top
cnpm install @vuepress/plugin-pwa

评论系统 vssue

码云配置
vuepress 配置
评论系统demo
码云第三方应用文档
结合码云试试看， 不行以后切成gitee

1
2
3
4
5

cnpm install @vssue/vuepress-plugin-vssue
cnpm install @vssue/api-gitee-v5

# secret_example.js

配置平台密钥
secret.js

1
2
3
4
5
6
7
8
9
10
11

const vssue_gitee ={
    platform: 'gitee',
    // all other options of Vssue are allowed
    owner: 'eleksbai', // 码云的用户名
    repo: 'blog', // 码云的仓库名
    clientId: 'YOUR_CLIENT_ID',
    clientSecret: 'YOUR_CLIENT_SECRET',
}
module.exports = {
    "vssue": vssue_gitee
}

在配置文件中引入
docs/.vuepress/config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

const secret =  require("./secret");
const vssue = secret.vssue
module.exports = { 
    // ....
    plugins:
        {
            '@vssue/vuepress-plugin-vssue': {
                // set `platform` rather than `api`
                platform: vssue.platform,
                owner: vssue.owner,
                repo: vssue.repo,
                clientId: vssue.clientId,
                clientSecret: vssue.clientSecret,
            },
            '@vuepress/back-to-top':{}
        },
    // ...
}

自动侧边栏

方便管理文章
Vuepress Plugin Auto Sidebar

1

yarn add -D  vuepress-plugin-auto-sidebar

参考

1. 一个比较详细的建站过程（看到一半需要关注公众号才可以继续）
2. 官方文档中文版

celery_first 最小实验

概述

celery 将工作进行分解为：

函数，调用函数，结果容器，函数结果

1. 初始化函数准备工作
2. 调用函数立即返回一个结果容器
3. 函数接收任务开始工作，抛出函数结果
4. 函数结果去填充到结果容器

工作者

工作者示例代码
tasks.py

1
2
3
4
5
6
7
8
9
10
11
12

from celery import Celery

app = Celery('tasks', broker='pyamqp://guest@192.168.146.129//', backend='redis://192.168.146.129')


@app.task
def add(x, y):
    # 占时间12秒
    for i in range(123456):
        a = 999 ** 999
        del a
    return x + y

工作者流程

1. 准备工作，监听消息队列，获取任务安排
2. 取到任务马上工作，工作完成写入到后端。（工作者是否并发待测试）

启动工作者
celery -A your_app_name worker –pool=solo -l info
windows下使用报错解决方案
celery -A your_app_name worker –pool=solo -l info

安排工作者进行工作

调用工作者执行任务流程

1. 导入工作者的任务方法
2. 执行任务方法
3. 立即返回一个异步结果，包含该执行任务的id
4. 异步结果包含任务结果，初始状态为空，工作者完成工作后自动取得任务结果

内存假想

立即返回的结果指向一块内存区间，内存区间有一部分初始状态。
当工作者任务结束会把结果数据写到该内存区间

调用工作者示例代码
tasks.py（续）

1
2
3
4
5
6
7
8
9
10
11

import time
def test_run():
    r1 = add.delay(10, 1)
    r2 = add.delay(10, 2)
    i = 1
    while 1:
        print('第%s秒' % i, r1.result, r2.result)
        if r1.result and r2.result:
            break
        time.sleep(1)
        i += 1

调用工作者方法

1. pycharm 运行 tasks.py文件，勾选 Run with Python console
2. test_run()

docker 和 docker-compose 安装

docker 安装

docker安装官网文档

1

暂略

docker-compose 安装

1
2
3

sudo curl -L https://github.com/docker/compose/releases/download/1.22.0/docker-compose-$(uname -s)-$(uname -m) -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose
docker-compose --version

容器基本命令

进入现有容器

代码示例

参考链接

1
2
3
4
5
6
7
8
9

# 打开一个现在正在运行的容器
sudo docker exec -t -i container_name /bin/bash 

# 创建一个现有容器并链接
sudo docker run --name t1 -it --entrypoint /bin/bash  python #python为镜像名

# Alpine 是专为容器设计的轻量镜像
# 以Alpine为基础构建的镜像中没有bash
sudo docker run --rm -it --entrypoint sh python

docker-compose 命令

docker-compose 相关命令需要在含有docker-compose.yaml文件的路径下运行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 项目创建及更新 -d 后台运行
sudo docker-compose up -d

# 项目重新构建镜像
sudo docker-compose up --build

# 运行一次性命令 查看web服务的环境变量
sudo docker-compose run web env

# 停止服务
sudo docker-compose stop

# 删除服务及数据卷
sudo docker-compose down --volumes

# 如果容器已存在则不会重新创建
sudo docker-compose up -d --no-recreate

应用篇

使用 docker-compose 进行容器部署

本地环境快速部署 mysql redis rabbitmq

docker-compose.yaml
注 3.2才支持使用volumes表达mount bind

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

version: '3.2'
services:
  redis:
    image: "redis"
    restart: always
    ports:
    - "6379:6379"
    volumes:
      - type: bind
        source: /home/ubuntu/redis-data
        target: /data
    environment:
    - HELLO=hyman
    command: redis-server --appendonly yes

  mysql:
    image: "mysql:5.7"
    restart: always
    ports:
    - "3306:3306"
    environment:
    - MYSQL_ROOT_PASSWORD=123456

  rabbitmq:
    image: "rabbitmq:3-management"
    restart: always
    ports:
    - "5672:5672"
    - "15672:15672"

redis容器应用

代码示例

1
2
3

# 更换绑定方式（成功） 用iptables 外网访问保证安全
docker run -p 6379:6379 --name myredis --restart always --mount type=bind,src=/home/ubuntu/redis-data,dst=/data -d redis redis-server --appendonly yes 

mysql容器应用

代码示例

1
2

sudo docker run --restart always --name my-mysql -p 3306:3306 -e MYSQL_ROOT_PASSWORD=123456 -d mysql:5.7