hexo的使用
背景
前几年搭建了博客,但是一直都没有投入编写内容,最近又捡起来重新折腾了一下,重新梳理了一下hexo的使用,加深了理解,在此记录一下做个备忘。
一、安装与使用
1. 安装 Hexo CLI
1 | npm install -g hexo-cli |
2. 初始化博客项目
1 | hexo init blog |
3. 安装并启用主题
个人喜欢Next主题的样式,因此这里选用Next主题
1 | # 使用npm安装主题 |
修改_config.yml
中的theme
,以启用next主题
1 | theme: next |
可以在_config.next.yml
中修改scheme
以切换系统样式,个人喜欢gemini
的设计
1 | scheme: Gemini |
4. 创建文章
1 | hexo new "文章标题" |
生成文件位于:source/_posts/文章标题.md
5. 本地预览
1 | hexo server |
访问:http://localhost:4000 进行本地预览
二、推荐插件
1. hexo-generator-sitemap
部署/运行时会生成sitemap
执行npm i hexo-generator-sitemap
安装
并在配置文件_config.yml
中添加以下配置,重新编译运行并访问http://localhost:4000/sitemap.xml即可看到网站地图的输出了
1 | sitemap: |
2. hexo-generator-searchdb
开启本地搜索功能
执行npm i hexo-generator-searchdb
安装
并在配置文件_config.yml
中添加以下配置,重新编译运行后点击菜单栏的“搜索”按钮,即可搜索站内博客
1 | search: |
三、部署与SEO优化
部署方案
一开始采用GitHub托管,有提交自动触发构建并部署,然后域名解析到GitHub部署页面的方案。但是由于gfw,墙内访问比较困难(公司破网挂不挂梯子都很难打开自己的博客),且添加评论时,会遇到跨域问题不好解决。遂改为在服务器上打包构建,用nginx部署。
在服务器上拉取仓库并执行npm i
安装依赖,在仓库根目录创建部署脚本deploy.sh
1 |
|
输入bash /path/to/deploy.sh
即可执行部署脚本自动打包构建。
证书申请
配置nginx之前,还需要注册一下证书以开启https协议。
首先确保/etc/ssl/certs
、/etc/ssl/private
目录存在,若不存在,执行以下命令创建目录并赋予权限
1 | mkdir -p /etc/ssl/private |
执行以下命令签发证书,指定letsencrypt服务可以不用注册邮箱,且支持自动续期
1 | # 先停止nginx服务 |
nginx配置
接下来在nginx配置中添加以下配置,再重载即可访问部署后的博客页面了
1 | server { |
SEO优化
SEO优化比较复杂,只是记录下自己做过的操作,还在研究学习中。
以谷歌搜索为例,访问地址:https://search.google.com/search-console,输入要索引的域名,谷歌会返回一个校验码文件。创建一个静态文件目录source/static
存放这个文件。
并在hexo配置文件中添加跳过渲染内容,避免部署后访问校验文件时出现内容嵌套在博客框架中,导致校验不通过的问题。重新打包并访问https://your.domain.com/googledxxxxxxxxxx应该能看到输出google-site-verification: googledxxxxxxxxxx.html
。
1 | skip_render: |
站点验证成功后还需要添加一下sitemap,这样谷歌可以知道需要抓取的子页面有哪些。若安装了上文的sitemap插件,可在ng添加如下配置,访问https://your.domain.com/sitemap
时即可直接重定向到https://your.domain.com/sitemap.xml
1 | ... |
然后在谷歌控制台中找到并打开“站点地图”菜单栏,在“添加新的站点地图”中输入sitemap
,点击提交即可。
四、开启站内评论
这里选用twikoo作为站内评论组件 (需要next主题8.x
版本支持)
先在服务器上启动服务,访问ip:port若看到输出Twikoo 云函数运行正常,请参考 https://twikoo.js.org/frontend.html 完成前端的配置
则为启动成功了
1 | docker run -d \ |
为了避免跨域,这里用nginx把twitoo代理转发到跟博客同域名下,在nginx博客配置部分添加如下内容
1 | ... |
然后在博客根目录执行npm i hexo-next-twikoo
安装twikoo组件,在next配置文件中添加如下配置,重新打包部署后访问博客页面应该就能看到站内评论组件了
1 | # Multiple Comment System Support |