New Blog, New Beginning
之前的博客使用的Node.js,Hexo和Next主题版本很旧了,导致了很多的兼容性问题。因此我重新配置了我的博客,这篇文章记录了我的配置和开发过程。
安装Hexo
安装Node.js,使用命令
node --version
查看安装的版本,我安装的版本是16.17.0。使用
npm install -g hexo-cli
安装Hexo。使用如下命令初始化完成最基本的建站。
1
2
3hexo init <BlogDir>
cd <folder>
npm install
我的Hexo版本是 6.3.0
更多详细的命令请参考参考文档。
启用Next主题
hexo next主题目前一共有三个版本:最早的版本,第二个版本,这两个版本均已停止维护,目前还在维护的是最新的版本,这三个版本之间的关系请参考这篇文章。
后面的所有配置均基于最新的版本。
下载安装Next主题
1
2cd hexo-site
git clone https://github.com/next-theme/hexo-theme-next themes/next在
Hexo站点配置文件
设置theme: next
以启用Next主题。在
Next主题配置文件
设置scheme: Pisces
短链接
Hexo默认以Markdown文件名作为链接名,如果文件名有中文,则需要对中文进行转义,此外,还有可能导致特别长的链接名,修改文章题目导致文章题目与文件名不匹配,修改文件名会导致文章Url修改,以上都不利于搜索引擎搜索。
所以我选择将文件名哈希后,使用哈希值作为超链接的地址。这样文章Url永远不变,方便搜索引擎搜索。
安装hexo-abbrlink:
1 | npm install hexo-abbrlink --save |
在Hexo站点配置文件
设置
1 | permalink: /post/:abbrlink/ |
更多内容可以参考这个文档
修改博客图片连接
使用hexo-abbrlink
后,默认的Markdown添加图片的语法![image description](address/image.jpg)
中address
没有被转换,导致无法显示图片。参考之前的hexo-asset-image
插件,我自己写了一个新的插件以解决这个问题。
安装插件:
1 | npm install https://github.com/littlesevenmo/hexo-asset-image2.git --save |
在Hexo站点配置文件
设置
1 | post_asset_folder: true |
这样你的博客文章结构就会如下所示:
1 | YourBlogDoc |
使用![image description](YourBlogDoc/image.jpg)
或![image description](D:/<Absolute_Addr>/YourBlogDoc/image.jpg)
插入图片image.jpg
。
使用hexo clean
,hexo g
,hexo server
预览即可。
博客外观修改
修改超链接颜色
在<BlogDir>/themes/next/source/css/_common/components/post/post-body.styl
添加
1 | .post-body p a{ |
删除共有X篇文章
在<BlogDir>/themes/next/source/css/_common/components/post/post-collapse.styl
中.
在.collection-title
中添加display:none
1 | .collection-title { |
删除归档中的年、日期
在<BlogDir>/themes/next/source/css/_common/components/post/post-collapse.styl
中.
在.collection-year
中添加display:none
1 | .collection-year { |
在<BlogDIr>/themes/next/layout/_macro/post-collapse.njk
中
删除
1 | <div class="post-meta-container"> |
删除Hexo强力驱动
在Next主题配置文件
设置
1 | footer |
文章标签由#为标签图标
在Next主题配置文件
设置tag_icon: true
设置分类、标签等
在
Next主题配置文件
设置要启用的分类,如1
2
3
4
5
6
7
8
9menu:
home: / || fa fa-home
about: /about/ || fa fa-user
tags: /Tags/ || fa fa-tags
categories: /Categories/ || fa fa-th
archives: /archives/ || fa fa-archive
#schedule: /schedule/ || fa fa-calendar
#sitemap: /sitemap.xml || fa fa-sitemap
#commonweal: /404/ || fa fa-heartbeat创建分类目录文件
1
2
3cd <BlodDir>
$ hexo new page categories在
<BlogDir>/source/categories/index.md
中,文章头处添加1
type: "categories"
这样该页面内的内容就是分类内容。Tag同理。
在博客文章头处添加
1
2
3
4
5categories:
- Your categorie
tags:
- Tag1
- Tag2即可为文章设置分类和标签。
AboutMe的内容可以写在About页面里。
关闭动画
在Next主题配置文件
设置
1 | motion: |
您也可以在motion
中修改其他的动画配置。
启用文章加载进度条
在Next主题配置文件
设置
1 | pace: |
启用数学公式
原有的数学公式渲染插件部分语法与Markdown语法不兼容,因此我使用pandoc渲染。
安装pandoc
卸载自带的数学公式编辑插件
1
npm uninstall hexo-renderer-marked
安装使用pandoc的插件
1
npm install hexo-renderer-pandoc
在
Next主题配置文件
设置启用mathjax1
2
3
4mathjax:
enable: true
# Available values: none | ams | all
tags: none在想要使用Mathjax渲染的博客文章头中标记
1
mathjax: true
在
Hexo站点配置文件
设置1
2pandoc:
pandoc_path: C:/Program Files/Pandoc/pandoc.exe
添加搜索
本地搜索
安装搜索插件
1
npm install hexo-generator-searchdb --save
在
Hexo站点配置文件
设置1
2
3
4
5search:
path: search.xml
field: post
content: true
format: html在
Next主题配置文件
设置1
2local_search:
enable: true
当点击搜索时,需要下载索引文件search.xml
然后再进行搜索。
不需要手动更新索引,hexo g
时会自动更新。
优点:
- 索引文件
search.xml
与博客共存,稳定可靠。 - 无搜索限制
缺点:
- 博客数量多的时候,
search.xml
文件会很大,加载慢。
使用Algolia搜索
有两个插件支持Algolia搜索:hexo-algolia
与hexo-algoliasearch
,前者只能搜索文章标题,而后者能搜索文章内容。我在英文站点使用后者。
在Algolia中创建一个
index
记录
Application ID
,Search-Only API Key
,Admin Key
安装
npm install hexo-algoliasearch --save
在
Hexo站点配置文件
设置1
2
3
4
5
6
7
8
9
10
11
12
13
14
15algolia:
appId: "Your App ID"
apiKey: "Your Search Only API Key"
adminApiKey: "40321c7c207e7f73b63a19aa24c4761b"
chunkSize: 5000
indexName: "Your Index Name"
fields:
- content:strip:truncate,0,500
- excerpt:strip
- gallery
- permalink
- photos
- slug
- tags
- title在
Next主题配置文件
设置1
2
3
4algolia_search:
enable: true
hits:
per_page: 10
我认为如果找到了就显示找到了的结果,而不必像Google,Baidu一样显示找到了XXX个
在XXX毫秒内,如果没找到就显示没找到。在<BlogDir>/themes/next/source/js/third-party/search/algolia-search.js
中,删除
1 | instantsearch.widgets.stats({ |
更新索引:
1 | hexo algolia |
使用Algolia搜索的优点:
- 无需预加载,速度快
- 国内可能会遇到网速慢搜索速度慢的情况。
缺点: 1. 免费版每个月有10000次搜索限制。 2. 每次更新文章都需要新建索引
参考文档:Next参考文档,hexo-algolia参考文档,Hexo Algoliasearch
添加评论系统
Next主题自带的评论系统是valine,是一个没有后端的评论系统,据说还有一些信息安全问题。因此我使用waline,需要先遵循waline的配置文档设置需要的组件,此外还要安装插件Hexo NexT Waline
1 | npm install @waline/hexo-next --save |
在Next主题配置文件
设置:
1 | # Waline Config File |
如果不想在某个页面启用评论,请在文章头处设置
1 | comments: false |
默认的评论说明语是Waline
,显得很奇怪,在<BlodDir>\themes\next\languages\en.yml
中,post
下添加
1 | post: |
即可修改Waline
为Comments
我的中文博客使用的是Leancloud 国内版+GitLab,我的英文博客使用的是LeanCloud国际版+GitHub
设置FTP上传<弃用>弃用>
目前我用虚拟主机来托管我的博客,需要使用FTP上传文件,根据ChaosTong/hexo-deployer-ftpsync,我简单修改了一下,以适应最新的node.js。
安装:
1 | npm install git@github.com:littlesevenmo/hexo-deployer-ftpsync.git --save |
在Hexo站点配置文件
设置
1 | deploy: |
强制使用SSH访问博客<弃用>弃用>
使用FTP上传文件名为.htaccess
的文件到站点的根目录,内容为
1 | RewriteEngine On |
由于在hexo d
之后,public
文件夹的内容会发生变化,每次都要重新复制粘贴再上传,我是用alias命令(在Windows
PowerShell中为function)一次执行多个命令,如下:
1 | function blogd {cd D:\Blog ; hexo clean ; hexo g ; hexo algolia; Copy-Item -Path .\.htaccess -Destination .\public\; hexo d} |
使用Git上传<英文博客在用>英文博客在用>
我的虚拟主机发布公告说,因为亏损严重,要停运了。于是我不得不把博客迁移到其他地方。我的英文站点主要面向国外的用户,因此我把它放在了Github Page上,中文站点目前托管在阿里云对象存储上。
GitHub Page 设置<英文博客在用>英文博客在用>
我的英文博客托管在GitHub Page,因此我需要在域名解析中添加一条解析,我在阿里云域名解析中添加
1 | @ A 默认 185.199.111.153 10 分钟 |
在GitHub Page Custom
domain选项下,添加www.<yourdomain>.com
,并勾选Enforce HTTPS
。
域名邮箱设置
很早之前我在QQ邮箱域名邮箱中设置了我的中文博客域名的域名邮箱。现在QQ邮箱已经不再支持域名邮箱,转而可以使用腾讯企业邮箱。具体请查看这篇文章
我英文博客域名的域名邮箱使用的是GMail,首先要设置转发,在https://forwardemail.net/中,登记你的域名,并且在域名解析中设置如下解析
1 | @ MX 默认 mx1.forwardemail.net | 10 |
在这里我设置的是所有发往XX.mydomain.com
下的邮件都转发到GMail,如果你只想转发某几个邮箱,例如转发hello@yourdomain.com和support@yourdomain.com到user@gmail.com你可以在TXT中设置
1 | @ TXT 默认 forward-email=hello:user@gmail.com,support:user@gmail.com |
阿里云对象存储OSS设置<中文博客>中文博客>
云主机还是太麻烦,现在阿里云的对象存储支持静态博客了。我又设置了一个阿里云OSS的博客。
- Bucket名称:随便写
- 地域:如果要在国内访问,一定要选择
有地域属性
,地区随便选。 - 存储类型:
标准存储
或者低频访问存储
均可。我选的标准存储。 - 存储冗余类型:
本地冗余存储
或者同城冗余存储
都行。 - 读写权限:一定要选择公共读
- Bucket功能中所有的选项我全都没有选。
完成后进入到你的Bucket。在Bucket配置-域名管理中,绑定你的域名。
在数据管理-静态页面中,设置默认首页为index.html
,设置子目录首页为开通
,我设置文件404规则为Redirect
,可以按需修改。
在Hexo目录下安装上传插件:
1 | $ npm install hexo-deployer-ali-oss --save |
在Hexo站点配置文件
中设置部署:
1 | deploy: |
然后就可以用hexo d
将博客上传到OSS上了。
OSS上的博客需要用户通过自己的域名来访问,在OSS-Bucket列表-博客OSS-Bucket配置-域名管理中,绑定域名并CNAME域名到OSS的访问地址。至此,就可以通过该域名访问OSS上的博客了。
配置阿里云CDN加速
使用阿里云的CDN加速可以优化在全球各地访问网站的速度,并可以强制通过HTTPS访问。
添加域名
- 业务信息:加速区域可以根据需要选择,我选择了全球,加速域名选择博客的域名(我的是www.windsings.com),业务类型选择图片小文件。
- 源站信息:选择OSS域名,优先级:主;权重:默认为10,不用管;端口:是CDN访问源站(在这里是OSS)的方式,可以选择80或者443,这两个都可以。我选的是443。
点击下一步后,会跳转到推荐配置,这里不用管,直接返回到CDN-域名管理。此时会看到刚才添加的域名,在CNAME栏下,有一个地址,通过这个地址访问,就是CDN加速访问了。通过源站信息下的域名访问,就是不通过CDN加速访问。
返回到域名解析,添加CNAME解析,主机头为www
,值为CNAME下的CDN加速访问地址。稍等后刷新CDN域名管理页面,可以看到CNAME状态变为已配置。
开启HTTPS:首先需要申请一个免费的证书,然后在域名管理-HTTPS配置中,开启HTTPS证书,并设置强制跳转HTTP->HTTPS
。
流量限制:在域名管理-流量限制中,设置CDN最大流量限制。
在DNS解析中,设置主机记录@
显性URL转发到
https://www.windsings.com
,主机记录www
CNAME到CDN地址
。
以上各项在我本地测试的结果是0 Error,0 Warning