2024博客重构(新)

2024-03-11 12:04:44

前言

寒假里写了一篇博客，叫2024博客重构，用的方法是，先用markdown写作，再用pandoc把所有的markdown文件转换成html，然后让Github Pgaes部署，好处是轻量、方便，但是有几个功能很繁琐。

RSS订阅很麻烦，而Hexo框架有现成的插件
评论系统无从下手，手搓加入现成的方案很麻烦
站点地图需要手动生成
生成的网页在加入搜索引擎的时候会报网页缺少meta description数据等错误

所以最好的方案还是转用Hexo

博客搭建

安装Hexo

1
2
3

sudo apt install nodejs

npm install -g hexo-cli

安装博客

# 这里以本博客为例，目录名(要求是空目录)为 github名字.github.io
hexo init wujackwill.github.io

# 浏览器打开http://localhost:4000，出现博客则安装成功
hexo s

安装主题

# 以hexo-orange为例
git clone https://github.com/zchengsite/hexo-theme-oranges.git themes/oranges

# 在 hexo 博客项目根目录下找到_config.yml文件，修改其中theme字段为主题名oranges
theme: oranges

# 复制主题文件夹下的_config.yml文件到博客根目录并改名为_config.oranges.yml，后续修改主题操作均在_config.oranges.yml中进行。

启用草稿和开启图片文件夹

# 在_config.yml中修改为下面代码

post_asset_folder: true

default_layout: draft

发布到Github Pages

1 2	# 安装hexo-deployer-git npm install hexo-deployer-git --save

# 在开始之前，您必须先在 _config.yml 中修改参数，一个正确的部署配置中至少要有 type 参数
deploy:
  type: git
  repo: <repository url> #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
  branch: main #published
  message: "message"

1 2	# hexo clean && hexo g && hexo s测试博客，如果没问题输入以下代码上传博客 hexo clean && hexo g && hexo d

Tags Page

1 2	# 在 hexo 博客项目根目录下执行，在source文件夹下生成tags文件夹 hexo new page tags

# 接着修改tags文件夹下index为以下内容
---
title: tags
date: 2019-05-03 12:03:35
type: "tags"
categories:
tags:
---

# 并在配置文件_config.oranges.yml修改对应enable为true，如不想展示，设置为false即可
navbar:
  -
    name: 标签
    enable: true
    path: /tags/

Friends Page

1 2	# 在 hexo 博客项目根目录下执行，在source文件夹下生成friends文件夹 hexo new page friends

# 接着修改friends文件夹下index为以下内容
---
title: tags
date: 2019-05-03 12:03:35
type: "friends"
categories:
tags:
---

# 并在配置文件_config.oranges.yml修改对应enable为true，如不想展示，设置为false即可
navbar:
  -
    name: 朋友
    enable: true
    path: /friends/

About page

1 2	# 在 hexo 博客项目根目录下执行，在source文件夹下生成about文件夹 hexo new page about

# 接着修改about文件夹下index为以下内容
---
title: tags
date: 2019-05-03 12:03:35
type: "about"
categories:
tags:
---

# 并在配置文件_config.oranges.yml修改对应enable为true，如不想展示，设置为false即可
navbar:
  -
    name: 关于我
    enable: true
    path: /about/

Categories page

1 2	# 在 hexo 博客项目根目录下执行，在source文件夹下生成categories文件夹 hexo new page categories

# 接着修改categories文件夹下index为以下内容
---
title: categories
date: 2019-05-03 12:03:35
type: "categories"
categories:
tags:
---

# 并在配置文件_config.oranges.yml修改对应enable为true，如不想展示，设置为false即可
navbar:
  -
    name: Categories
    enable: true
    path: /categories/

RSS

1 2	# 安装hexo-generator-feed npm install hexo-generator-feed --save

# 在_config.oranges.yml取消下面几行的注释
-
  name: rss
  icon: rss
  path: /atom.xml

Sitemap

1 2	# 安装插件 npm install hexo-generator-sitemap --save

1
2
3

# 在_config.yml中添加
sitemap:
  path: sitemap.xml

Hexo生成短链

1 2	# 安装abbrlink插件 npm install hexo-abbrlink --save

1 2	# 修改_config.yml中的permalink: permalink: :year/:month/:day/:abbrlink.html

解决博客上传后，自定义域名失效

在 hexo 生成的博客的 source 目录下新建一个 CNAME 文件，然后在这个文件中填入你的域名，就可以了

配置自定义域名利用 Cloudflare 全球 CDN

博客搭建好了，但是有两个小问题，一是访问速度不理想，二是域名不够好看，正好手上还有个域名，直接续费一年，在Cloudflare上配一下，就可以用了。

但是，有几个地方需要注意一下

如果是在Cloudflare上配置域名，会提示Unavailable for your site because your domain is not properly configured to support HTTPS因为这是因为 cloudflare 默认启用了 http/dns 代理功能，也就是 cdn 代理，导致 github 无法查看生成 https 证书所需的 dns 记录，直接关闭有关闭
有关github的dns记录，才能启用 Enforce HTTPS。
如果提示Not yet available for your site because the certificate has not finished being issued，说明证书还没申请成功，等待一天或者直接把 Custom domain 中的值清空，在填入自定义域名，等一段时间应该就可以了。
启用了Github Page的https功能后，再在Cloudflare上启用http/dns 代理功能，这样就能既能直接访问https页面，又能有dns全球加速了。

配置Waline评论系统

配置过程详见Waline快速上手

配置不显示UA和IP属地

Vercel 需要在 Settings - Environment Variables 中进行设置，添加环境变量DISABLE_USERAGENT，值为true，在添加DISABLE_REGION，值为true

配置不显示评论和不能评论

按照教程，绑定域名
在域名服务器商处添加新的 CNAME 解析记录

Type	Name	Value
CNAME	example（你想要的子域名名称）	cname.vercel-dns.com

在_config.oranges.yml中修改

# 修改相应评论下enable: true

# 在serverURL后填入刚配置的域名网址
waline:
  serverURL:  # Waline server address url

使用API，向谷歌、必应、百度提交url

详细教程见hexo-submit-urls-to-search-engine 中文文档

安装插件

1	npm install --save hexo-submit-urls-to-search-engine

获取各平台API密钥
在_config.yml中添加

hexo_submit_urls_to_search_engine:
  submit_condition: count #链接被提交的条件，可选值：count | period 现仅支持count
  count: 10 # 提交最新的10个链接
  period: 900 # 提交修改时间在 900 秒内的链接
  google: 0 # 是否向Google提交，可选值：1 | 0（0：否；1：是）
  bing: 1 # 是否向bing提交，可选值：1 | 0（0：否；1：是）
  baidu: 1 # 是否向baidu提交，可选值：1 | 0（0：否；1：是）
  txt_path: submit_urls.txt ## 文本文档名， 需要推送的链接会保存在此文本文档里
  baidu_host: https://cjh0613.github.io ## 在百度站长平台中注册的域名
  baidu_token: 请按照文档说明获取 ## 请注意这是您的秘钥， 所以请不要把它直接发布在公众仓库里!
  bing_host: https://cjh0613.github.io ## 在bing站长平台中注册的域名
  bing_token: 请按照文档说明获取 ## 请注意这是您的秘钥， 所以请不要把它直接发布在公众仓库里!
  google_host: https://cjh0613.github.io ## 在google站长平台中注册的域名
  google_key_file: Project.json #存放google key的json文件，放于网站根目录（与hexo _config.yml文件位置相同），请不要把json文件内容直接发布在公众仓库里!
  google_proxy: http://127.0.0.1:8080 # 向谷歌提交网址所使用的系统 http 代理，填 0 不使用
  replace: 0  # 是否替换链接中的部分字符串，可选值：1 | 0（0：否；1：是）
  find_what: http://cjh0613.github.io/blog
  replace_with: https://cjh0613.com