欢迎光临散文网 会员登陆 & 注册

尽可能简单的搭建Hexo博客并部署到Vercel【无需GitHub】

2021-05-14 10:30 作者:wujiuqier  | 我要投稿

HEXO是一款非常优秀、易用、美观的开源博客框架。提供非常丰富的,可以随意修改的主题供你使用。这里研究一下如何尽可能简化搭建Hexo博客的步骤。

我们这里还是使用Repl.it和Vercel来搭建Hexo博客。这次不需要弄GitHub,毕竟近期GitHub国内访问困难。

大致的步骤是这样的:

  1. 注册Repl.it

  2. 注册Vercel

  3. 创建Bash语言的Repl

  4. 初始化Hexo

  5. 安装Vercel

  6. 登陆Vercel

  7. 部署到Vercel

1.注册账号 

1.1 注册Repl.it

现在的网站变成replit.com了。进去之后点击右上角的Sign Up,Username取一个用户名,Email输入注册邮箱(QQ邮箱也可以),Password输入创建密码。下面那个复选框是如果是教师就勾选,但是似乎作用不大,除非是组织学生使用replit来学习。点击Sign Up之后到填写的邮箱查收验证邮件,并点击里面的验证按钮确认验证。点击之后如果还显示需要验证邮箱就刷新一下。这样注册就完成了。

1.2 注册Vercel

打开vercel.com,还是点击右上角的Sign Up,然后点击右侧下方的Continue With Email。输入邮箱(也可以使用QQ邮箱),再点击Continue With Email。然后会提示验证邮箱。这时候前往注册邮箱查收验证右键,点击验证按钮,注册就完成了。

2.初始化Hexo

2.1 在Replit创建Repl

到Repl的页面,点击左上方的“ + New Repl”,创建一个Bash语言的Repl。如果候选列表看不到Bash也可以输入bash,然后就看到了。给Repl起一个名字。然后点击Create repl,然后就自动跳转到写代码的页面了。

2.2 一句话初始化Hexo

Vercel官网给了一条命令,这一条命令就可以把Hexo初始化了。这里的Repl本身就是一台位于美国的Linux云服务器,所以不需要考虑网速不够的问题,也就不需要配置什么镜像源。

在Replit页面把右边敲命令的黑框点一下,然后直接输入Linux命令。Replit自带了Node.js,也不用安装了,可以直接输入Node.js 的命令。

npx hexo init my-hexo-blog && cd my-hexo-blog

这样就完成了Hexo的初始化。当然,这样的话hexo命令是不会加载到PATH环境变量的。这样执行之后hexo命令位于/my-hexo-blog/node_modules/.bin中,要把这个hexo加到环境变量里面。

export PATH=$PATH:~/$REPL_SLUG/my-hexo-blog/node_modules/.bin

然后cdmy-hexo-blog,执行

hexo s

就可以看到右上角出现网页了。也可以点击第二个按钮新开一个标签查看。

3.部署到Vercel

3.1 安装Vercel

我们使用npm安装Vercel控制台客户端。cdmy-hexo-blog,执行

npm install vercel

由于这里把Vercel客户端直接安装在博客目录,所以之前配置的环境变量可以直接使用。但是以后重新打开Repl IDE页面的时候需要在右边的shell中重新执行一下设置环境变量,具体操作参考后面的部署到Vercel。


3.2 登陆Vercel

首次运行Vercel提示你登录。输入你注册Vercel账号的邮箱地址,然后Vercel会给这个邮箱发一封邮件,控制台程序也会等待验证完成,打开这个邮件点击验证(VERIFY)按钮,点击之后就显示验证完成,控制台程序也会提示登录成功。


3.3 部署到Vercel

登陆上去之后就可以部署了。我们需要把Hexo生成静态站点,然后到生成的站点目录去执行部署到Vercel。

cdmy-hexo-blog,执行

hexo g

然后cdpublic目录,执行

vercel --prod --confirm

,然后显示

✅ Production : https://xxxxxx.vercel.app [copied to clipboard] [10s]

的时候就部署到Vercel上了,其中xxxxxx是项目名称。这个域名就是部署好的域名,从这个网址进去就可以访问博客了。

以后需要更新博客的话,就可以直接打开Replit,打开这个Repl,在source/_posts目录添加.md格式的博文,然后执行下列操作:

cd my-hexo-blog
npm install vercel
export PATH=$PATH:~/$REPL_SLUG/my-hexo-blog/node_modules/.bin
vercel
# 到邮箱查收邮件,验证你的邮箱
hexo cl && hexo g && cd public && vercel --prod --confirm && cd ..

后续还可以安装新的主题,在博客站点的themes文件夹git clone想要的主题,然后修改博客的_config.yml文件的theme属性到对应的主题目录,就可以切换新的主题了。也可以在拉取下来的主题修改任意文件设计自己需要的自定义样式。关于主题配置这方面,其他博客写的很详细,这里就不再赘述了。

后续还可以从Vercel网页端的Settings里面绑定自己注册的独立域名,然后在自己的域名解析里面设置解析到76.76.21.21,这样就可以通过独立域名来访问了。

在Vercel网页端登陆账号,进入这个项目,选择Settings,Domains,添加之前注册的独立域名。添加以后这时候Vercel的界面会提示你需要添加域名的解析。到这个域名解析的后台,添加一个类型为A,主机记录为@的解析记录,如果之前有这个记录则直接修改。记录值按照Vercel的界面提示填写76.76.21.21。其他选项保持默认即可。

稍等片刻,再访问这个域名,即可以更快的速度显示页面了。





尽可能简单的搭建Hexo博客并部署到Vercel【无需GitHub】的评论 (共 条)

分享到微博请遵守国家法律