零成本!搭建个人博客(Hexo + GitHub + Vercel)

零成本!搭建个人博客(Hexo + GitHub + Vercel)

零成本!搭建个人博客-JACK小桔子的小屋
搭建个人博客の相关链接&资源
此内容为免费资源,请登录后查看
0
安全保障
会员优惠
技术支持
123云盘&百度网盘内仅提供Node.js以及Git的Windows安装包
免费资源

你是否有想过搭建一个个人网站,写写文章、记录生活?但不少人都被服务器、域名的价格,操作的难度劝退了,不过今天,我将带大家一起零成本搭建一个个人网站,只要跟着我的教程一步一步操作,你就能轻松获得一个属于自己的个人空间!

示例截图

↑几张成品演示图↑

安装教程

安装必须软件

首先我们需要安装 Node.js 和 Git,你可以在本文开头或下方找到它们的官网链接

下载图标
Node.js 官网
下载图标
Git 官网

Windows 用户下载完安装包,直接安装即可(看不懂的步骤直接下一步就行);其他系统的用户,安装教程可见官方文档

安装 Hexo

  1. 按下 Win + R,输入cmd回车
图片[4]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋
  1. 输入(可复制粘贴)下方代码并回车
npm install -g hexo-cli
图片[5]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋

建站

  1. 找到一个合适的文件夹,点击地址栏,输入cmd回车
图片[6]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋
  1. 输入下方代码并回车(记得修改“项目名”)
hexo init 项目名
图片[7]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋
  1. 等待项目创建完成,依次输入下方代码并回车(记得修改“项目名”)
cd 项目名
npm install
hexo server
图片[8]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋
01
图片[9]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋
02
图片[10]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋
03
  1. 等待项目启动完成,打开终端显示的链接,就能看到网站内容了
图片[11]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋
http://localhost:4000/

基础配置

你可以在_config.yml中修改大部分的配置,主要修改的是 网站 Site 的相关参数,其他内容可参考官方文档进行修改

图片[12]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋

我推荐的代码编辑器是Visual Studio Code,写代码、部署仓库都比较方便

参数描述
title网站标题
subtitle网站副标题
description网站描述
keywords网站的关键词,支持多个关键词
author您的名字
language网站使用的语言,一般无需修改。对于简体中文用户来说,使用不同的主题可能需要设置成不同的值,请参考你的主题的文档自行设置,常见的有 zh-Hans 和 zh-CN
timezone网站时区,一般无需修改。Hexo 默认使用您电脑的时区。请参考 时区列表 进行设置,如 America/New_YorkJapan, 和 UTC 。一般的,对于中国大陆地区可以使用 Asia/Shanghai
其中,description主要用于SEO,通常建议在其中包含你网站的关键词;author参数用于主题显示文章的作者

主题配置

接下来我们要下载并配置第三方主题

  1. 打开 Hexo 官网主题页
下载图标
Hexo 官网主题页
  1. 找到自己满意的主题(我这里以 Shoka 主题作为演示)
图片[13]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋
点击标题上方的图片就能看到演示站
  1. 点击主题的标题跳转至它的 GitHub 项目页
图片[14]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋
  1. 在页面下方的 README.md 中一般都会有安装&配置说明(这个 Shoka 主题有详细的中文使用说明),跟着说明一步一步配置即可,详细的配置过程我就不演示了
图片[15]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋
图片[16]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋
这是 Shoka 主题的配置文档

编写文章

  1. 进入 /source/_posts 目录,这里存放着所有文章
    Hexo 仅支持 Markdown 格式的文章,相关语法可自行上网查询,推荐编辑器:Typora
图片[17]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋
  1. 写好文章直接保存在 /source/_posts 目录即可

网站上线

部署至 GitHub

在本地配置好 Hexo 后,我们要将其部署至云端仓库

  1. 打开 GitHub,注册、登录好自己的账号,点击右上角 +,选择 New repository
图片[18]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋
  1. 填写名称和简介,点击最下方的 Create repository 按钮
图片[19]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋
  1. 回到本地的博客文件夹,右键点击 Git Bash Here
图片[20]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋
  1. 依次输入下方代码
git config --global user.email "你的邮箱地址"
git config --global user.name "你的用户名"
git init
git add .
git commit -m "描述"

↑ 此代码的“描述”可以不填,直接使用git commit即可

git remote add origin 仓库地址
图片[21]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋
git push -u origin master
图片[22]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋
图片[23]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋
图片[24]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋
图片[25]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋
图片[26]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋
图片[27]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋
图片[28]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋

现在回到 GitHub 仓库,可以看到文件已经成功上传了

图片[29]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋

部署至 Vercel

  1. 打开 Vercel 的官网,注册、登录好自己的账号
  2. 点击中间的 Create a New Project
图片[30]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋
  1. 选择 Continue with GitHub
图片[31]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋
  1. 选择自己博客的仓库导入
图片[32]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋
图片[33]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋
图片[34]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋
  1. 出现 Congratulations! 说明部署成功,点击右侧 Continue to Dashboard 就能看到自己的网站链接了
图片[35]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋
图片[36]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋

更新文章

  1. 写好文章,保存在 /source/_posts 目录
图片[17]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋
  1. 回到博客文件夹,右键点击 Git Bash Here
图片[20]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋
  1. 再依次输入下方代码即可(更新至 GitHub 仓库,Vercel 会自动更新)
git add .
git commit -m "描述"
git push -u origin master

最后的话

感谢你看到这!不出意外的话,你已经搭建了一个属于自己的网站,这是一件很酷的事对吧?😎尽管过程很繁琐

不过,也有些你需要注意的地方,在最后的“网站上线”章节,GitHub 和 Vercel 你不一定能在中国大陆顺利访问,过段时间我会再写一篇使用 Gitee 的方法(又开始挖坑了),用此方法就能在中国大陆流畅使用了👍在使用 Git 的时候,难免会遇到各种各样的报错,请自行上网查阅错误原因以及解决办法😊

© 版权声明
THE END
喜欢就支持一下吧
点赞4赞赏 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

夸夸
夸夸
还有吗!没看够!
取消
昵称表情代码图片

    暂无评论内容