Github和云服务器的部署和配置
部署
本地部署
部署Hexo需要安装node.js和git的环境支持.
下载链接
安装
软件安装
安装任意在路径就好啦,环境变量会自动添加,无脑下一步就完事了.
在桌面右键进入Git Bahs Here.
1 | node -v 查看node.js版本 |
Hexo安装
在D盘根目录创建blog文件夹,进入文件夹右键Git Bahs Here.
1 | npm install -g hexo-cli 全局安装hexo-cli(需要管理权限) |
Linux
Hexo使用
常用命令
1 | hexo generate 生成静态文件 可简写g |
本地部署
在blog文件夹,右键Git Bahs Her
1 | hexo clean |
在浏览器输入127.0.0.1:8080,就能看到Hexo了.
远端部署
本地
配置git的信息
username 和 email
1 | git config --global user.name "你要设置的名字" |
生成SSH密钥
在本地生成SSH密钥文件,把本地的公钥文件上传到VPS,可以将生成的静态文件推送到服务器的指点位置.
我直接回车就好了,不需要设置密码.
1 | ssh-keygen -t rsa -C "你刚刚设置的邮箱" |
在当前用户的根目录下的.ssh文件夹可以看到两个文件id_rsa.pub和id_rsa.
复制id_rsa.pub里面的内容.
云服务器
git配置
安装git
1 | 安装 |
新建git用户
1 | 添加新用户 |
添加git用户权限
1 | 编辑sudoers |
切换至git用户
创建~/.ssh/authorized_keys.
1 | 切换用户 |
编辑authorized_keys
把之前复制的id_rsa.pub内容粘贴进去
1 | 编辑 |
仓库配置
创建仓库目录
切换至root用户.
1 | 创建目录 |
创建网站根目录(推送目录)
1 | 创建目录 |
建一个空白的git仓库
1 | #进入目录 |
创建一个新的 Git 钩子,用于推送部署
1 | 编辑 |
nginx配置
安装
1 | 直接安装 |
修改配置文件
1 | 编辑 |
推送部署
hexo配置
找到博客根目录,打开站点文件_config.yml,找到depoly修改成下面的内容
1 | deploy: |
推送上服务器仓库
成功推送到服务器,输入域名就能看到hexo啦.
1 | 安装插件 |
SSL
acme
acme.sh 实现了 acme 协议支持的所有验证协议,一般有两种方式验证:http 和 dns 验证。
- http 验证:http 方式需要在你的网站根目录下放置一个文件,来验证你的域名所有权。
- dns 验证:dns 方式,在域名上添加一条 txt 解析记录,验证域名所有权。
安装acmesh
1 | curl https://get.acme.sh | sh |
DNSPOD
打开我的-API密钥-DNSPod Token 创建密钥
- acme.sh的默认server是Let’s Encrypt,现在已经修改为zerossl,要通过邮箱注册
1 | 进入acme目录 |
其他dns参照
nginx
ngixn创建证书目录
1 | 创建证书目录 |
配置nginx文件
1 | 编辑 |
重启
1 | systemctl restart nginx |
Github
登录
Github账号程序员应该人手都有的吧,没有注册一个就好了!
注册成功,登录后新建一个仓库,用来保存推送静态网页文件。
打开头像左边的加号,New repository
Repository name的名字格式xxx.github.io
仓库类型公开Public
完成创建,create repository
密钥
添加本地SSH密钥
- 打开头像,settings
- SSH and GPG keys
- New SSH key
- Title随意,把id_rsa.pub的内容粘贴到Key
- 完成添加,Add SSH key
推送部署
Hexo配置
找到博客根目录,打开站点文件_config.yml,找到depoly修改成下面的内容
1 | deploy: |
推送上Github仓库
成功推送到服务器,输入仓库名就能看到hexo啦.
1 | 安装插件 |
配置
主题
Butterfly
在博客根目录克隆项目
1 | git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly |
使用主题
修改_congin.yml,把主题改成butterfly
1 | theme: butterfly |
安装插件
pug 以及 stylus 的渲染器
1 | npm install hexo-renderer-pug hexo-renderer-stylus --save |
减少升级主题后带來的不便,请使用以下方法(防止覆盖)
- 将主题文件的_config.yml复制到博客根目录,改名为_config.butterfly.yml.
- 原本的_config.yml不要删除.
- _config.yml和_config.butterfly.yml会互相融合.出现同样的_config.butterfly.yml的优先级更高
看板娘
下载live2d依赖包
1 | npm install --save hexo-helper-live2d |
在Hexo的根目录新建一个live2d_models文件夹,将下载的模型放进去(一个模型一个文件夹)
在_config.ym文件添加以下配置参数
1 | # Live2D |
Aplayer
安装插件
1 | npm install --save hexo-tag-aplayer |
使用
- 開啟主題的 aplayerInject
1 | # Inject the css and script (aplayer/meting) |
插入Aplayer html
- 参数
| 选项 | 默认值 | 描述 |
|---|---|---|
| id | 必须值 | 歌曲 id / 播放列表 id / 相册 id / 搜索关键字 |
| server | 必须值 | 音乐平台: netease, tencent, kugou, xiami, baidu |
| type | 必须值 | song, playlist, album, search, artist |
| fixed | false |
开启固定模式 |
| mini | false |
开启迷你模式 |
| loop | all |
列表循环模式:all, one,none |
| order | list |
列表播放模式: list, random |
| volume | 0.7 | 播放器音量 |
| lrctype | 0 | 歌词格式类型 |
| listfolded | false |
指定音乐播放列表是否折叠 |
| storagename | metingjs |
LocalStorage 中存储播放器设定的键名 |
| autoplay | true |
自动播放,移动端浏览器暂时不支持此功能 |
| mutex | true |
该选项开启时,如果同页面有其他 aplayer 播放,该播放器会暂停 |
| listmaxheight | 340px |
播放列表的最大长度 |
| preload | auto |
音乐文件预载入模式,可选项: none, metadata, auto |
| theme | #ad7a86 |
播放器风格色彩设置 |
- 插入到主题配置文件的inject.bottom中
1 | inject: |
BILIBILI追番
安装
1 | npm install hexo-bangumi-butterfly --save |
升级
1 | npm install hexo-bangumi-butterfly --update --save |
配置
_config.yml中添加以下内容
1 | bangumi: |
- enable: 是否启用
- path: 番剧页面路径,默认bangumis/index.html
- vmid: 哔哩哔哩番剧页面的 vmid(uid),如何获取?
- title: 该页面的标题
- quote: 写在页面开头的一段话,支持 html 语法,可留空。
- show: 初始显示页面:0: 想看, 1: 在看, 2: 看过,默认为1
- loading: 图片加载完成前的 loading 图片
- metaColor: meta 部分(简介上方)字体颜色
- color: 简介字体颜色
- webp: 番剧封面使用webp格式(此格式在safari浏览器下不显示,但是图片大小可以缩小 100 倍左右), 默认true
- progress: 获取番剧数据时是否显示进度条,默认true
使用
1 | # 更新番剧数据,在 hexo generate 或 hexo deploy 之前使用 |