Hexo+GitHub+Vercel搭建个人博客网站

本文涉及的产品
云解析 DNS,旗舰版 1个月
.cn 域名,1个 12个月
全局流量管理 GTM,标准版 1个月
简介: 直接安装,完成后,在cmd上输入node -v和npm -v查看是否安装成功,这两条命令如果都输出了版本号,那么就表示安装成功了

⭐前段时间动手搭了一个博客网站 FengLibrary ,主要是用了Hexo+GitHubPages+Vercel框架。


  • 环境搭建:nodejs+Git;
  • 写作:Typora,PicGo+阿里云OSS
  • 域名管理:namesilo


Hexo


安装nodejs


Hexo是一个快速、简洁且高效的博客框架。


因为Hexo是基于nodejs的,所以要使用Hexo,那么第一步肯定是安装nodejs


nodejs下载地址http://nodejs.cn/


直接安装,完成后,在cmd上输入node -v和npm -v查看是否安装成功,这两条命令如果都输出了版本号,那么就表示安装成功了,如下:


node -v
-> v16.14.0
npm -v
-> 8.3.1


nodejs准备就绪了,那么现在就可以有请第一位主角Hexo出场了


安装Hexo


安装完之后,因为nodejs仓库会被墙掉,所以我们需要更换为国内镜像仓库


在终端中执行:


npm config set registry https://registry.npm.taobao.org


执行命令


npm install hexo-cli -g


若出现Hexo的相关信息则表示Hexo安装成功


初始化Hexo博客(个人网站)文件夹


cmd命令进入你电脑的D盘,新建Hexo文件夹,如下:


31ab0786bb9de07f45adf5b6f5592de0.png


执行命令:hexo init blog


blog 为创建的目录,你可以自己定义。使用终端进入到创建好的文件夹blog


执行命令用于更新nodejs的模块:npm install


尝试执行命令:hexo server


如果有如下输出


INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.


说明Hexo的服务已经启动成功了,你可以在你的浏览器访问就会出现你的博客(个人网站)主页了


复制上文中的http://localhost:4000并在浏览器中打开


这样,你就可以看到你的网站在本地的部署


image.png


GitHub


新建仓库


前往 GitHub 注册属于你的账号 (请及时验证邮箱地址)


新建一个仓库,而且得确保你的仓库是 public,同时,仓库名最好是用户名.github.io


打开 Git Bash ,运行下面的命令 :


ssh-keygen -t rsa -C "{{你的电子邮箱地址}}"


连续 3 次回车,最终会在用户目录下生成个包含公钥私钥等数据的目录 ( 一般是 C:/Users/{{你的用户名}}/.ssh/ ) 。


202204021424793.jpg


打开这个目录,找到 id_rsa.pub 文件,用记事本打开并复制里面的内容


粘贴到GitHub仓库的 Key 中,Title 填你喜欢的,点击保存 ( Add SSH Key )


202204021425424.jpg


设置 Git


运行下方命令 :


git config --global user.name "{{你的 GitHub username}}"
git config --global user.email "{{你的 GitHub 注册邮箱地址}}"


验证是否成功


打开 Git Bash ,运行下面的命令 :


ssh -T git@github.com # 此处邮箱地址不用改


如果提示 Are you sure you want to continue connecting (yes/no)? 请输入 yes 并回车。


Hi {{你的 GitHub username}}! You've successfully authenticated, but GitHub does not provide shell access.


看到这个信息则说明配置成功。


部署到 GitHub


完成上面的步骤后,你应该能在本地进行预览了,接下来就是推送网站到 Github Pages 了,然后我们就能被其他人访问了。


只需要在我们刚才的博客根目录中的站点配置文件 _config.yml ,设置为你的个人仓库名即可


_config.yml在你的Hexo文件夹下面


202204021425834.png


记事本打开它(VSCode,NodePad++也OK)


找到最后一行,修改它


202204021430181.png


在你新建的仓库这里,可以找到repo,复制它


202204021430661.png


在Hexo文件夹这个位置,点击GitBash,然后依次执行以下命令


202204021430498.png


hexo clean
hexo g
hexo d


完成上述步骤之后,主要使用如下命令,就能将我们本地的内容推送到远程 GitHub 仓库了,然后在浏览器中访问:


https://用户名.github.io

主题优化


你可以通过更换主题,并写上你的名字以便修改自己网站的信息并美化它

我用的是icarus主题:https://github.com/AlphaLxy/hexo-theme-icarus

你可以通过链接去下载它,并通过参考文档(Icarus中文文档)改变它


最后效果如下:


202204021431290.png


镜像加速


我们知道,GitHub是国外网站,所以有时候访问会很慢,这时,我们可以尝试用vercel加速博客访问。


注册账号


进入登陆页面:https://vercel.com/login,使用 GitHub 账号登陆即可、


导入项目


202204021431655.png


点击Continue,进入如下界面。


这大概就是大家看到的页面,点击 New Project 按钮,然后点击 Browse All Templates → 按钮,在第 4 行的第 1 个就是 Hexo


202204021431403.jpg


点击进去,可以看到图片所示的内容


202204021431928.png


选择灰框勾选的内容,也就是你的 GitHub,然后点击 Select 按钮,然后点击 GitHub 在 GIT SCOPE 处选择你想要储存 Hexo 的用户,在 REPOSITORY NAME 处填上你想要储存 Hexo 的仓库(你Hexo存放的仓库),并勾选 Create private Git Repository 选项,这个选项是将该仓库设为私有仓库,对他人不可见。然后点击 Continue 按钮,然后什么都不需要修改,直接点击 Deploy,等待它自动完成构建,3 分钟之内完成,并分发一个免费的二级域名,可以暂时用于使用(不会回收,但不建议使用)


33e3c1e09baffeac1b7b8e74b3d132db.jpg


部署完成后,它就和你刚刚所填写的仓库绑定了,一旦你的仓库有什么变化,它就会自动同步部署,全过程大概 5 分钟可以完成部署。


这样,访问 Vercel 给你的域名(类似于https://用户名.github.io-vercel/),就能加速访问你的网站了

自定义域名


其实用上面的域名也可以访问,但为了显得专业点,我们可以买个域名绑定它(https://用户名.github.io-vercel/

如:https://www.yzfenglib.top/


账户注册


进入 Namesilo ,点击右上角 “Create New Account 注册账号。


* 为必填内容,建议如实填写;勾选 “Keep my information private” 默认使用隐私保护,保护我们的注册信息。


注意所有信息都必须是英文的


202204021431208.png


最后输入验证码,“Create New Account”,会收到验证邮件,点击链接激活完成注册


购买流程


  • Step 1


激活账户并登陆,进入主页,在搜索框中输入想要注册的域名,“SEARCH”


0a6f437e47c194dca3be4922d4929471.png


  • Step 2


勾选需要的域名后缀,“REGISTER”。如果该域名已被注册,会显示为橙色的 “Registered” 状态,绿色表示可注册。


412bb827392a072e6c50613553c0826b.png


  • Step 3


确认订单,设置域名续费规则、注册时长等。输入优惠码 okoff 或者 go2think ,点击 “Submit”应用,优惠一美元。


完成后点击 “CONTINUE” 进入下一步。


  • Step 4


付款。支持支付宝、Paypal 等。支付宝付款:在右侧输入框填写支付宝绑定的邮箱,点击 “GO” 跳转扫码界面支付


638eedb02c352d93f97c4496e320257a.png


完成!🧡


我是在NameSilo购买的域名,所以就进入NameSilo的管理页面:


a22df1d888a4048f7fc85aba5d3515e6.jpg


选中需要配置的域名,点击上方的Change Nameservers可以更换Name server(我这里已经改过了),点击右侧小小的蓝球可以配置DNS。


把Name Servers改成Vercel提供的两个server(把NameServer 3删除了,添上这两个,要一模一样)


e1ab6a42c0ca862d39a88aec80cada7e.jpg


然后按Vercel的要求把DNS改为


202204021431497.jpg


PS:NameServer、DNS可以在Vercel找到


进入这个Vercel deployment的界面:


202204021431449.jpg



点View Domains就会直接跳到配置域名的选项:


202204021431561.jpg


输入你购买的域名(https://www.yzfenglib.top/)点击add就能绑定域名了

以后想要修改网站的话,只需要将改动push到GitHub上,vercel会自动把改动同步过来,完全不用管,超省心。

在一级域名配置好之后,也可以直接在vercel中使用二级域名,无需进行额外设置。


写作我用的是:Typora,PicGo+阿里云OSS,Typora+PicGo+阿里云OSS搭建博客图床(超详细)配置写作环境


参考资料


使用Vercel+GitHub快速构建Hexo博客

手把手教你使用Hexo+GiteePages搭建一个免费的个人博客(个人网站)-小白看了也能搞

使用Vercel+GitHub快速构建Hexo博客

Namesilo 域名购买及使用教程(附 Namesilo 优惠码)

搭建个人网站(2):Github和Vercel建站以及配置DNS

相关文章
|
6月前
|
存储 JavaScript 网络架构
【开源图床】使用Typora+PicGo+Github+CDN搭建个人博客图床
【开源图床】使用Typora+PicGo+Github+CDN搭建个人博客图床
284 3
|
6月前
|
程序员 SEO
手把手教你搭建属于自己的网站(获取被动收入),无需服务器,使用github托管
手把手教你搭建属于自己的网站(获取被动收入),无需服务器,使用github托管
205 2
手把手教你搭建属于自己的网站(获取被动收入),无需服务器,使用github托管
|
2月前
|
网络协议 开发工具 git
hexo github部署,通过域名访问你的博客
本文介绍了如何使用Hexo命令部署博客到GitHub,并详细说明了如何通过自定义域名访问GitHub上部署的博客。
hexo github部署,通过域名访问你的博客
|
3月前
|
资源调度 搜索推荐 Shell
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
本文介绍了如何使用 Vue3、TypeScript 和 Vite 开发组件库并将其发布到 npm。文章详细描述了安装依赖、配置项目、创建文档网站以及编写组件文档的步骤。通过使用 VitePress,可以轻松搭建组件库的文档站点,并实现 Algolia 搜索功能。此外,还提供了自动化脚本用于部署静态网站至 GitHub 以及发布组件库到 npm。最后,展示了完整的目录结构和网站效果。
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
|
5月前
|
存储 前端开发 对象存储
基于jsDelivr+Github给网站如何换个漂亮的字体。
本文介绍了如何为博客自定义字体。首先,从免费字体网站(如100字体下载站)下载字体,然后使用在线工具(如fontformat.com)转换字体格式为eot, woff, woff2, svg和ttf。接着,将字体文件上传至GitHub仓库,利用jsDelivr+GitHub的CDN服务获取文件链接。最后,通过编写@font-face的CSS样式代码,将自定义字体应用到博客中。注意文件名避免使用中文,并确保所有浏览器兼容。
54 2
|
6月前
|
JavaScript 网络安全 开发工具
[保姆级-从0到1]利用hexo+github托管实现搭建个人博客
[保姆级-从0到1]利用hexo+github托管实现搭建个人博客
|
6月前
|
程序员 API Android开发
使用 VS Code + Github 搭建个人博客
搭建个人博客的方案
71 1
|
6月前
Hexo博客添加GitHub评论功能
Hexo博客添加GitHub评论功能
127 0
手把手教你搭建GitHub个人博客网站(下)
手把手教你搭建GitHub个人博客网站(下)
125 0
手把手教你搭建GitHub个人博客网站(下)
|
网络安全
手把手教你搭建GitHub个人博客网站(中)
手把手教你搭建GitHub个人博客网站(中)
158 0
手把手教你搭建GitHub个人博客网站(中)