Blog静态部署

升级改造思路：

为解决静态配置转移设备的问题

把hexo部署到VPS上，实现“随时编辑，随时推送，好迁移”

然后再优化一下评论系统，看看能不能不注册就评论什么的

把我喜欢的wordpress主题，改到hexo上面去。纯手撸一些新样式。

增加那个我一直很喜欢的说说页面的功能

CDN用cloudfare，增加一些防护性

、

当前的部署方式，github上，本地推送，腾讯云域名。cloudflare的DNS 和 https 证书

github pages使用cloudflare加速自定义域名概要 - 彼时今日 - 博客园 (cnblogs.com)

0x01 系统配置

腾讯云服务器，CentOS系统

整体布置思路：

为了能够在不同设备上都能进行文章的管理和推送，我将Hexo博客系统搭载在腾讯云服务器上。域名是腾讯云买的，所以需要进行备案。CDN是cloudfare提供的服务，这样可以进行一些防护，并且能够隐藏真实的公网IP。域名解析也是cloudfare。

整个blog回归静态博客，最重要的原因是我喜欢专注于文章内容，简洁。其次是出于安全性的考虑。

把hexo的目录，当成nginx的工作目录就好了。在xftp里面，直接放新写的markdown文件进去就好。（vscode ssh远程连接也是个好办法）

一点腾讯云小坑

防火墙打开21、22端口

ssh认证方式改为允许密码认证。passedAuthentication=YES

安装hexo

1	sudo npm install hexo-cli -g

为了让后续初始化 Hexo 命令成功执行，你需要为你的 Hexo 创建一个新文件夹，文件夹名字按喜好自选。

1 2	#创建文件夹 mkdir 你的文件夹名

使用 cd 文件夹名 进入刚刚创建的 Hexo 文件夹，并初始化 Hexo，让系统在这个文件夹内创建 Hexo 运行所需要的模板文件。

1 2	#初始化 Hexo hexo init

其中，_config.yml、source/、themes/ 这个三个文件 / 文件夹值得你多注意。其中 _config.yml 是博客的基本配置文件，你可以在这个文件里修改博客的基本信息，比如博客名、博客作者、博客网址；博客中的文章等用户资源都存放文件夹 source/ 中；文件夹 themes/ 是存放博客主题文件的文件夹，如果你要修改主题，你就需要把所下载的主题文件放在这里。

现在模板文件已经创建完成，你可以通过 hexo g 命令让 Hexo 根据模板文件生成静态网页了。系统会在 Hexo 文件夹内新创建一个 public/ 文件夹，你可以在这个文件夹内看到生成的静态网页相关文件。

如果你想立马预览网页，使用 hexo s 启动 Hexo 服务端，在浏览器打开 服务器IP:4000 预览网页，不过此步骤需要你提前打开服务器 4000 端口，并保证 4000 端口没有被其他服务占用。

#生成静态网页
hexo g
#启动 Hexo 服务端
hexo s

Nginx 安装配置

yum install – y epel-release
yum install nginx
systemctl start nginx
systemctl enable nginx
vim /etc/nginx/nginx.conf

把 root 这一行改成hexo的 public/ 文件夹目录，注意最后不要加斜杠；在 server_name 填上你的域名

1	service nginx restart

打开浏览器，输入你的域名，你就可以看到 Hexo 初始网页了。

有一个小坑，nginx conf的默认user是nginx。这样去访问的时候会出现403的报错。（也有可能因为文件权限的问题，文件在root下，所以可能会报404的错。）所以需要将nginx配置文件那行修改为root。
1
vim /etc/nginx/nginx.conf
1
service nginx restart

0x02 Hexo 主题配置

主题美化比较复杂，可以在本地搭建一个hexo服务，一边修改一边实时预览，比较稳妥。

也可以直接vscode远程连接到服务器上，直接修改。集成xftp、xshell、sublime一体

Volantis主题

Volantis: 主题配置 - Volantis

0x03 静态 hexo 说说功能

Lete114/hexo-artitalk-static: Artitalk 静态版，本地编写说说(就像写文章一样)，需要 hexo g 生成 (github.com)

添加ejs 样式（自定义）

1	/root/Blog/themes/volantis/layout/artitalk.ejs

<%- partial('_pre') %>
<div class='l_main<%- page.sidebar == false ? ' no_sidebar' : '' %>'>
    <%- partial('_partial/article', {post: page, index: false}) %>
</div>
<%- partial('_partial/side') %>

安装
1
npm install hexo-artitalk-static

创建说说文件

在你的博客根目录的 source/_data 创建文件 artitalk.yml。以后你的所有说说都会写在这里面

## 说说格式
- content: Hexo-Artitalk-Static 真不错，没有后端，没有请求，速度是真的快
- content: |
    如果你的 JavaScript 基础还不错
    你还可以为 Hexo-Artitalk-Static 写自定义插件，还可以自定义说说的模板
    自由度是真的高(也可以安装别人的插件)