零成本搭建一款博客网站(基于Vercel+Hexo完美实现)【保姆级教程】

文章目录

  • 🐸基于Vercel+Hexo零成本搭建博客网站
    • 🐻实现思路
  • 🐮Hexo的配置与安装
  • 🐒Hexo的美化与使用
  • 🐫Github的推送与部署
  • 🐼Vercel部署与网站上线
  • 🐛总结

🐸基于Vercel+Hexo零成本搭建博客网站

在数字时代,拥有一个属于自己的博客网站不仅能展示个人才华,还能作为分享生活、交流思想的平台。然而,许多人对如何搭建博客网站感到困惑,觉得需要复杂的编程知识和昂贵的费用。其实不然,通过本文的指引,将了解到如何零成本搭建一款博客网站,基于Vercel和Hexo的强大功能,轻松实现这一目标。

对于想要拥有自己的博客网站但又不想花费大量时间和金钱的人来说,Vercel和Hexo无疑是最好的选择。Vercel是一款强大的静态网站托管平台,而Hexo则是一款流行的开源博客框架。通过结合两者的优势,您可以轻松搭建一款外观精美、功能丰富的博客网站。

🐻实现思路

在Windows环境下,我们可以通过运行Web程序并生成静态文件,实现零成本搭建博客网站。首先,你需要将博客内容转化为静态网页。这一步可以通过使用Hexo等静态网站生成器轻松完成。Hexo可以根据你提供的Markdown文件自动生成静态网页。

接下来,你需要将生成的静态文件上传至GitHub进行托管。GitHub提供免费的代码托管服务,你可以将其用于托管你的静态网站。你可以使用Git命令行工具将本地文件推送到远程存储库中。

最后,使用Vercel部署你的网站。Vercel是一款强大的静态网站托管平台,它允许你将GitHub存储库与Vercel连接起来,自动部署你的网站。你只需在Vercel上创建一个新的项目,并选择与你的存储库关联即可。Vercel会自动从GitHub获取最新文件并部署你的网站。

通过这种方式,你可以实现零成本搭建博客网站的目标。你不需要支付任何存储成本、域名成本或服务器成本。只需要一个Windows环境、一个GitHub账户和Vercel,你就可以轻松搭建自己的博客网站。
在这里插入图片描述
说明:
需要本地环境有Node.js 和 Git。没有的需要去百度学习教程,配置本地环境。

🐮Hexo的配置与安装

安装 Hexo
在本地pc的cmd执行命令:

npm install -g hexo-cli

在这里插入图片描述
建站
找到一个 合适的文件夹 ,点击地址栏,输入cmd 回车
在这里插入图片描述
输入下方代码并回车(记得修改“项目名”)

hexo init myblog

在这里插入图片描述
然后在命令框继续输入:

cd myblog
npm install
hexo server

在这里插入图片描述
可以看到,已经完成了Hexo的基础配置,成功打开了。

在这里插入图片描述

🐒Hexo的美化与使用

Git 安裝:在博客根目录里安装最新版【推荐】

git clone -b main https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu

⚙ 应用主题
修改 hexo 配置文件_config.yml,把主题改为anzhiyu

theme: anzhiyu

如果你没有 pug 以及 stylus 的渲染器,请下载安装:

 npm install hexo-renderer-pug hexo-renderer-stylus --save

覆盖配置
覆盖配置可以使主题配置放置在 anzhiyu 目录之外,避免在更新主题时丢失自定义的配置。

通过 Npm 安装主题的用户可忽略,其他用户建议学习使用。

macos/linux 在博客根目录运行

cp -rf ./themes/anzhiyu/_config.yml ./_config.anzhiyu.yml

windows 复制/themes/anzhiyu/_config.yml此文件到 hexo 根目录,并重命名为_config.anzhiyu.yml
以后如果修改任何主题配置,都只需修改 _config.anzhiyu.yml 的配置即可。

注意:

只要存在于 _config.anzhiyu.yml 的配置都是高优先级,修改原 _config.yml 是无效的。
每次更新主题可能存在配置变更,请注意更新说明,可能需要手动对 _config.anzhiyu.yml 同步修改。
想查看覆盖配置有没有生效,可以通过 hexo g --debug 查看命令行输出。
如果想将某些配置覆盖为空,注意不要把主键删掉,不然是无法覆盖的

优化效果:
在这里插入图片描述

🐫Github的推送与部署

部署至 GitHub
在本地配置好 Hexo 后,我们要将其部署至云端仓库
打开 GitHub,注册、登录好自己的账号,点击右上角 +,选择 New repository
在这里插入图片描述
填写名称和简介,点击最下方的 Create repository 按钮
在这里插入图片描述

链接github仓库,不会可以去百度搜索教程,有很多。

git config --global user.email "你的邮箱地址"


git config --global user.name "你的用户名"


git init


git add .


git commit -m "描述"

git remote add origin 仓库地址

git push -u origin master

成功上传到仓库
在这里插入图片描述

🐼Vercel部署与网站上线

打开 Vercel 的官网,注册、登录好自己的账号
点击中间的 Create a New Project
在这里插入图片描述
选择 Continue with GitHub
在这里插入图片描述
选择自己博客的仓库导入
在这里插入图片描述
在这里插入图片描述
出现 Congratulations! 说明部署成功,点击右侧 Continue to Dashboard 就能看到自己的网站链接了
在这里插入图片描述
在这里插入图片描述

🐛总结

这篇文章介绍了如何基于Vercel和Hexo零成本搭建博客网站的方法。以下是文章的总结:

在数字时代,拥有个人博客网站是展示个人才华、分享生活和交流思想的重要平台。然而,许多人觉得搭建博客网站需要复杂的编程知识和昂贵的费用。本文通过介绍使用Vercel和Hexo的方法,指导读者轻松实现零成本搭建博客网站的目标。

Vercel是一款强大的静态网站托管平台,而Hexo是一款流行的开源博客框架。通过结合两者的优势,读者可以创建外观精美、功能丰富的博客网站。

文章提供了在Windows环境下的实现思路:将博客内容转化为静态网页,使用Hexo等静态网站生成器生成静态文件,然后上传至GitHub进行托管。GitHub提供免费的代码托管服务。最后,通过Vercel部署网站,实现自动部署和更新。

Hexo的配置与安装部分介绍了在本地环境安装Hexo的步骤,包括初始化项目、安装依赖并启动Hexo服务器。文章还介绍了Hexo的美化与使用,包括安装主题和覆盖配置。

GitHub的推送与部署部分指导读者将Hexo博客部署至GitHub,并提供了具体的命令行操作步骤。

最后,文章介绍了使用Vercel进行部署与网站上线的步骤。读者需要注册Vercel账号,导入GitHub仓库,并通过Vercel实现网站的自动部署。文章以图文并茂的方式展示了整个搭建过程,使读者能够轻松上手。

通过这篇文章,读者可以了解到如何在零成本的情况下,利用Vercel和Hexo搭建自己的博客网站,无需支付存储、域名或服务器成本。文章提供了清晰的步骤和详细的操作指南,为想要搭建个人博客的读者提供了有力的帮助。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

冬至·特辑:Note4---二叉树的链式结构

目录 前言🧶 1. 二叉树链式结构的实现🐧 1.1 要实现的目标🎯 2.二叉树的创建🌹 2.1代码实现 2.1.1 TreeNode.h 2.1.2 TreeNode.c 3.实现二叉树的遍历🐲 3.1 思路分析🐤 3.2 前/中/后序遍历&#…

IDEA 中 Tomcat 日志乱码

1、服务器输出乱码 修改 File -> settings -> Editor -> General ->Console 中,utf-8改为GBK,反之改成utf-8 2、Tomcat Localhost Log 或者 Tomcat Catalina Log乱码 进入Tomcat 中的conf文件中的logging.properties 哪个有问题改哪个&…

1223西站坐标更新

1223 西站坐标更新 1.Update for the station’s location def initial_out_map_indoor_points(self):Load the indoor data and update both the wall_matrix and the ditch_matrix.# Initialize the wall_matrix# List of coordinatescoordinates [(417, 287, 417, 290),(4…

Java--抽象工厂设计模式

抽象工厂设计模式 抽象工厂模式(Abstract Factory Pattern)是围绕一个超级工厂创建其他工厂。该超级工厂又称为其他工厂的工厂。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。 在抽象工厂模式中,接口是负责…

考研往应届考生报名流程?

文章目录: 一:考试时间相关 二:公告查询获取信息 三:提供材料 1.基本要求 2.证件要求 四:相关问题 1.报名流程如何操作 2.考点选择 2.1 应届考生考点选择 2.2 往届考生考点选择 3.预报名时间可能不同 4.档…

Python编程 圣诞树教程 (附代码)专属于程序员的浪漫

文章目录 1.turtle库2.python函数的定义规则3.引入库4.定义画彩灯函数5.定义画圣诞树的函数6.定义树下面小装饰的函数7.定义一个画雪花的函数8.画五角星9.写文字10.全部源代码11.html圣诞树代码实现(动态音乐) 1.turtle库 turtle库是Python语言中一个很…

Java LocalDateTime转Json报错处理

在项目中LocalDateTime 进行json转换时,抛出序列化异常,查找解决方案,记录下来,方便备查。 报错信息 Caused by: com.fasterxml.jackson.databind.exc.InvalidDefinitionException: Java 8 date/time type java.time.LocalDateT…

【小白攻略】php 小数转为百分比,保留两位小数的函数

php 小数转为百分比 首先,最简单直观的方法是利用PHP内置的number_format函数。该函数可以对一个数字进行格式化,并可以设置小数点后的精度。通过将小数乘以100,再用number_format函数将结果格式化为百分比形式,即可达到将小数转为…

基于Java SSM框架实现多人试卷批改考试命题系统项目【项目源码+论文说明】计算机毕业设计

基于java的SSM框架实现多人试卷批改考试命题系统演示 摘要 多人命题系统是高校为教师、学生试卷的重要组成部分,是实现人才培养目标、培养学生科研能力与创新思维、检验学生综合素质与实践能力的重要手段与综合性实践教学环节。我所在学院多采用半手工管理学生试卷…

什么是动态代理?

目录 一、为什么需要代理? 二、代理长什么样? 三、Java通过什么来保证代理的样子? 四、动态代理实现案例 五、动态代理在SpringBoot中的应用 导入依赖 数据库表设计 OperateLogEntity实体类 OperateLog枚举 RecordLog注解 上下文相…

车云TCP链路偶现链接失联问题排查

一、问题分析 1.1 车云tcp长连接分析排查 在15:37:32.039上线, 在 16:07:26.527下线,车云长连接通道稳定,且该期间心跳数据正常。 1.2 云向驾仓推送数据分析 在15:37:42 进行车辆接管后,该车辆下线,且无法在上线&am…

Java语法---使用sort进行排序

目录 一、升序 二、降序 (1)类实现接口 (2)匿名内部类 三、自定义排序规则 四、集合中的sort排序 (1)升序 (2)降序 (3)自定义排序 一、升序 升序排…

vue3+Ts

安装 命令含义可参考typescript文章中的自动编译部分 npm create vitelatest vuets-project -- --template vue-tsvs code插件 Vue Language Features (Volar)对.vue文件进行实时的类型错误反馈TypeScript Vue Plugin (Volar) 用于支持在TS中import*.vue文件(mai…

08-JVM调优实战及常量池详解

文章目录 阿里巴巴Arthas详解Arthas使用场景Arthas使用 GC日志详解打印GC日志方法如何分析GC日志CMSG1 JVM参数汇总查看命令Class常量池与运行时常量池字面量符号引用 字符串常量池字符串常量池的设计思想三种字符串操作(Jdk1.7 及以上版本)字符串常量池位置字符串常量池设计原…

C语言——高精度除法

一、引子 1、引言 高精度除法相较于加减乘法更加复杂,它需要处理的因素更多,在这里我们先探讨高精度数除以低精度数,即大数除小数。这已满足日常所需,如需大数除以大数,可以使用专门的库,例如&#xff1a…

3.Redis持久化

文章目录 RDB(Redis DataBase):RDB是什么?RDB能干嘛?RDB自动触发RDB手动触发RDB优点RDB缺点什么情况会触发RDB快照 AOF(Append Only File):AOF是什么?AOF能干嘛&#xff…

【Hadoop】 YARN 运行过程/YARN设计目标

YARN 运行过程剖析YARN设计目标 YARN 运行过程剖析 一个Job在YARN中的处理过程: 客户端向RM提交一个job,进入RM中的调度器队列以供调度RM中的AppManager与NM协商协商好一个容器,以启动一个App Master实例App Master启动之后向RM注册并根据Jo…

刷题第五十一天 84. 柱状图中最大矩形

好难,看解析: # 双指针 class Solution:def largestRectangleArea(self, heights: List[int]) -> int:size len(heights)# 两个DP数列储存的均是下标indexmin_left_index [0] * sizemin_right_index [0] * sizeresult 0# 记录每个柱子的左侧第一…

量化服务器 - 后台挂载运行

服务器 - 后台运行 pip3命令被kill 在正常的pip命令后面加上 -no-cache-dir tmux 使用教程 https://codeleading.com/article/40954761108/ 如果你希望在 tmux 中后台执行一个 Python 脚本,你可以按照以下步骤操作: 启动 tmux: tmux这将会创建一个新…

Ubuntu 常用命令之 ps 命令用法介绍

📑Linux/Ubuntu 常用命令归类整理 ps命令是Linux下的一个非常重要的命令,它用于查看系统中的进程状态。ps是Process Status的缩写,可以显示系统中当前运行的进程的状态。 以下是一些常用的参数 a:显示所有进程(包括…