0%

从wordpress迁移到hexo静态站点

接管局通知,个人站点不得有评论功能,原先wordpress+mysql的博客站点(搭建方式见这里)需要重构。干脆基于hexo搭建了静态站点,原先的文章已经迁移了过来,大家的评论只能放弃了。本文介绍hexo静态站点的搭建方法。

wordpress与hexo静态站点的优劣比较

静态站点的优点在于部署简单、性能优异,比如你可以将其部署在免费的github page上,甚至无须购买域名即可对外提供服务(你可以点击russelltao.github.io查看我的github页面)。再比如,公有云提供的静态站点服务,可以将其自动部署到CDN站点上(腾讯云的Hexo部署插件见这里),用户体验非常好。文章、图片等资源的备份也很简单,可以直接连同代码一起存放在git仓库中。

当然,静态站点的缺点也很明显,它自身无法处理用户输入的数据,比如文章的评论、阅读量等,需要借助第三方API服务才能实现。虽然类似的服务很多,但今年国家监管得很严,个人站点一旦发现评论就可能会被关站,因此,个人博客改用静态站点其实挺合适的。

静态站点通常以markdown格式写作,将.md文件渲染为.html文件,再发布到支持Http协议的Web服务器上,比如Apache、NodeJS或者Nginx。GoLang、Python等语言都有成熟的静态站点软件框架,而Javascript语言擅长前端UI界面的渲染,因此基于JS的Hexo框架渲染.md模板效果不错,尤其Hexo的中文文档相对较多,对国内用户更友好。Hexo有一个Next Theme主题非常好用,集成了很多常用插件。因此,我选择Hexo+Next搭建新的静态站点,并将原先的wordpress博客迁移过来,下面记录了相关步骤,供参考。

搭建hexo Next主题站点

你可以在自己熟悉的操作系统上进行内容创作,再将它发布到Linux服务器上。先来看如何构建静态站点的源码环境。

在windows上安装生成站点环境

安装NodeJS及hexo生成器,包括以下3步:

  1. 进入NodeJS官网下载安装包。
  2. 更换淘宝源,这样下载软件会快一些。
    1
    npm config set registry http://registry.npm.taobao.org
  3. 安装hexo:
    1
    npm install -g hexo-cli

建立博客站点

想好用于存放站点文件的目录名,例如blog,执行:

1
hexo init blog

进入hexo创建的blog目录中,再执行:

1
2
cd blog
npm install

完成后,这个站点的目录如下:

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

目录说明

  • source:所有博客文章(比如.md格式)、图片、视频等内容都在这里,目录层级不限。删除文章时,只要将.md及其引用资源(比如图片)删除即可。
    • _drafts:草稿放在该目录下,这些.md文章默认不会渲染到用于部署的public目录。
    • _posts:文章放在此目录下。如果你的文章很多,为了维护方便,你可以在此目录下继续构建多级子目录放置文章
  • themes:主题样式目录放在此处,比如接下来将要介绍的Next主题。
  • scaffolds:新建文章时,会基于该目录下的3个模板文件,构造文章、草稿和页面。
  • package.json:依赖软件包信息。
  • _config.yml:站点级的配置文件,比如:
    • 站点名称可以通过修改title和subtitle完成。

设置Next主题

默认的主题太难看,而hexo中最流行的Next主题功能非常强大,简单易用,适合新手入门。
安装主题很简单,首先将github上的Next主题放到themes目录:

1
git clone https://github.com/theme-next/hexo-theme-next themes/next

接着,将站点配置文件_config.yml文件中theme项修改:

1
theme: next

Next主题已经生效。

设置主题风格

目前Next有4种风格,可以通过修改next/_config.yml主题配置文件实现,例如修改为pisces风格:

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

如果想将站点底部的Hexo、Next字样消除,可以将footer中的powered置为false:

1
2
footer:
powered: false

如果显示站点创建时间,则可以更改since选项:

1
2
footer:
since: 2021

设置站点语言

将网站语言修改为中文,可以通过修改站点_config.yml文件完成,目前Next主题支持的语言如下表所示:

语言 代码 设定示例
English en language: en
简体中文 zh-Hans language: zh-Hans
Français fr-FR language: fr-FR
Português pt language: pt or language: pt-BR
繁體中文 zh-hk 或者 zh-tw language: zh-hk
Русский язык ru language: ru
Deutsch de language: de
日本語 ja language: ja
Indonesian id language: id
Korean ko language: ko

故修改为language: zh-CN即可。

迁移wordpress博客内容

迁移数据

首先,安装 hexo-migrator-wordpress 插件。

1
npm install hexo-migrator-wordpress --save

在 WordPress 仪表盘中导出数据(“Tools” → “Export” → “WordPress”)。注意,草稿里的文章建议删除后再导出,否则发布日期可能会导致插件异常
接着,将导出的xxx.xml文件导入hexo站点:

1
hexo migrate wordpress xxx.xml

这个插件问题很多,有些wordpress文章很可能导致migrate过程异常终止。出现这种问题时,我建议你先找到导致migrate抛异常的文章,做相关处理后再重新导出、migrate。

另外,即使migrate成功后,还需要大量的工作修复数据格式,包括更改代码、表格及段落格式等,如下文所描述的那样。

更改代码块格式

wordpress导出的代码段,仅用```来分隔,不会标注代码语言,这就无法使用语法高亮显示功能了。我们需要在``` 之后添加编程语言。比如,Nginx配置文件可以这么写:

1
2
3
4
``` nginx
location /a {
alias /d;
} ```

点击代码块支持语言查看所有支持的语言。

更改表格格式

默认表格迁移到markdown格式,每个行、列交汇处的数值是单行放置的!手动更改为markdown格式表格是极其痛苦的! 如果你在用VsCode编辑器,可以安装个插件Markdown Shortcut,它可以将导入的数据简单的转换为表格。

增加分类、标签页

分类页可以将所有文章的Category分类聚合成为独立的页面,供用户点击选择。同样,标签页可以将所有文章的Tag标签聚合为独立的页面,并通过字体大小、粗体等方式表达标签的引用次数,如下图所示:

生成这2个页面的步骤很简单,包括:

  1. 首先生成分类页和标签页:

    1
    2
    hexo new page categories
    hexo new page tags
  2. 修改2个页面的type值
    在新生成的source/categories/index.md文件中,添加type项:

    1
    2
    3
    4
    5
    ---
    title: categories
    date: 2021-01-29 10:17:39
    type: "categories"
    ---

    在新生成的source/tags/index.md文件中,同样添加type项:

    1
    2
    3
    4
    5
    ---
    title: tags
    date: 2021-01-29 10:17:44
    type: 'tags'
    ---
  3. 将2个页面添加到网站首页
    修改next/_config.yml文件,加入tags和categories页:

    1
    2
    3
    4
    menu:
    home: / || fa fa-home
    tags: /tags/ || fa fa-tags
    categories: /categories/ || fa fa-th

    其中,fa-tags等是图标样式,你可以在这里找到所有可用的图标。

    分隔文章摘要

Next主题有3种提取文章摘要在首页显示的方法,包括:

  1. 最好用(也是官方推荐的)的,是在文章中用<!-- more -->分隔内容。虽然这样最灵活,但很难保证首页有限摘要中含有图片。
  2. 在文章最前面的front-matter部分中添加description标签,标签中的内容会放在首页中以摘要方式显示。注意,这里添加图片时,不能使用markdown格式,而必须用<img src="…"/>这种方式!
  3. 由Next主题按照字符数自动形成摘要,比如:
    1
    2
    3
    auto_excerpt:
    enable: true
    length: 150
    这种配置会自动截断前150个字符,形成首页摘要。这个方法效果最差。

另外,我们通常会希望将图片显示在首页,让用户更直观的看到文章内容。而more截断、description这两种方式都有些问题。此时,可以使用photos标签实现这一功能,比如:

1
2
photos:
- /2014/10/07/front-matter-photos/1000.png

SEO优化

为了提高站点的访问率,Next主题也已经帮我们做了很多工作。

增加百度统计

可以借助百度或者谷歌的统计功能查看站点的访问情况(JS会将用户的访问数据传到谷歌、百度后台),比如了解下,我们的用户主要靠哪些关键词才搜索到站点。用法很简单,对于百度统计,在注册好帐户后,可以从下图中获取脚本ID:

再修改next/_config.yml文件:

1
baidu_analytics: xxxxx

设置好脚本ID即可。

设置keywords关键字

关键字对搜索引擎更友好,方便建立倒排索引时设置词汇权重。关键字分为站点与文章2类,设置方法如下:

  1. 站点级关键字
    站点配置文件_config.yml中可以设置keywords,多个关键字之间用英文逗号分隔。
  2. 文章关键字
    在文章最前方的front-matter中添加keywords项,其中填写关键字。

生成sitemap站点地图

为了方便搜索引擎收录站点的所有文章,你可以通过以下2步提升收录速度:

  1. 安装站点地图插件(详细用法见这里):
    1
    npm install hexo-generator-sitemap --save
  2. 将站点地图链接加入首页
    1
    2
    menu:
    sitemap: /sitemap.xml || fa fa-sitemap

这样,搜索引擎一经发现/sitemap.xml页面,就会迅速找到所有文章。

优化Next主题

Next主题本身很美观也很强大,但如果想定制个性化的页面,还需要修改CSS样式。同时,Next集成了很多第三方平台的功能,这需要协同注册第三方平台才能达到效果。下面总结下常用的主题优化设置。

分享到微信、微博等平台

使用Next主题默认的AddThis插件,注册帐号并排列分享顺序(比如默认Facebook、Twitter在最上方,国内用户可以将微博、微信优先级提前)。

最后在Next主题的_config.yml文件中,将AddThis中的pubid填入AddThis中:

1
add_this_id: ra-xxxxxxxxxxxxxxxxx

添加侧边栏头像

修改/themes/next/layout/_partials/sidebar/site-overview.swig文件:

1
2
3
4
5
6
7
8
<div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
{%- if theme.avatar.url %}
<a href="/关于陶辉/index.html"><img class="site-author-image" itemprop="image" alt="{{ author }}"
src="{{ url_for(theme.avatar.url) }}"></a>
{%- endif %}
<p class="site-author-name" itemprop="name">{{ author }}</p>
<div class="site-description" itemprop="description">{{ description }}</div>
</div>

显示页面的浏览进度

修改主题_config.yaml文件,可以让右下角多出1个回到页头的图标,并且显示文章浏览进度:

1
2
3
4
5
6
back2top:
enable: true
# Back to top in sidebar.
sidebar: false
# Scroll percent label in b2t button.
scrollpercent: true

开启文章底部的相关文章推荐

将related_posts下的enable置为true即可:

1
2
3
4
related_posts:
enable: true
params:
maxCount: 3

maxCount可以设置最多推荐的文章数

开启文章版权声明

编辑主题_config.yml配置文件,在footer中找到creative_commons,这里可以设置知识共享许可协议。creative_commons中含有以下版权许可声明:

如果你选择使用by-nc-sa,可以如下设置:

1
2
3
4
5
creative_commons:
license: by-nc-sa
sidebar: false
post: true
language: zh-CN

首页加入圆角矩形分隔

首页多篇文章之间的分隔并不明显,我习惯将每篇文章以矩形框显示。此时,可以修改Next主题中的next/source/css/_common/components/post/post.styl文件,找到use-motion中修改post_block的CSS代码:

1
2
3
4
5
6
7
.use-motion {
if (hexo-config('motion.transition.post_block')) {
.post-block, .pagination, .comments {
opacity: 0;
}
}
}

在post_block中加入矩形框,其中-webkit-box-shadow可以设置阴影的颜色和宽度,比如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.use-motion {
if (hexo-config('motion.transition.post_block')) {
.post-block{
opacity: 1;
border-radius: 20px;
margin-top: 40px;
margin-bottom: 20px;
padding: 15px;
-webkit-box-shadow: 0 0 5px rgba(51, 170, 51, .5);
-moz-box-shadow: 0 0 15px rgba(202, 203, 204, .5);
}.pagination, .comments {
opacity: 0;
}
}

开启文章字数统计及预估阅读时长

hexo-symbols-count-time插件提供了这一功能,使用它首先要安装插件:

1
npm install hexo-symbols-count-time

接着,在主题的_config.yml中开启它:

1
2
3
4
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: true

添加本地搜索功能

hexo-generator-searchdb插件提供了基于JS在本地内容中搜索的能力,使用时首先要安装插件:

1
npm install hexo-generator-searchdb

接着修改Next主题的_config.yml配置文件,打开本地搜索功能:

1
2
local_search:
enable: true

修改备案ICP号

国内的站点都需要备案号,并将公安备案号及图标放在网站的最底部。Next主题已经将这一功能内置,你可以在主题配置文件footer中的beian中,填入备案号和图标,比如:

1
2
3
4
5
6
7
footer:
beian:
enable: true
icp: <a href="https://beian.miit.gov.cn">浙ICP备xxxxxx号</a>
gongan_id: 3xxxxxxxxxx
gongan_num: 浙公网安备 3xxxxxxxxx号
gongan_icon_url: /images/备案图标.png

部署静态站点

接下来介绍静态站点的3种部署方式。

本地测试静态站点

在部署到生产环境前,首先要在本机开发环境中验证页面功能。以下3项最为常用:

  1. 生成静态站点文件
    将.md文章在public文件夹下生成HTML站点,可以使用如下命令:

    1
    hexo g

    需要注意,有时public下会有上一次生成的残留文件,可以用clean命令清理:

    1
    hexo clean
  2. 部署本机测试环境

接着,就可以s命令在本机启动NodeJS服务,通过默认的4000端口测试内容了,比如http://localhost:4000,这样,在本机的浏览器访问即可调试,非常方便。当然,你可以通过-p选项修改监听端口,还可以通过--draft选项测试草稿箱中的文章:

1
hexo s --draft -p 8080
  1. 发布到生产环境
    测试通过后,就可以通过d命令部署站点了:
    1
    hexo d

究竟将public文件夹部署到哪里,下面一一来看。

部署到免费的github page上

我们通常会将源代码部署到github上,但github还提供了一种功能,可以将静态页面部署在其上。当你用自己的github帐户名建立page仓库后,就可以通过hexo d命令一键部署站点了,非常方便。

当然,部署前先要安装插件:

1
npm install hexo-deployer-git --save

接着,修改站点(不是Next主题)的_config.yml文件,填入仓库地址:

1
2
3
4
deploy:
- type: git
repository: git@github.com:yourgithubname/yourgithubname.github.io
branch: master

** 注意:git不能是https协议,否则需要输入用户名、密码!**

部署到云服务器通过Nginx提供服务

如果你有Linux云服务器,可以用Nginx等Web服务器提供静态文件服务(通过root指令,具体的配置方式参见这里)。此时部署方式可以通过Linux服务器默认就提供的sftp协议上传到服务器中。

还是先安装插件:

1
npm install hexo-deployer-sftp --save

接着修改站点配置文件。注意,如果你想将静态站点一键部署到多个服务器上也是可以的,比如:

1
2
3
4
5
6
7
8
9
10
deploy:
- type: sftp
host: xxx
user: xxx
pass: xxx
remotePath: xxx
port: 22
- type: git
repository: git@github.com:yourgithubname/yourgithubname.github.io
branch: master

至此,每当你修改完文章,就可以通过hexo d完成站点部署,非常方便。

添加评论

Gitalk是个不错的选择,主要原因有:

  • 技术类博客的用户都有github账号,登录方便,同时还能排除掉非技术用户的干扰。
  • 不用自己搭建高可用的评论数据库。
  • Next主题支持gitalk。

搭建也很简单,

  1. 首先建立一个github仓库,用它的issues来存储评论。
  2. 其次建立一个APP,生成client secret用于访问github仓库。
    3、初始化github仓库,由于每篇文章都需要手动添加一条issue,比较麻烦。通常会将sitemap.xml中所有URL文章找到,再利用github的token写一个简单的自动化程序来做。

在第3步需要注意,比如博客地址为https://www.taohui.pub/abc.html,那么自动化程序为每篇博客生成labels时,除了Gitalk外,要对/abc.html进行md5生成标签,而不是完整的URL,否则gitalk是找不到评论的。

当然,由于github可能被墙,会导致评论不可用。所以leancloud上的valine也很好用,而且它支持匿名评论。

小结

静态站点不需要数据库,也不需要php、java等编程语言基于模板生成动态页面,所以其安全性非常高,部署时只需要将public文件夹拷贝到目标服务器即可。

Hexo是基于Javscript+Nodejs软件生成静态站点的,它可以将Markdown等格式的文章渲染为HTML文件,还支持第三方插件,可以一键部署到远程服务器。

Next主题是Hexo上的首选主题,集成了许多插件,将备案号、本地搜索、搜索引擎统计、站点地图、文章推荐、版权声明、浏览进度、文章字数统计等功能都集成了进去。而且,我们可以很方便地修改主题样式。如果你的站点没有动态内容,或者通过第三方插件可以完成相应功能,那么Hexo+Next是个很好的解决方案!