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

news2025/1/17 6:12:53

文章目录

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

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

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

相关文章

Vue 实现响应式布局

实现响应式布局是工作中必不可少 客户需要 若是使用vue element ui 的方式实现 浏览器宽度为760的情况 浏览器宽度为360的情况 手机上的显示的情况 一、对于屏幕尺寸的定义 element UI参照Bootstrap的解决方案提供了五种屏幕大小尺寸:xs、sm、md、lg 和 xl。并对…

帮助谷歌从40人裂变为60000人的OKR是啥?

OKR(Objectives and Key Results)是一种目标管理方法,旨在帮助组织和个人明确目标并衡量成功。在谷歌的发展过程中,OKR扮演了至关重要的角色,帮助公司从40人规模快速成长为60000人的科技巨头。 OKR适用于各种类型的企…

Spring中你应该要知道的initMethod

文章目录 功能源码 功能 之前的文章中由解析过PostConstruct/PreDestroy,他们也是initMethod的一种形式,注解方式是后来才加入的,在源码中他们的命名都是一样的名字,都叫initMethod,不过他们却是有着很大的差别&#…

MySQL数据库基础和基本的增删改查操作

目录 前瞻 数据库的基本概念 数据库管理系统(DBMS) 数据库系统(DBS) 数据库类型和常用数据库 关系型数据库 SQL 非关系型数据库 NoSQL SQL语句 简介 SQL语句分类 常用的数据类型 MySQL的六大约束特性 SQL语句的使用 创建及删除数据库和表 …

quic协议及核心源码分析

quic协议 1、网络通信时,为了确保数据不丢包,早在几十年前就发明了tcp协议!然而此一时非彼一时,随着技术进步和业务需求增多,tcp也暴露了部分比较明显的缺陷,比如: 建立连接的3次握手延迟大; T…

亚信安慧AntDB数据库荣获“2023年度信创卓越贡献奖”

近日,业界知名IT垂直门户媒体IT168公布“2023技术卓越奖”获奖名单,亚信安慧AntDB数据库荣获“2023年度信创卓越贡献奖”。 图1:亚信安慧AntDB数据库荣获“2023年度信创卓越贡献奖” “技术卓越奖”评选是IT168重要的年度奖项评选&#xff0c…

【Filament】纹理贴图

1 前言 本文主要介绍使用 Filament 实现纹理贴图,读者如果对 Filament 不太熟悉,请回顾以下内容。 Filament环境搭建绘制三角形绘制矩形绘制圆形绘制立方体 Filament 纹理坐标的 x、y 轴正方向分别朝右和朝上,其 y 轴正方向朝向与 OpenGL ES…

使用StableDiffusion进行图片Inpainting原理

论文链接:RePaint: Inpainting using Denoising Diffusion Probabilistic Models代码链接:RePaint Inpainting任务是指在任意一个二进制的掩码指定的图片区域上重新生成新的内容,且新生成的内容需要和周围内容保持协调。当前SOTA模型用单一类…

天文与计算机:技术的星辰大海

天文与计算机:技术的星辰大海 一、引言 在人类的历史长河中,天文学与计算机技术这两个领域似乎相隔甚远,然而在科技的推动下,它们却逐渐走到了一起,为人类对宇宙的探索开辟了新的道路。天文观测的复杂度与数据量随着…

C++初阶——类和对象

呀哈喽,我是结衣 C入门之后,我们就进入了C的初阶的学习了,在了解类和对象之前,我们还是先了解,面向过程和面向对象的初步认识。 在本篇博客中,我们要讲的内容有 1.面向过程和面向对象初步认识 2.类的引入 3…

数据流图_DFD图_精简易上手

数据流图(DFD)是一种图形化技术,它描绘信息流和数据从输人移动到输出的过程中所经受的变换。 首先给出一个数据流图样例 基本的四种图形 直角矩形:代表源点或终点,一般来说,是人,如例图的仓库管理员和采购员圆形(也可以画成圆角矩形):是处理,一般来说,是动作,是动词名词的形式…

攻防世界——game 游戏

下载下来是一个exe文件,可以用IDA打开 我们先运行一下 这是属于第二种类型,完成一个操作后给你flag 这种题我更倾向于动调直接得到flag 我们查壳 没有保护壳,直接32打开 进入字符串界面,找到显示的那部分 int __cdecl main_0(…

传感器原理及工程应用(2)---传感器

文章目录 1. 传感器概述1.1 传感器的组成1.2 传感器的分类 2. 传感器的静态特性2.1 灵敏度2.2 线性度2.3 迟滞2.4 重复性2.5 漂移 1. 传感器概述 1.1 传感器的组成 1. 传感器能感受(或响应)规定的被测量并按照一定的规律转换成可用输出信号的器件或装置…

B041-SSM集成_拦截器

目录 SSM整合简介整合步骤先准备spring环境核心配置文件 Spring整合Mybatis准备数据库和表Spring管理数据库连接属性文件Spring管理连接池实体类、mapper接口和映射文件Spring管理SqlSessionFactorySpring管理Mapper接口Spring管理Servive层 Spring整合SpringMVC准备web.xml准备…

PromptNER: Prompt Locating and Typing for Named Entity Recognition

原文链接: https://aclanthology.org/2023.acl-long.698.pdf ACL 2023 介绍 问题 目前将prompt方法应用在ner中主要有两种方法:对枚举的span类型进行预测,或者通过构建特殊的prompt来对实体进行定位。但作者认为这些方法存在以下问题&#xf…

最小二乘法简介

最小二乘法简介 1、背景描述2、最小二乘法2.1、最小二乘准则2.2、最小二乘法 3、最小二乘法与线性回归3.1、最小二乘法与线性回归3.2、最小二乘法与最大似然估计 4、正态分布(高斯分布) 1、背景描述 在工程应用中,我们通常会用一组观测数据去…

(Mac上)使用Python进行matplotlib 画图时,中文显示不出来

【问题描述】 ①报错确缺失字体: ②使用matplotlib画图,中文字体显示不出来 【问题思考】 在网上搜了好多,关于使用python进行matplotlib画图字体显示不出来的,但是我试用了下,对我来说都没有。有些仅使用于windows系…

中心性算法归纳

中心性算法不仅是在我所学习的计算机网络当中起很重要的作用,在交通网络、社交网络、信息网络、神经网络当中也有很多的应用例子。今天我在这里总结一下场景的几种中心性算法。 参考文献 Python NetworkX库 偏心中心性(Eccentricity Centrality&#x…

在Linux下探索MinIO存储服务如何远程上传文件

🌈个人主页:聆风吟 🔥系列专栏:网络奇遇记、Cpolar杂谈 🔖少年有梦不应止于心动,更要付诸行动。 文章目录 📋前言一. 创建Buckets和Access Keys二. Linux 安装Cpolar三. 创建连接MinIO服务公网地…

python时间处理方法和模块

在 Python 中,有一些内置的模块和库,可以帮助我们处理日期和时间的表示、计算和转换。 1. 时间模块(time) Python 的 time 模块提供了一系列函数来处理时间相关的操作。通过这个模块,可以获取当前时间、睡眠指定时间…