博客网站升级改造

2022-10-28 14:47:38 浏览数 (1)

背景

之前搭建的个人博客网站于 2020 年 8 月停更，不觉间，时间已过去了两年时间。

这个五一，想着将之前在语雀的一些文章输出誊到博客。 于是跟着之前懵懂产出的三篇博客搭建记录为引，万万没想到，写的真是有点糙，之前的项目不能友好的启动了。

在经过一番错误查找后，由于clone的主题以及修改的主题文件代码未成功提交，项目再次启动缺失主题文件，不能复原。

然后就想着，索性重新建一下吧，为以后能记录生活、做个笔记提供一个温暖的床。 这篇博客用来记录重新搭建博客的每一个步骤，每一个旅程，每一个错误，走一步写一步，不让悲剧重现。

初次预览

依然使用 HEXO 搭建。本次搭建是在重新阅读了一遍 HEXO 官方文档开始的。 本地需要 Node 环境以及 Git 环境即可。 然后，本地全局安装 hexo-cli,我的本地版本为：4.3.0 找到某一目录，依次执行以下操作，初次搭建成功。

代码语言：javascript复制
mkdir blog
cd blog
npm install -g hexo-cli
hexo init liugezhou // 目录介绍略
cd liugezhou
npm install
hexo new "just test it " //source下新建一个博文
hexo new page -p about/index "About me" //source下新建about目录,index.md文件，博文名称为 About me
hexo g   // 生成静态文件
hexo s   // 本地启动，预览内容
hexo d   // 网站部署，暂时掠过
hexo clean  //清除缓存文件db.json和public

自定义配置文件路径

目录中，最重要的一个配置文件是_config.yml,官方提供一个命令，可以不使用默认的文件配置 hexo server --config custom.yml hexo generate --config custom.yml,custom2.yml 后期直接修改themes配置即可。

新建文章注意点

hexo new 的时候，默认使用的是 post 布局，这是在_config.yml 中配置的，我们可以修改 scaffolds 下的 post 布局，也可以新建一个布局(blog.md,使用 hexo new blog “my custom blog”)，想要默认使用新布局的话，直接修改_config.yml中的default_layout设置 即可。 post 为新文章 page 为新的页面 draft 为草稿文件。可通过 hexo publish <fileName>命令移动到_post 文件下

站点部署(这里记录了在部署过程中的两个问题以及解决流程)

部署此站点，不占用之前已被使用的github.io，在 Github 上新建一个项目名称为 blog,然后根据github中提示在我们刚刚新建的项目下依次执行：

代码语言：javascript复制
git init
git add .
git commit -m 'first commit'
git branch -M main
git remote add origin 'Your repository'
git push -u origin main

然后进入到Travis CI,为自己新建的项目 blog 添加配置，过程略,参考。 (配置过程中遇到信用卡的问题，鼓捣了半天) 注册新建成功后： 回到 我们本地的blog 项目，根目录下新建 .travis.yml

代码语言：javascript复制
sudo: false
language: node_js
node_js:
  - 12 # use nodejs v10 LTS
cache: npm
branches:
  only:
    - master # build master branch only
script:
  - hexo generate # generate static files
deploy:
  provider: pages
  skip-cleanup: true
  github-token: $GH_TOKEN
  keep-history: true
  on:
    branch: master
  local-dir: public

  • 在代码推送后，travis 控制台报错：The engine “node” is incompatible with this module. Expected version “>=12.13.0”. Got “10.24.1”，由于使用最新的hexo版本，node版本要求为12以上，于是修改 上述文件的node_js 版本为 12

然后，再次提交代码，并没有触发 travis 的 job，于是继续提交代码，travis 的任务还是没有变动。

接着，继续在 travis 里面点击同步账号，等待一段时间之后，依然不行。找了半天没有头绪。

再接着，终于在 travis 的 request 中看到了错误提示：提交的代码记录为 Branch “main” not included per configuration,于是猜想可能是上述 travis.yml 文件中填写的分支为默认的 master，而我新建的默认分支是 main，于是修改.travis.yml 中的 master 为 main，push 代码，

  • 此刻：可喜可贺，发生了改变，且换成了新的错误： gh-token is invalid.

于是，回到 Github->Setting->Developer settings->Personal access tokens，重新生成了一下 access tokens,notes 为 blog,并在 Travis 中重新配置 GH_TOKEN，只是将 GH_TOKEN 的值写成 blog 写了进去。

依然不行，猜想是由于在生成 Personal access token 的时候，并没有直接显示密码，所以导致在 travis 中的密码配置不正确。 于是，现在要解决的问题就是这个 Personal access token 没有显示的问题。

然后找了几个小时，文档也看了个遍，还在被窝里躺了二十分钟看官方说明，最终就是因为在生成 token 的时候，就是不显示那个生成的仅仅出现一次的 token，无奈采取另一种办法，下载一个客户端，看是否可以生成 token。

然后 Github 客户端下载，挂了梯子也很缓慢，经过一番时间下载之后，里面没有生成 PAT 的选项，于是卸载 Github 客户端。

于是又想到，是不是因为浏览器的插件原因，Github 在生成 token 的时候出于安全考虑，所以不显示这个 token？ 然后，我就将浏览器的全部插件关闭，再次生成 token，依然不起作用。。。。。。 再然后，又重新注册了一个 github 账号，依照之前方式生成 token，依然不行。 最后的最后，他奶奶的，整到晚上一点半，换了个浏览器，再次登录、执行此流程。。。。。。可以了！！！！！！ 接着回到 travis 中，重新配置 GH_TOKEN 的密码，点击 Restart build，然后在 https://liugezhou.github.io/blog，可以访问了. 此刻项目还是乱码状态，但是 travis 的自动化配置总算是好了。 此时，来到 Github 下 blog 项目中，看到 Setting 设置中的 Pages 中 Source 已经自动切换成了分支 gh-pages 然后关于部署到页面上的乱码问题，看 HEXO 文档，是由于_config.yml 文件中，url 与 root 的编写不对。 之前配置为：

代码语言：javascript复制
url: https://liugezhou.github.io/liugezhou
root: /liugezhou/

而由于我新建的项目是在Github上一个名为blog的项目，于是修改_config.yml

代码语言：javascript复制
url: https://liugezhou.github.io/blog
root: /blog/

再次push代码，travis自动部署，等待几分钟后，访问https://liugezhou.github.io/blog，此刻的线上测试博客内容显示与本地相同。

其它部署(了解)

除了travis一键部署外，还有直接使用hexo deploy的方式，之前的博客使用的就是此方法，这里只对此方式的部署，再次做个记录。 首先，执行hexo deploy之前，再现有代码上需要做几个准备

  • _config.yml 中需要配置deploytyperepobranch等参数
  • 需要安装： npm i hexo-deploy-git --save

当执行 hexo deploy的时候，过程就是将public下的目录推送至_config.yml下设置的远程仓库的branch分支，并覆盖其内容。 然后，一般远程仓库分为分支一和分支二，比如刚才我们建设的代码处于分之一，那么需要将_config.yml下的branch设置为分支二，然后推送分之一代码，会自动将生成的public文件推送到分支二中，且需要查看仓库Pages中设置Source的分支确保为分支二，这样分支一为hexo开发代码，分支二为生产的站点文件。 简单说就是通过hexo generate生成的public下的站点文件代码，可以复制到任何你想复制的地方，此为生成的静态站点。 对于我上文已经提到的Travis流程，不需要自己设置仓库的第二分支，Travis CI流程已经全部搞定，且默认生成的public下的文件推送至gh-pages分支了，并且项目设置的Pages中Source也自动切换至gh-pages bingo，接下来一步就是更换主题、文章内容的迁移、博客填充了。但是在此之前，对HEXO文档做进一步的学习、整理。

模板

在进行我们博客搭建前，我们再对HEXO文档的目标内容做一个记录 各页面对应的模板名称为：

  • index 首页
  • post 文章内容
  • page 分页
  • archive 归档
  • category 分类归档
  • tags 标签归档

主题

只需要在theme下新建一个任意名称的文件夹，然后修改_config下的them设置为此定义的任意文件夹名称，那么主题就切换了。 主题可能含有的结构有：_config.yml、languages、layout、scripts、source _config.yml :与HEXO配置文件不同，且修改时会自动更新，不需要重启hexo s layout : 模版文件决定网站内容的呈现方式，可食用ejs渲染。 自己的主题内容，发布流程见网站。 撸到这里的时候，想着得自己开发个主题吧，但是审美、UI以及主题开发的流程还不是很熟悉，遥想之前的主题，是在clone其它主题之后的再修改，这样代码coding要少的多了，所以此次主题切换，还是根据在别人的主题基础下，添加自己想要的一些功能。

查找主题

之前博客内容，之前clone的主题是：

代码语言：javascript复制
git clone https://github.com/Haojen/hexo-theme-Anisina.git themes/lmz

我很喜欢这个主题集成的一些第三方服务，比如搜索、统计、七牛云集成、评论等等，于是基于这个主题再来体验一番。 由于本地配置了ssh，于是本次采用ssh的克隆方式

代码语言：javascript复制
cd themes
git clone git@github.com:Haojen/hexo-theme-Anisina.git
// 修改themes下hexo-theme-Anisina为liugezhou
// 修改根_config下为liugezhou
cd ..
hexo clean
hexo g
hexo s

此时，本地预览，成功。 删除主题内容：

  • .github文件，
  • .git文件 (为了提交代码的时候，主题也提交上去✨✨✨✨✨)
  • 删除Screenshots文件夹 修改_config.yml文件,内容略可参考

改造

就在开始着手准备此主题的改造，发现作者一个新的主题,且更新年份为两年内，于是删除刚刚clone的主题。

回到之前的查找主题步骤，重新执行之前流程：只是仓库改为：git@github.com:Haojen/hexo-theme-Claudia.git 按照这里进行一个简单的配置后，代码提交发布成功。

  • 每一篇博文中，加入<!--more -->可隐藏后面内容。

评论系统：Valine

接着是引入评论系统：

  • 首先登录：https://console.leancloud.cn
  • 创建应用
  • 进入应用后，在设置-》应用凭证，可查看到AppID和AppKey，然后将其值在六个周主题中找到comment_valine，enable设置为true且填入appId和appKey，此时重启应用便可以看到评论系统。
  • 经测试，评论的内容可在数据存储->结构化数据->Comment中查看到。

而此时由于项目会把主题文件上传到Github，造成key值泄漏，于是我们需要采取一个方法，使得项目为Public，但key值是公开的。 于是查找资料，在设置-安全中心中有一个Web安全域名，将我们的博客域名添加进去，这个时候即使别人拿到key值也是不可以使用的了. 也因此找到之前博客评论、文章统计缺失的原因：之前博客域名为https://liugezhou.online,而由于博客不再使用此域名维护后，改为了liugezhou.github.io的域名，安全设置导致统计消失。

百度统计

对百度统计进行一个小的配置：

  • 进入百度统计官网
  • 管理-> 新建站点->获取代码，代码中值抽出hm.src中问好后的值，配置在主题下_config.yml的ba_track_id即可。

更换主题

在体验了一天，上文主题后，想看一下自己文章的目录，还是不可以，于是找到了一个新的主题，非常的简洁且舒适。 之前的一系列配置，主要是在主题下的_config.yml中的valine评论、百度统计。 于是，更改主题就显得非常的简单，操作如下：

代码语言：javascript复制
$ cd themes
$ git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant  
$ npm install hexo-renderer-pug --save  (已安装)
$ npm install hexo-renderer-sass --save (已安装)

将hexo目录下_config.yml改为maupassant,删除maupassant下的.git，方便主题修改后的提交。 然后接下里就是主题下_config.yml以及代码修改，过程总体略(参考这里) 这个主题很cool，一些配置还要文档说明很全面。

博文内容迁移和改造过程

主要是将语雀内容和之前博客内容迁移过来(语雀有导出Markdown的功能以及一些博客有存档)。 基于对过去博文的一个尊重，每篇文章再次改造，对于一些技术类文章加入了description摘要和toc的显示目录功能，使用PicX图床神器，舍弃七牛云，尝试以后博客加入图片。 对早期的一些文章抄袭严重，或许有些过时的文章删去,一些质量不好的文章若全部出于原创就暂时保留。

图床

博客里的图片使用PicX图床神器,配合Github新建项目使用。

总结

更新说明：博客搭建完毕的总结与TODOLIST。 更新时间：2022-05-05

博客搭建完毕了，根据主题配置，主要集成的功能有：

  • 菜单栏
  • 关于-单页面
  • 标签页
  • 历史页
  • 百度PV浏览量统计
  • valine评论系统 SDK出错，这里更换了源码的SDK。
  • 图床功能
  • 文章字数统计、阅读时间
  • 文章目录
  • 文末文章声明
  • 本地搜索
  • 一键切换皮肤等
  • 文章阅读量统计

邮件推送

虽然其实，根据产品小儿美的设计哲学，不应该让网站变得臃肿不堪，但是邮件的推送还是忍不住要加。下面是在集成邮件推送功能中做的一些过程记录：

(2022-05-15)

说来惭愧，这个valine评论系统由于自带的邮件通知取消了，需要集成第三方的邮件通知，而第三方的邮件通知说明文档写的倒是很详细，但是第三方插件依托的是leanCloud，而leanCloud的git代码直接部署的功能又下线了(后来知道并没有)，需要与lean-cli进行一个简单的学习，到这我感觉效率有点慢下来的。于是想着还是换个评论系统把。

然后瞄准了gitalk，而gitalk是在Github的Settings/Developer Setting/OAuth Apps中配置的，于是新建了一个gitalk应用，其中依然出现Client secrets生成不显示的问题(然后再次基于safari浏览器生成查看)。 接着配置Homepage URL和Authorization callback URL，由于是新建的项目blog，不是出于基础的XXX.github.io,所以这里都填写的是https://liugezhou.github.io/blog gitalk项目的repo值的配置，在该项目下issues进行查看，最终知道这个repo值指的是仓库名称，实例gitalk的时候id改为md5格式(theme已经做了处理)，且主题自带的admin只需要输入一个值就可以(gitalk实例化的时候是需要传入数组的，而theme已经集成了) 然后配置也能成功，但是不知道是否是因为OAuth Apps的配置错误，修改了一些参数依旧还是出现Github-api接口返回的No properties–未找到相关的issues进行评论。

于是，我应该去继续深入一下OAuth Apps的相关内容。但是这个期间，墙太高，梯子断，网络一直圈圈叉叉，所以暂停一下 接着就想去看看友言评论系统吧，网速还是转圈圈。 接着看下畅言评论系统吧，网速终于不转圈了，然后配置后很快显示，但游客需要登录，且第三方评论为微博、qq、手机号，并且相关数据存储在畅言服务器，于是pass 于是这么转了一圈之后，还是使用valine最方便，虽然没有评论的邮件通知。 又过了两天之后，决心使用lean cloud去部署，然后意外发现，之前有个点理解错了，即并不需要进行lean-cli部署项目的学习，在一个没有发现的Git 部署按钮那里，跟着Valine-admin项目说明配置即可。 接着又添加了定时任务(测试了一下邮件的回复，通知还挺快，但是不清楚定时任务到底是否正确，按下不表)

接着由于我的网站域名是 https://liugezhou.github.io/blog, 这个/blog需要在clone下来的Valine-admin项目进行局部更改，在leancloud中的云引擎-设置添加新的变量：SITE_URL_REALLY,然后push代码，leanCloud重新部署。 然后分别测试:匿名、不匿名不带邮件、带邮件、第三方对第三方回复邮件通知。 接着将valine的配置 avatar改成了monsterid 再然后，看到了valine的配置有notify自带通知～～～～，由于整了半天，于是这个notify值就暂时不测试了，这里做个记录，如果leanCloud出现故障，或者有时间再来测试theme主题自带的。

deploy

2022年6月12日更新 由于Travis网站缓慢，再加上生成的token过期，于是直接使用hexo自带的deploy部署，需要的依赖为：hexo-deployer-git。 在Hexo的config.yml下配置deploy即可(typerepobranchesmessage)

加入豆瓣读书、电影、游戏

2022年6月27日更新，加入豆瓣读书。根据这篇文章的第二种方法。 添加依赖为：hexo-douban 分别配置根目录与主题目录_conifg.yml文件。 本地启动：hexo clean && hexo douban -bgm && hexo g && hexo s

域名更换

2022年7月8日更新。 在每次写文章的时候，贴的地址都是 https://blog.liugezhou.online/blog 这个后缀总是很难看，于是这次更新将老版本的域名改为带/blog的，新的不带/blog的后缀的。 操作步骤为：

  1. Github仓库/liugezhou.github.io 暂时更改为_blog
  2. Github仓库/blog 更改名称为：liugezhou.github.io
  3. 重新拉取：liugezhou.github.io
  4. liugezhou.github.io 仓库main分之下，将deploy配置等项目中带/blog的路径去除
hexo 网站建设 github git 开源

0 人点赞