博客构建记录

本地搭建

在sourceforge上下载hugo的extended版本：hugo_extended_0.92.2_Windows-64bit.zip，解压，并添加到PATH中，记录一个在windows上快捷加环境变量的方法，WIN+R输入sysdm.cpl。
新建站点，新建文章

hugo new site ./myblog
hugo new about.mb # 新建about.md
hugo new post/first.md # 新建post文件夹下的first.md
hugo server -D # 开启本地服务器监听1313端口，包括Draft
hugo -D # 编译网站到public/文件夹下，包括Draft

服务器环境搭建

Nginx

在/etc/nginx/conf.d/中新建myblog.conf配置文件，输入

server {
    listen          80;
    # server_name   windsgo.top; # 如果是ip登录此处不能指定域名
    location / {
            root    /root/git/hugo/;
            index   index.html;
            autoindex on;
    }
    error_log       /root/error.log;
}

Git远程仓库和钩子设置

在~/git/下新建hugo.git/和hugo/两个目录，前者作为裸仓用于拉取和推送，建立钩子把后者作为远程仓库存储文件，并用这个目录作为nginx的root目录部署网站。
```
cd ~/git/hugo.git/
git init --bare
echo "git --work-tree=/root/git/hugo \
--git-dir=/root/git/hugo.git checkout -f" \
>>  ~/git/hugo.git/hooks/post-receive
```

在本地添加远程仓库

# 本地
cd myblog/public
git init
git add .
git commit -m "first commit"
git remote add origin root@119.3.100.49:/root/git/hugo.git
git push -u origin master

推送后，在远程仓库中启动或重启nginx服务即可。
```
service nginx restart
```

看板娘放置方法

我用的方法其实是挺简单的，功能也比较少，还是懒得搞，主要是利用了pixi.js和pixi-live2d-display两个npm包进行的，我也没有用依赖cdn的方法，我直接把依赖项全部下载到static目录下了。

直接更改主题文件，定义canvas放置的位置：

在./themes/cactus/layouts/partials中新增一个文件live2d.html，内容如下

<div style="
position: fixed;
left: 0px;
bottom: 0px;
width: 250px;
height: 400px;
z-index: 99999;
opacity: 1;
pointer-events: none;">
<canvas id=canvas></canvas>
<script src="/js/live2dcubismcore.min.js"></script>
<script src="/js/live2d.min.js"></script>
<script src="/js/pixi.min.js"></script>
<script src="/js/index.min.js"></script>
<script src="/js/place.js"></script>
</div>

并修改./themes/cactus/layouts/_default/baseof.html文件内容如下：

...
    {{ end }}

    {{ partial "footer.html" . }}
    {{ partial "live2d.html" . }} # 新增 

</div>
...

在/static/js/中新增place.js文件，这个脚本用于加载模型并放置在canvas画布中，内容如下：

const cubism4Model = "/live2d/huli0622/huli0622.model3.json";
// 是live2d文件放置的目录/static/live2d/...
const live2d = PIXI.live2d;

(async function main() {
const app = new PIXI.Application({
  view: document.getElementById("canvas"),
  autoStart: true,

  transparent: true, // 画布透明 
  resizeTo: window
});

const model = await PIXI.live2d.Live2DModel.from(cubism4Model);

app.stage.addChild(model);

model.scale.set(0.15);
model.anchor.set(0.25,0.05);
})();

将依赖项下载到/static/js/中，可以利用wget工具，下载以下文件：

完成以上配置，看板娘就有啦。

live2d-example