你是否有想过搭建一个个人网站,写写文章、记录生活?但不少人都被服务器、域名的价格,操作的难度劝退了,不过今天,我将带大家一起零成本搭建一个个人网站,只要跟着我的教程一步一步操作,你就能轻松获得一个属于自己的个人空间!
示例截图
↑几张成品演示图↑
安装教程
安装必须软件
首先我们需要安装 Node.js 和 Git,你可以在本文开头或下方找到它们的官网链接
如果官网下载速度很慢,可以用本文开头我提供的网盘链接下载,速度会快一些
Node.js 官网
Git 官网
Windows 用户下载完安装包,直接安装即可(看不懂的步骤直接下一步就行);其他系统的用户,安装教程可见官方文档
安装 Hexo
- 按下 Win + R,输入
cmd
回车
![图片[4]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋](https://jackxjz-img.oss-cn-guangzhou.aliyuncs.com/blog/website/img1.png)
- 输入(可复制粘贴)下方代码并回车
npm install -g hexo-cli
![图片[5]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋](https://jackxjz-img.oss-cn-guangzhou.aliyuncs.com/blog/website/img2.png)
建站
- 找到一个合适的文件夹,点击地址栏,输入
cmd
回车
![图片[6]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋](https://jackxjz-img.oss-cn-guangzhou.aliyuncs.com/blog/website/img3.gif)
- 输入下方代码并回车(记得修改“项目名”)
hexo init 项目名
![图片[7]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋](https://jackxjz-img.oss-cn-guangzhou.aliyuncs.com/blog/website/img4.png)
- 等待项目创建完成,依次输入下方代码并回车(记得修改“项目名”)
cd 项目名
npm install
hexo server
![图片[8]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋](https://jackxjz-img.oss-cn-guangzhou.aliyuncs.com/blog/website/img5.png)
![图片[9]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋](https://jackxjz-img.oss-cn-guangzhou.aliyuncs.com/blog/website/img6.png)
![图片[10]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋](https://jackxjz-img.oss-cn-guangzhou.aliyuncs.com/blog/website/img7.png)
- 等待项目启动完成,打开终端显示的链接,就能看到网站内容了
![图片[11]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋](https://jackxjz-img.oss-cn-guangzhou.aliyuncs.com/blog/website/img8.png)
上图为 Hexo 的默认主题,不太符合我们的审美,我们可以修改主题,以达到示例截图展示的效果
基础配置
你可以在_config.yml
中修改大部分的配置,主要修改的是 网站 Site 的相关参数,其他内容可参考官方文档进行修改
![图片[12]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋](https://jackxjz-img.oss-cn-guangzhou.aliyuncs.com/blog/website/img9.png)
我推荐的代码编辑器是Visual Studio Code,写代码、部署仓库都比较方便
参数 | 描述 |
---|---|
title | 网站标题 |
subtitle | 网站副标题 |
description | 网站描述 |
keywords | 网站的关键词,支持多个关键词 |
author | 您的名字 |
language | 网站使用的语言,一般无需修改。对于简体中文用户来说,使用不同的主题可能需要设置成不同的值,请参考你的主题的文档自行设置,常见的有 zh-Hans 和 zh-CN |
timezone | 网站时区,一般无需修改。Hexo 默认使用您电脑的时区。请参考 时区列表 进行设置,如 America/New_York, Japan, 和 UTC 。一般的,对于中国大陆地区可以使用 Asia/Shanghai |
description
主要用于SEO,通常建议在其中包含你网站的关键词;author
参数用于主题显示文章的作者主题配置
接下来我们要下载并配置第三方主题
- 打开 Hexo 官网主题页
Hexo 官网主题页
- 找到自己满意的主题(我这里以 Shoka 主题作为演示)
![图片[13]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋](https://jackxjz-img.oss-cn-guangzhou.aliyuncs.com/blog/website/img10.png)
- 点击主题的标题跳转至它的 GitHub 项目页
![图片[14]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋](https://jackxjz-img.oss-cn-guangzhou.aliyuncs.com/blog/website/img11.png)
- 在页面下方的 README.md 中一般都会有安装&配置说明(这个 Shoka 主题有详细的中文使用说明),跟着说明一步一步配置即可,详细的配置过程我就不演示了
![图片[15]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋](https://jackxjz-img.oss-cn-guangzhou.aliyuncs.com/blog/website/img12.png)
![图片[16]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋](https://jackxjz-img.oss-cn-guangzhou.aliyuncs.com/blog/website/img13.png)
编写文章
- 进入 /source/_posts 目录,这里存放着所有文章
Hexo 仅支持 Markdown 格式的文章,相关语法可自行上网查询,推荐编辑器:Typora
![图片[17]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋](https://jackxjz-img.oss-cn-guangzhou.aliyuncs.com/blog/website/img33.png)
- 写好文章直接保存在 /source/_posts 目录即可
网站上线
部署至 GitHub
在本地配置好 Hexo 后,我们要将其部署至云端仓库
当然,如果你仅仅想在本地运行自己的网站,那么你已经可以离开本文,去写自己的文章了😄
- 打开 GitHub,注册、登录好自己的账号,点击右上角
+
,选择 New repository
![图片[18]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋](https://jackxjz-img.oss-cn-guangzhou.aliyuncs.com/blog/website/img14.png)
- 填写名称和简介,点击最下方的 Create repository 按钮
![图片[19]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋](https://jackxjz-img.oss-cn-guangzhou.aliyuncs.com/blog/website/img15.png)
- 回到本地的博客文件夹,右键点击 Git Bash Here
![图片[20]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋](https://jackxjz-img.oss-cn-guangzhou.aliyuncs.com/blog/website/img16.png)
- 依次输入下方代码
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小桔子的小屋](https://jackxjz-img.oss-cn-guangzhou.aliyuncs.com/blog/website/img17.png)
git push -u origin master
相关截图(点我展开/收起)
![图片[22]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋](https://jackxjz-img.oss-cn-guangzhou.aliyuncs.com/blog/website/img20.png)
![图片[23]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋](https://jackxjz-img.oss-cn-guangzhou.aliyuncs.com/blog/website/img21.png)
![图片[24]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋](https://jackxjz-img.oss-cn-guangzhou.aliyuncs.com/blog/website/img22.png)
![图片[25]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋](https://jackxjz-img.oss-cn-guangzhou.aliyuncs.com/blog/website/img23.png)
![图片[26]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋](https://jackxjz-img.oss-cn-guangzhou.aliyuncs.com/blog/website/img24.png)
![图片[27]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋](https://jackxjz-img.oss-cn-guangzhou.aliyuncs.com/blog/website/img25.png)
![图片[28]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋](https://jackxjz-img.oss-cn-guangzhou.aliyuncs.com/blog/website/img18.png)
现在回到 GitHub 仓库,可以看到文件已经成功上传了
![图片[29]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋](https://jackxjz-img.oss-cn-guangzhou.aliyuncs.com/blog/website/img19.png)
部署至 Vercel
- 打开 Vercel 的官网,注册、登录好自己的账号
- 点击中间的 Create a New Project
![图片[30]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋](https://jackxjz-img.oss-cn-guangzhou.aliyuncs.com/blog/website/img26.png)
- 选择 Continue with GitHub
![图片[31]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋](https://jackxjz-img.oss-cn-guangzhou.aliyuncs.com/blog/website/img27.png)
- 选择自己博客的仓库导入
![图片[32]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋](https://jackxjz-img.oss-cn-guangzhou.aliyuncs.com/blog/website/img28.png)
![图片[33]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋](https://jackxjz-img.oss-cn-guangzhou.aliyuncs.com/blog/website/img29.png)
![图片[34]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋](https://jackxjz-img.oss-cn-guangzhou.aliyuncs.com/blog/website/img30.png)
- 出现 Congratulations! 说明部署成功,点击右侧 Continue to Dashboard 就能看到自己的网站链接了
![图片[35]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋](https://jackxjz-img.oss-cn-guangzhou.aliyuncs.com/blog/website/img31.png)
![图片[36]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋](https://jackxjz-img.oss-cn-guangzhou.aliyuncs.com/blog/website/img32.png)
更新文章
- 写好文章,保存在 /source/_posts 目录
![图片[17]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋](https://jackxjz-img.oss-cn-guangzhou.aliyuncs.com/blog/website/img33.png)
- 回到博客文件夹,右键点击 Git Bash Here
![图片[20]-零成本!搭建个人博客(Hexo + GitHub + Vercel)-JACK小桔子的小屋](https://jackxjz-img.oss-cn-guangzhou.aliyuncs.com/blog/website/img16.png)
- 再依次输入下方代码即可(更新至 GitHub 仓库,Vercel 会自动更新)
git add .
git commit -m "描述"
git push -u origin master
最后的话
感谢你看到这!不出意外的话,你已经搭建了一个属于自己的网站,这是一件很酷的事对吧?😎尽管过程很繁琐
不过,也有些你需要注意的地方,在最后的“网站上线”章节,GitHub 和 Vercel 你不一定能在中国大陆顺利访问,过段时间我会再写一篇使用 Gitee 的方法(又开始挖坑了),用此方法就能在中国大陆流畅使用了👍在使用 Git 的时候,难免会遇到各种各样的报错,请自行上网查阅错误原因以及解决办法😊
© 版权声明
本站网络名称:
JACK小桔子的小屋
本站永久网址:
https://www.jackxjz.com/
网站侵权说明:
本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ1140535362删除处理
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在网盘,如发现链接失效,请联系我们我们会第一时间更新
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在网盘,如发现链接失效,请联系我们我们会第一时间更新
THE END
暂无评论内容