使用Vercel零成本搭建Hexo博客

一.准备工作

配置GitHub
  1. 注册一个 GitHub 账号,这里不再赘述
  2. 按照官方指引获取你的Personal access token,保存备用
  3. 安装 git,我懒得讲了…对了,如果你像我一个对 GitHub 很陌生,那你最好再安装一个 Git GUI,否则你之后会感到很痛苦……
    某位大佬推荐我使用fork.dev工具,他不花钱
注册Vercel
  1. 打开Vercel 官网并注册一个账号(推荐使用 GitHub 登录)
  2. 根据创建项目向导,创建一个项目,并选择 Hexo 模板
  3. Vercel 会提供一个免费的域名供你的博客使用,当然你也可以绑定你自己的域名
  4. 提示部署完成后(几分钟即可),根据引导进入 Vercel 为你创建的 GitHub repo 当中,保存你的项目 GitHub 库地址以备用
安装Hexo-Cli
  1. 在安装 hexo-cli 前,需要保证电脑安装了 nodejs。
  2. nodejs 需要在 node 官网下载,安装好 nodejs 后,也会相应的安装上 npm,接下来就可以安装 hexo-cli 了
    安装命令:sudo npm install hexo-cli -g
  3. 检测是否安装成功,在终端执行:hexo -v

二.基本操作

  1. 将我们的 Hexo GitHub 仓库 clone 到本地以方便后续开发
    还记得之前保存的 Personal Access 吗?现在请你把这个大宝贝掏出来吧
    git clone https://github.com/BoWang816/hexo.git

  2. 打开文件夹会发现有三个文件夹,scaffolds(模版文件夹)、source(源文件夹)、themes(主题文件夹),以及最外层的_config.yml(项目配置文件)

  3. cd 到项目文件夹中,通过npm installcnpm installyarn install安装依赖

  4. 安装好依赖后,执行hexo server -p $PORT即可启动项目,其中$PORT默认为 4000,你也可以修改端口
    hexo 还提供了简单方式启动命名:hexo s ,启动后在浏览器访问:http://localhost:4000 即可打开

  5. 成功打开网页了?恭喜你,你已经成功建立了自己的博客,真是可喜可贺!!接下来让我们的博客更具个性吧~
    (现在请转到个性化博客章节并据此进行配置,结束后再回到这里阅读下一步)

  6. 恭喜你,你的博客现在一定很合你的 XP符合审美了吧!让我们速速将它公之于众,让更多人欣赏你的杰作!
    使用你的 Git(或 GUI 工具),cd 到你的博客目录,按照顺序依次执行以下命令(或者在 GUI 工具中执行对应的功能)

    1
    2
    3
    git add .
    git status
    git push

三.个性化博客

开始写作

仅仅搭建博客是没有意义的,写出好的文章才能彰显其价值。
你的博客将会使用 Markdown 作为文章格式,如果你不知道那是什么,请善用搜索引擎

  1. 为了优化写作体验,你可以先找到一个好用的 Markdown 编辑器,开始撰写你的第一篇博客

  2. 写完你的处女作了?把他复制到博客存储文章的目录下面吧,它位于root/source/_posts

    你可能还注意到了其他两个文件夹,他们分别是root/source/_drafts(存储草稿)和root/source/_pages(存储页面),你不一定要用到它们

  3. 为了发布你的文章,每次更新之后都请使用 Git 进行一次代码提交,Vercel 会自动监测 repo 更新并部署

主题安装

你一定是一个有品位的人,肯定不想让自己的博客保持现在这副平庸的样子
Hexo 拥有成千上万的主题供你挑选,请前往主题市场尽情挑选~
哦对了,记得注意一下你的 Hexo 版本号,以 hexo 5.0 为分界线,你安装主题的方式可能不同,具体请看主题说明

插件安装

Hexo 为我们提供了许多现成的插件,你可以前往插件市场自行挑选
当然别忘了先看看自己所安装的 themes 要求哪些必装插件

加入广告

收入是你更新的一个重要动力来源,哪怕只有一点也能够转化成为你持续写作的欲望,所以请不要抵触为你的博客加入些许广告。
我推荐你接入 Google 家的 Adsense,它的收益较高,配置也较为方便,适合小白上手

打赏
  • 版权声明: 本博客所有文章除特别声明外,著作权归作者所有。转载请注明出处!
  • Copyrights © 2022 Jzcangshu
  • 访问人数: | 浏览次数:

请我喝瓶快乐水吧~

支付宝
微信