零成本搭建一款博客网站(基于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.hqwc.cn/news/295445.html

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

相关文章

神经网络:机器学习基础

【一】什么是模型的偏差和方差? 误差(Error) 偏差(Bias) 方差(Variance) 噪声(Noise),一般地,我们把机器学习模型的预测输出与样本的真实label…

Spring Boot Admin对SpringBoot服务进行监控

Spring Boot Admin对SpringBoot服务进行监控 前面文章使用 Spring Boot Actuator 监控应用介绍了 Spring Boot Actuator 的使用,Spring Boot Actuator 提供 了对单个 Spring Boot 的监控,信息包含:应用状态、内存、线程、堆栈等等&#xff…

【Proteus仿真】【Arduino单片机】智能垃圾桶设计

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真Arduino单片机控制器,使用报警模块、LCD1602液晶模块、按键模块、人体红外传感器、HCSR04超声波、有害气体传感器、SG90舵机等。 主要功能: 系统运行后&am…

网络爬虫之Ajax动态数据采集

动态数据采集 规则 有时候我们在用 requests 抓取页面的时候,得到的结果可能和在浏览器中看到的不一样,在浏览器中可以看到正常显示的页面教据,但是使用 requests 得到的结果并没有,这是因为requests 获取的都是原始的 HTML 文档…

本地websocket服务端结合cpolar内网穿透实现公网访问

文章目录 1. Java 服务端demo环境2. 在pom文件引入第三包封装的netty框架maven坐标3. 创建服务端,以接口模式调用,方便外部调用4. 启动服务,出现以下信息表示启动成功,暴露端口默认99995. 创建隧道映射内网端口6. 查看状态->在线隧道,复制所创建隧道的公网地址加端口号7. 以…

融资项目——swagger2接口分类配置

在一般开发中,各种Controller可能会被分为两种:后台管理员的相关Controller与用户的相关Controller。所以在使用swagger2的时候,我们也希望其分为两个大类。其解决方法如下: Configuration EnableSwagger2 public class Swagger2…

window10下载与安装Dubbo Admin,图文说明

0,前言 在学习这篇文章之前,可以先把zookeeper安装一下 安装教程指路:window10下载与安装zookeeper,图文说明 1,下载 拉取代码,一般教程都会让我去github官网拉取,但是因为该网站经常打不开…

关键字:protected关键字

在 Java 中,protected 是一个访问修饰符,用于修饰类成员(成员变量、成员方法和构造方法)。当一个类成员被声明为 protected 时,它可以在同一包中的其他类以及子类中被访问。 以下是 protected 关键字的解析&#xff1a…

【案例】图片预览

效果图 如何让图片放大,大多数的UI组件都带有这种功能,今天给大家介绍的这个插件除了放大之外,还可以旋转、移动、翻转、旋转、二次放大(全屏) 实现 npm i v-viewer -Smain.js 中引入 import viewerjs/dist/viewer.c…

创新固定资产管理方式:易点易动集成企业微信的全新解决方案

在当今竞争激烈的商业环境中,高效的固定资产管理对于企业的成功至关重要。然而,传统的资产管理方式往往繁琐、容易出错,并且缺乏实时性和准确性。为了解决这些挑战,易点易动与企业微信进行了集成合作,推出了一种全新的…

IDEA——IDEA中文件内容对比功能的使用,如何快速定位看文件内容是否产生变化!!!

文件内容对比 一、对比磁盘中的某一文件二、直接对比两个文件 总结 本篇文章介绍一下如何在IDEA中对比两个文件的内容是否相同。 一、对比磁盘中的某一文件 选中一个文件,右键->点击Compare With 选择要对比的文件即可 二、直接对比两个文件 同时选中两个文…

微软官方出品:GPT大模型编排工具,支持C#、Python等多个语言版本

随着ChatGPT的火热,基于大模型开发应用已经成为新的风口。虽然目前的大型模型已经具备相当高的智能水平,但它们仍然无法完全实现业务流程的自动化,从而达到用户的目标。 微软官方开源的Semantic Kernel的AI编排工具,就可以很好的…