【详细教程hexo博客搭建】2、Vercel部署并绑定自定义域名+安装Butterfly主题

news2024/10/5 14:03:33

2.Vercel部署与自定义域名

2.1 Vercel部署

Vercel简介：vercel是一个代码托管平台，它能够托管你的静态html界面，甚至能够托管你的node.js与Python服务端脚本，是不想买服务器的懒人的福音！

使用Vercel部署Hexo项目步骤：

  1. 首先需要一个Vercel账号，这里推荐用GitHub账户关联，这样你就可以在vercel中直接托管你的GitHub库中的项目了，实现开发部署一步到位（网络不流畅可以考虑挂梯子）。

    image-20221027223132537

  2. 当你用你的Github账户关联并绑定手机号登录之后，点击右上角的Add New Project创建新的项目，之后导入选项那里选择Continue with Github，这时候应该能看到你Github账号的仓库，选择你刚刚部署成功的存储静态博客的仓库<username>.github.io右边的Import选项，表示你要导入该仓库。

    image-20221027223231192

     

    image-20221027223420282

     

    image-20221027223742660

  3. 起一个只能有字母、数字或者或者连字符的项目名称，然后其他默认，点击Deploy，等待一分钟即可部署成功，部署成功后电极Continue to Dashboard跳转到控制面板，下图所示就是控制面板，看到就代表成功部署到了，但是我们现在还不能访问他给出的域，因为GFW最近把Vercel屏蔽了。

​

image-20221027224225808

image-20221027224405464

2.2 绑定自定义域名

现在你的个人网站的地址是 username.github.io以及在Vercel上有一个blog-demo-chi.vercel.app。如果觉得不够定制化，可以购买一个专属域名。

这一步不是必要的，如果目前还不想买域名可以先跳过。

腾讯云、阿里云等都是不错的域名代理商，建议选用com，cn或cc这类常用好记的顶域，对SEO比较友好，自定义部分的长度尽可能短别人才会更容易地记住你的网站，要知道域名就是你网站的卡片。此处以阿里云域名为例进行说明，购买域名后，实名认证进入阿里云控制台，点云解析进去，找到你刚买的域名，点进去添加Vercel所需的解析记录，注意博主这里是解析二级域名只需要解析一条即可。但是如果是一级域名，需要解析两个，一个是@，另外一个是www，Vercel建议是@的解析重定向至www。

以我的域名：fomal.cc为例进行说明

主机记录解释
www解析后的域名为 www.fomal.cc
@直接解析主域名 fomal.cc
*泛解析，匹配其他所有域名 *.fomal.cc
mail将域名解析为 mail.fomal.cc，通常用于解析邮箱服务器
二级如 abc.fomal.cc，填写 abc
手机网站如 m.fomal.cc，填写 m
显性URL不支持泛解析（泛解析：将所有子域名解析到同一地址）

将域名指向云服务器，请选择「A」； 将域名指向另一个域名，请选择「CNAME」； 建立邮箱请选择「MX」，根据邮箱服务商提供的 MX 记录填写。

记录类型解释
A用来指定域名的 IPv4 地址（如 8.8.8.8），如果需要将域名指向一个 IP 地址，就需要添加 A 记录。
CNAME如果需要将域名指向另一个域名，再由另一个域名提供 IP 地址，就需要添加 CNAME 记录。
MX如果需要设置邮箱，让邮箱能收到邮件，就需要添加 MX 记录。
TXT在这里可以填写任何东西，长度限制 255。绝大多数的 TXT 记录是用来做 SPF 记录（反垃圾邮件）
NS域名服务器记录，如果需要将子域名交给其他 DNS 服务商解析，就需要添加 NS 记录。
AAAA用来指定主机名（或域名）对应的 IPv6 地址（例如：ff06:0:0:0:0:0:0:c3）记录。
SRV记录了哪台计算机提供了哪个服务。格式为：服务的名字、点、协议的类型，例如：_xmpp-server_tcp。
显性URL从一个地址 301 重定向到另一个地址的时候，就需要添加显性 URL 记录（注：DNSPod 目前只支持 301 重定向）。
隐性URL类似于显性 URL，区别在于隐性 URL 不会改变地址栏的域名。

添加自定义域名的步骤：

  1. 点击Vercel控制面板右上角的View Domains查看当前的域，我们可以看到仅有Vercel给你预分配的一个域名，此时我们输入刚刚购买的域名，我这里以二级域名demo.fomal.cc为例进行说明，添加后他会提示你添加一条DNS解析记录。

    image-20221027224803563

     

    image-20221027224830609

     

    image-20221027225338126


    PS：如果你是新买的域名，直接输入你新买的一级域名即可，例如demo123.com，他会推荐你将demo123.com重定向至www.demo123.com，点ADD即可，然后他会提示你添加两条解析记录，一个是@开头的和CNAME开头的，添加记录的方法和二级域名一致。

    image-20221027225758503

     

    image-20221027225808449

  2. 在阿里云域名解析记录里面添加如下记录，其中记录类型对应Type，主机记录对应Name，记录值对应Value，其他的设置默认即可。

    image-20221027230049667

  3. 回到Vercel刚刚查看域名的地方，如果操作没问题，应该会显示域名配置成功的提示，此时就可以通过自定义域名来访问我们搭建的网站了。

    image-20221027230357362

     

    image-20221027230421929

  4. 当你有了新的域名之后，需要[BlogRoot]\_config.yml文件中的url配置项为自己的新域名，这样博客的文章链接才会正确生成。

image-20221028113042788

3.安装主题

本教程用的 🦋 hexo-theme-butterfly 主题 v4.5.0最新版，请放心食用。

本教程用的是npm方式安装的 hexo-theme-butterfly，后续魔改时更改的文件都是【C:/Hexo-Blog/blog-demo/node_modules/hexo-theme-butterfly】文件夹中的文件。如果你是git clone克隆方式安装的主题，请在【C:/Hexo-Blog/blog-demo/themes/butterfly】文件夹下修改对应的文件。

  • npm安装(推荐)
  • Github安装
  • Gitee安装

注意：此方法只支持 Hexo 5.0.0以上版本!

在你的博客根目录（我这里路径为【C:/Hexo-Blog/blog-demo】）打开Git BASH命令窗口执行npm i hexo-theme-butterfly

SHELL

1

npm i hexo-theme-butterfly

安装成功后可在【C:/Hexo-Blog/blog-demo/node_modules】文件夹下找到hexo-theme-butterfly文件夹

升级方法：在博客根目录下，运行 npm update hexo-theme-butterfly。
升级前请将hexo-theme-butterfly文件夹备份，npm更新会直接覆盖成新的包。

4.应用主题

  1. 修改站点配置文件_config.yml，把主题改为butterfly

    YAML

    1

    theme: butterfly
  2. 如果你没有pug以及stylus的渲染器，请下载安装，这两个渲染器是Butterfly生成基础页面所需的依赖包：

    SHELL

    1

    npm install hexo-renderer-pug hexo-renderer-stylus --save
  3. 为了减少升级主题后带来的不便，请使用以下方法（建议，可以不做，高度魔改的一般都不会升级主题了，不然魔改的会被覆盖掉）
    把主题文件夹中的 _config.yml 复制到 Hexo 根目录里（我这里路径为【C:/Hexo-Blog/blog-demo】），同时重新命名为 _config.butterfly.yml。以后只需要在 _config.butterfly.yml进行配置即可生效。Hexo会自动合併主题中的_config.yml和 _config.butterfly.yml里的配置，如果存在同名配置，会使用_config.butterfly.yml的配置，其优先度较高。

5. 基础用法说明

5.1 Front-matter

Front-matter 是 markdown 文件最上方以---分隔的区域，用于指定个别档案的变数。

  • Page Front-matter 用于页面配置
  • Post Front-matter 用于文章页配置

如果标注可选的参数，可根据自己需要添加，不用全部都写

Page Front-matter：

MARKDOWN

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

---
title:
date:
updated:
type:
comments:
description:
keywords:
top_img:
mathjax:
katex:
aside:
aplayer:
highlight_shrink:
---
写法解释
title【必需】页面标题
date【必需】页面创建日期
type【必需】标籤、分类和友情链接三个页面需要配置
updated【可选】页面更新日期
description【可选】页面描述
keywords【可选】页面关键字
comments【可选】显示页面评论模块(默认 true)
top_img【可选】页面顶部图片
mathjax【可选】显示mathjax(当设置mathjax的per_page: false时，才需要配置，默认 false)
kates【可选】显示katex(当设置katex的per_page: false时，才需要配置，默认 false)
aside【可选】显示侧边栏 (默认 true)
aplayer【可选】在需要的页面加载aplayer的js和css,请参考文章下面的音乐 配置
highlight_shrink【可选】配置代码框是否展开(true/false)(默认为设置中highlight_shrink的配置)

Post Front-matter：

MARKDOWN

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

---
title:
date:
updated:
tags:
categories:
keywords:
description:
top_img:
comments:
cover:
toc:
toc_number:
toc_style_simple:
copyright:
copyright_author:
copyright_author_href:
copyright_url:
copyright_info:
mathjax:
katex:
aplayer:
highlight_shrink:
aside:
---
写法解释
title【必需】文章标题
date【必需】文章创建日期
updated【可选】文章更新日期
tags【可选】文章标籤
categories【可选】文章分类
keywords【可选】文章关键字
description【可选】文章描述
top_img【可选】文章顶部图片
cover【可选】文章缩略图(如果没有设置top_img,文章页顶部将显示缩略图，可设为false/图片地址/留空)
comments【可选】显示文章评论模块(默认 true)
toc【可选】显示文章TOC(默认为设置中toc的enable配置)
toc_number【可选】显示toc_number(默认为设置中toc的number配置)
toc_style_simple【可选】显示 toc 简洁模式
copyright【可选】显示文章版权模块(默认为设置中post_copyright的enable配置)
copyright_author【可选】文章版权模块的文章作者
copyright_author_href【可选】文章版权模块的文章作者链接
copyright_url【可选】文章版权模块的文章连结链接
copyright_info【可选】文章版权模块的版权声明文字
mathjax【可选】显示mathjax(当设置mathjax的per_page: false时，才需要配置，默认 false)
katex【可选】显示katex(当设置katex的per_page: false时，才需要配置，默认 false)
aplayer【可选】在需要的页面加载aplayer的js和css,请参考文章下面的音乐 配置
highlight_shrink【可选】配置代码框是否展开(true/false)(默认为设置中highlight_shrink的配置)
aside【可选】显示侧边栏 (默认 true)

注意：我的博客根目录路径为 【C:/Hexo-Blog/blog-demo】，下文所说的根目录都是此路径，将用[BlogRoot]代替。

5.2 标签页

  1. 前往你的Hexo博客根目录，打开Git Bash执行如下命令：

    SHELL

    1

    hexo new page tags

  2. 在[BlogRoot]\source\会生成一个含有index.md文件的tags文件夹。

  3. 修改[BlogRoot]\source\tags\index.md，添加type: "tags"。

    MARKDOWN

    1
2
3
4
5

    ---
title: tags
date: 2022-10-28 12:00:00
type: "tags"
---

5.3 友情链接

  1. 前往你的Hexo博客根目录，打开cmd命令窗口执行如下命令：

    SHELL

    1

    hexo new page link

  2. 在[BlogRoot]\source\会生成一个含有index.md文件的link文件夹

  3. 修改[BlogRoot]\source\link\index.md，添加type: "link"

    MARKDOWN

    1
2
3
4
5

    ---
title: link
date: 2022-10-28 12:00:00
type: "link"
---

  4. 前往[BlogRoot]\source\_data创建一个link.yml文件（如果沒有 _data 文件夹，请自行创建），并写入如下信息（根据你的需要写）：

    YAML

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

    - class_name: 1.技术支持
  class_desc: 本网站的搭建由以下开源作者提供技术支持
  link_list: 
    - name: Hexo 
      link: https://hexo.io/zh-cn/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、简单且强大的网志框架
      siteshot: https://source.fomal.cc/siteshot/hexo.io.jpg
      
- class_name: 2.友情链接
  class_desc: 一些好朋友~~
  link_list:
    - name: Fomalhaut🥝
      link: https://fomal.cc/
      avatar: /assets/head.jpg
      descr: Future is now 🍭🍭🍭
      siteshot: https://source.fomal.cc/siteshot/www.fomal.cn.jpg

    class_name和class_desc支持 html 格式，如不需要，也可以留空。

5.4 图库

图库页面只是普通的页面，你只需要hexo new page xxx创建你的页面就行。

然后使用外挂标签 galleryGroup，具体用法请查看对应的内容。

MARKDOWN

1
2
3
4
5
6

<div class="gallery-group-main">

{% galleryGroup '封面专区' '本站用作文章封面的图片，不保证分辨率' '/box/Gallery/photo' https://source.fomal.cc/img/default_cover_61.webp %}

{% galleryGroup '背景专区' '收藏的一些的背景与壁纸，分辨率很高' '/box/Gallery/wallpaper' https://source.fomal.cc/img/dm11.webp %}
</div>

5.5 子页面

子页面也是普通的页面，你只需要hexo new page xxx创建你的页面就行。

然后使用标签外挂 gallery，具体用法请查看对应的内容。

MARKDOWN

1
2
3
4
5
6
7
8
9
10
11
12
13
14

{% gallery %} 
![p1]( https://source.fomal.cc/img/default_cover_1.webp ) 
![p2]( https://source.fomal.cc/img/default_cover_2.webp ) 
![p3]( https://source.fomal.cc/img/default_cover_3.webp ) 
![p4]( https://source.fomal.cc/img/default_cover_4.webp ) 
![p5]( https://source.fomal.cc/img/default_cover_5.webp ) 
![p6]( https://source.fomal.cc/img/default_cover_6.webp ) 
![p7]( https://source.fomal.cc/img/default_cover_7.webp ) 
![p8]( https://source.fomal.cc/img/default_cover_8.webp ) 
![p9]( https://source.fomal.cc/img/default_cover_9.webp ) 
![p10]( https://source.fomal.cc/img/default_cover_10.webp ) 
![p11]( https://source.fomal.cc/img/default_cover_11.webp ) 
![p12]( https://source.fomal.cc/img/default_cover_12.webp ) 
{% endgallery %}

5.6 404页面

主題內置了一个简单的404页面，可在设置中开放。

如需本地预览，请访问 http://localhost:4000/404.html

YML

1
2
3
4
5

# A simple 404 page
error_404:
  enable: true
  subtitle: "页面沒有找到"
  background:

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1018711.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

在openSUSE-Leap-15.5-DVD-x86_64中使用钉钉dingtalk_7.0.40.30829_amd64

在openSUSE-Leap-15.5-DVD-x86_64中使用钉钉dingtalk_7.0.40.30829_amd64

在openSUSE-Leap-15.5-DVD-x86_64中使用钉钉dingtalk_7.0.40.30829_amd64 一、到官网下载钉钉Linux客户端 https://page.dingtalk.com/wow/z/dingtalk/simple/ddhomedownload#/ localhost:~ # ls -lh /home/suozhang/download/com.alibabainc.dingtalk_7.0.40.30829_amd64.d…
阅读更多...
一篇文章学会正则表达式的语法

一篇文章学会正则表达式的语法

点击下方关注我&#xff0c;然后右上角点击...“设为星标”&#xff0c;就能第一时间收到更新推送啦~~~ 正则表达式&#xff08;Regular Expression&#xff09;在代码中常常简写为regex。正则表达式通常被用来检索、替换那些符合某个规则的文本&#xff0c;它是一种强大而灵活…
阅读更多...
1. 快速体验 VSCode 和 CMake 创建 C/C++项目

1. 快速体验 VSCode 和 CMake 创建 C/C++项目

1. 快速体验 VSCode 和 CMake 创建 C/C项目 本章的全部代码和markdown文件地址: CMake_Tutorial&#xff0c;欢迎互相交流. 此次介绍的内容都是针对于 Linux 操作系统上的开发过程. 1.1 安装开发工具 VSCode: 自行下载安装, 然后安装插件 Cmake:在 Ubuntu 系统上, 可以采用 ap…
阅读更多...
[k8s] pod的创建过程

[k8s] pod的创建过程

pod的创建过程 定义 Pod 的规范&#xff1a; apiVersion: v1 kind: Pod metadata:name: my-pod spec:containers:- name: my-containerimage: nginx:latest创建 Pod 对象&#xff1a; 使用 kubectl 命令行工具或其他客户端工具创建 Pod 对象&#xff1a; kubectl create -f…
阅读更多...
【JAVA-Day15】Java 的 do-while 循环语句

【JAVA-Day15】Java 的 do-while 循环语句

Java 的 do-while 循环语句 Java 的 do-while 循环语句摘要引言一、什么是 do-while 循环语句二、do-while 循环语句的语法三、do-while 循环的优势和使用场景优势使用场景 与其他方式相比优势劣势与while循环比较与for循环比较 建议四、总结参考资料 博主 默语带您 Go to New …
阅读更多...
90 # 实现 express 请求处理

90 # 实现 express 请求处理

上一节构建 layer 和 route 的关系&#xff0c;这一节来实现 express 请求处理 application.js const http require("http"); const Router require("./router");function Application() {this._router new Router(); }Application.prototype.get fu…
阅读更多...
【C语言】【数据存储】用%u打印char类型？用char存128？

【C语言】【数据存储】用%u打印char类型？用char存128？

1.题目一&#xff1a; #include <stdio.h> int main() {char a -128;printf("%u\n",a);return 0; }%u 是打印无符号整型 解题逻辑&#xff1a; 1. 原反补互换&#xff0c;截断 -128 原码&#xff1a;10000000…10000000 补码&#xff1a;11111111…10000000…
阅读更多...
【初阶数据结构】树（tree）的基本概念——C语言

【初阶数据结构】树（tree）的基本概念——C语言

目录 一、树&#xff08;tree&#xff09; 1.1树的概念及结构 1.2树的相关概念 1.3树的表示 1.4树在实际中的运用&#xff08;表示文件系统的目录树结构&#xff09; 二、二叉树的概念及结构 2.1二叉树的概念 2.2现实中真正的二叉树 2.3特殊的二叉树 2.4二叉树的性质…
阅读更多...
【iOS】ViewController的生命周期

【iOS】ViewController的生命周期

文章目录 前言一、UIViewController生命周期有关函数二、执行顺序注意点loadview&#xff1a; 前言 在iOS开发中UIViewController扮演者非常重要的角色&#xff0c;它是视图view和数据model的桥梁&#xff0c;通过UIViewController的管理有条不紊的将数据展示在视图上。作为UI…
阅读更多...
XML 和 JSON 学习笔记（基础）

XML 和 JSON 学习笔记（基础）

XML Why XML 的出现背景&#xff1a;在实际开发中&#xff0c;不同语言&#xff08;如Java、JavaScript等&#xff09;的应用程序之间数据传递的格式不同&#xff0c;导致它们进行数据交换时很困难&#xff0c;XML就应运而生了&#xff01;&#xff08;XML 是一种通用的数据交…
阅读更多...
视频分析【video analytics】的项目的关键因素 -- 如何选择合适的摄像头，存储设备，以及AI推理硬件?

视频分析【video analytics】的项目的关键因素 -- 如何选择合适的摄像头，存储设备，以及AI推理硬件?

文字大纲 参考指标摄像机存储设备AI 推理硬件参考文献与学习路径参考指标 摄像机 通常的做法是将视频视为一系列图像（帧），并使用仅在图像上训练的深度神经网络模型来执行视频上的相似分析任务。在这篇论文中，我们表明，这种在图像上运行良好的深度学习模型在视频上也会运行…
阅读更多...
arm day1（9.14）arm相关概念，RISC和CISC区别，数据类型约定，arm-v7架构和arm-v8架构，arm处理器工作模式

arm day1（9.14）arm相关概念，RISC和CISC区别，数据类型约定，arm-v7架构和arm-v8架构，arm处理器工作模式

XMind
阅读更多...
QT：使用普通按钮、网格布局管理器、标签、行编辑器、水平布局管理器、垂直布局管理器做一个小项目

QT：使用普通按钮、网格布局管理器、标签、行编辑器、水平布局管理器、垂直布局管理器做一个小项目

widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QPushButton> //普通按钮 #include <QGridLayout> //网格布局管理器 #include <QLabel> //标签 #include <QLineEdit> //行编辑器 #include <QHBoxLayo…
阅读更多...
core文件的生成与使用

core文件的生成与使用

目录 core 设置例子 1例子 2core 名称及目录修改参考 在使用嵌入式系统时&#xff0c;出错后&#xff0c;不好使用 gdb 调试&#xff0c;这时&#xff0c;可让系统生成一个 core 文件&#xff0c;用于查看出错原因 core 设置 要生成 core 文件&#xff0c;需要先设置 core 文…
阅读更多...
链表的基本操作(acm模式，中等）

链表的基本操作(acm模式，中等）

此题自己亲自动手实现难度确实不容易&#xff0c;为了更好的掌握 链表这一结构&#xff0c;还是得自己敲&#xff0c;自己debug,还得多次看&#xff0c;才能脑子清楚&#xff0c;手也熟。 // 本题的删除索引是从1开始&#xff0c;函数实现是从0开始&#xff0c;先说明这一点&a…
阅读更多...
基于SSM的高校教师科研信息展示网站的设计与实现

基于SSM的高校教师科研信息展示网站的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…
阅读更多...
[自用]手推DDPM公式

[自用]手推DDPM公式

正向最终呈N(0,1) 逆向可解 用神经网络预测逆向的噪声ε&#xff0c;与正向的噪声做MSE
阅读更多...
列属性与数据完整性

列属性与数据完整性

1.2 数据类型——值类型 1.2.1 整型 类型字节范围tinyint1-128~127smallint2-32768~32767mediumint3-8388608~8388607int4-231~231-1bigint8-263~263-1 1、无符号整数&#xff08;unsigned&#xff09;&#xff1a;无符号数没有负数&#xff0c;正数部分是有符号的两倍。 例…
阅读更多...
解决Qt VS Tools扩展加载预编译Qt库 提示版本不匹配

解决Qt VS Tools扩展加载预编译Qt库 提示版本不匹配

提示 qmake error:no value for QT_INSTALL_PREFIX/src 原因&#xff1a; qt路径编译时&#xff0c;是硬编码到qmake里的&#xff0c;所以如果挪动了qt的目录&#xff0c;或者是下载其他人预编译的qt库&#xff0c;就会有该提示。 解决方案&#xff1a; qmake同级别路径新建q…
阅读更多...
docker 和k8s 入门

docker 和k8s 入门

docker 和k8s 入门 本文是云原生的学习记录&#xff0c;可以参考以下文档 k8s https://www.yuque.com/leifengyang/oncloud 相关视频教程可参考如下 https://www.bilibili.com/video/BV13Q4y1C7hS?p2&vd_source0882f549dac54045384d4a921596e234 相对于公有云&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023