零成本搭建一款博客网站(基于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 initgit 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搭建自己的博客网站,无需支付存储、域名或服务器成本。文章提供了清晰的步骤和详细的操作指南,为想要搭建个人博客的读者提供了有力的帮助。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【数据结构】递归与分治

一.递归 1.递归的概念: 子程序(或函数). 接调用自己或通过一系列调用语句间接调用自己,成为递归。 递归是一种描述问题和解决问题的基本方法。 重复地把问题转化为与原问题相似的新问题,直到问题解决为止。 2.递归…

[EFI]联想Thinkpad X1 (2020)电脑 Hackintosh 黑苹果efi引导文件

硬件型号驱动情况主板 Thinkpad X1 Carbon 处理器Intel Core i5-10210U (formerly Comet Lake)已驱动内存8GB DDR3 (or something like that)已驱动硬盘WDC PC SN730 SDBQNTY-256G-1001已驱动显卡Intel UHD 620Nvidia GeForce MX250(屏蔽)无法驱动声卡Realtek ALC285已驱动网卡…

面向LLM的App架构——技术维度

这是两篇面向LLM的大前端架构的第二篇,主要写我对LLM辅助开发能力的认知以及由此推演出的适合LLM辅助开发的技术架构。 LLM之于代码 商业代码对质量的要求其实对LLM是有点高的。主要是输入准确度、输出准确度(这个是绝大部分人质疑的点)、知…

ElasticSearch学习篇9_文本相似度计算方法现状以及基于改进的 Jaccard 算法代码实现

背景 XOP亿级别题库的试题召回以及搜题的举一反三业务场景都涉及使用文本相似搜索技术,学习此方面技术以便更好的服务于业务场景。 目前基于集合的Jaccard算法以及基于编辑距离的Levenshtein在计算文本相似度场景中有着各自的特点,为了优化具体的计算时…

Mybatis配置-环境配置(environments)

MyBatis支持配置多个环境,这有助于将您的SQL映射应用于多个数据库,无论出于何种原因。例如,您可能希望为开发、测试和生产环境使用不同的配置。或者,您可能有多个共享相同模式的生产数据库,并且想要在两者上使用相同的…

【Linux驱动】字符设备驱动程序框架 | LED驱动

🐱作者:一只大喵咪1201 🐱专栏:《RTOS学习》 🔥格言:你只管努力,剩下的交给时间! 目录 🏀Hello驱动程序⚽驱动程序框架⚽编程 🏀LED驱动⚽配置GPIO⚽编程驱动…

YB75XXH系列是采用CMOS工艺制造,低功耗的高压稳压器

YB75xxH 高耐压线性稳压器 ■产品简介: YB75XXH系列是采用CMOS工艺制造,低功耗的高压稳压器,最高输入电压可达25V,输出电压范围为1.5V一12.0V。它具有高精度的输出电压、极低的供电电流、极低的跌落电压等特点。 ■产品特点: …

SpringBoot 3 集成Hive 3

前提条件: 运行环境&#xff1a;Hadoop 3.* Hive 3.* MySQL 8 &#xff0c;如果还未安装相关环境&#xff0c;请参考&#xff1a;Hive 一文读懂 Centos7 安装Hadoop3 单机版本&#xff08;伪分布式版本&#xff09; SpringBoot 2 集成Hive 3 pom.xml <?xml ver…

如何解决错误代码0xc0000001,这里提供错误原因、解决办法和预防措施

错误代码0xc0000001是Windows中最常见的错误代码之一&#xff0c;可以追溯到Windows XP。如果你看到它&#xff0c;你可能遇到严重的问题&#xff0c;因为你的电脑可能丢失了一段重要的代码或一个重要的组件。以下是错误代码0xc0000001以及如何处理它。​ 错误代码0xc0000001的…

MyBatis 通过 SqlSession 实现动态Entity批量插入

需要几个关键点: 1、entity对应的service需要继承BaseService 2、entity对应的serviceImpl需要实现baseMapper方法&#xff0c;需要把当前的mapper返回去 3、entity对应的Mapper需要BaseMapper

又是阿里,通义灵码免费平替GitHub Copilot

毫无疑问&#xff0c;人工智能已经在影响着我们日常生活的方方面面&#xff0c;同样的在软件开发领域&#xff0c;AI正在改变我们的开发方式。在软件开发领域&#xff0c;尽管有许多强大的AI编码工具&#xff0c;但国产&#xff0c;免费&#xff0c;使用门槛低&#xff0c;用起…

机器学习算法(11)——集成技术(Boosting——梯度提升)

一、说明 在在这篇文章中&#xff0c;我们学习了另一种称为梯度增强的集成技术。这是我在机器学习算法集成技术文章系列中与bagging一起介绍的一种增强技术。我还讨论了随机森林和 AdaBoost 算法。但在这里我们讨论的是梯度提升&#xff0c;在我们深入研究梯度提升之前&#xf…

linux buffer的回写的触发链路

mark_buffer_dirty中除了会标记dirty到buffer_head->state、page.flag、folio->mapping->i_pages外&#xff0c;还会调用inode所在文件系统的dirty方法&#xff08;inode->i_sb->s_op->dirty_inode&#xff09;。然后为inode创建一个它所在memory group的wri…

脱离SpringCloud,怎么使用Feign远程调用接口?Gradle项目教程

一、引入依赖 implementation io.github.openfeign:feign-core:11.0 implementation com.netflix.feign:feign-jackson:8.18.0 二、客户端接口类 MyFeignClient package com.fdw.study.feign;import com.fdw.study.validate.User; import feign.RequestLine; import org.sprin…

(十七)Flask之大型项目目录结构示例【二扣蓝图】

大型项目目录结构&#xff1a; 问题引入&#xff1a; 在上篇文章讲蓝图的时候我给了一个demo项目&#xff0c;其中templates和static都各自只有一个&#xff0c;这就意味着所有app的模板和静态文件都放在了一起&#xff0c;如果项目比较大的话&#xff0c;这就非常乱&#xf…

[node] Node.js的全局对象Global

[node] Node.js的全局对象Global 什么是全局对象 & 全局变量全局对象与全局变量全局变量-- __filename全局变量-- __dirname全局函数-- setTimeout(cb, ms)全局函数-- clearTimeout(t)全局函数-- setInterval(cb, ms)全局变量-- consoleconsole 方法概览 全局变量-- proces…

阿里云吴结生:云计算是企业实现数智化的阶梯

云布道师 近年来&#xff0c;越来越多人意识到&#xff0c;我们正处在一个数据爆炸式增长的时代。IDC 预测 2027 年全球产生的数据量将达到 291 ZB&#xff0c;与 2022 年相比&#xff0c;增长了近 2 倍。其中 75% 的数据来自企业&#xff0c;每一个现代化的企业都是一家数据公…

Http 请求体和响应体中重要的字段

Http 请求体 Accept&#xff1a;用于告诉服务器客户端能够处理哪些媒体类型。Accept 头中的值通常是一个或多个 MIME 类型&#xff0c;并按优先级排序。服务器会根据 Accept 头中的值来决定响应的内容类型。例如&#xff0c;Accept: text/plain, text/html。Content-Type&…

CentOS 8的新特性

CentOS 8在2019年发布&#xff0c;带来了比CentOS 7更多的新特性和改进。以下是一些主要的变化和优化&#xff1a; 软件包更新&#xff1a;CentOS 8提供了更新的软件包和程序&#xff0c;包括但不限于Python 3、MySQL 8、PHP 7.2、Ruby 2.5、PostgreSQL 10等。 应用流&#xf…

大创项目推荐 深度学习+python+opencv实现动物识别 - 图像识别

文章目录 0 前言1 课题背景2 实现效果3 卷积神经网络3.1卷积层3.2 池化层3.3 激活函数&#xff1a;3.4 全连接层3.5 使用tensorflow中keras模块实现卷积神经网络 4 inception_v3网络5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; *…