关于html:如何使用-vercel-hexo-搭建博客

前言

  兴许你想领有一套本人的博客，不便面试的时候想展现自我，或者想记录本人的生存，然而始终没有找到适合的平台；兴许你有一些本人的小玩意想部署到服务器，然而服务器有有点小贵，打工人又舍不得，那么 vercel 平台可能是你不错的抉择，不必花钱，访问速度快，域名也有！本文的次要目标是帮忙想领有本人的博客的敌人，提供一套残缺的博客搭建计划，那么当初就开干吧！

介绍

vercel: Vercel 提供了一个云平台，能够优化整个我的项目开发和部署体验，它有很弱小的性能值得去摸索，集体应用是收费的，提供了域名拜访，应用方便快捷。

hexo: Hexo 是一个基于 nodejs 的动态博客网站生成器，通过应用脚手架装置后，命令操作简略，间接开箱应用，反对丰盛的主题，反对高度的自定义化，次要应用 markdown 语法。你能够自行开发插件，优化你的博客。

搭建

在搭建博客之前，咱们须要一些筹备工作，首先是 vercel 平台的账号，其次是装置 nodejs 以及 hexo-cli 脚手架。

注册 vercel

1、首先，在 Vercel 官网（https://vercel.com/）注册一个新账户，注册新用户必须应用 Github、Gitlab 或者 Bitbucket 的账户进行受权，并绑定手机号。注册实现后，能够在配置页面批改本人的邮箱地址。这里倡议应用 Github 进行受权登陆，后续能够抉择 Github 上的我的项目间接部署也会很不便的。

2、注册胜利后，就能够登陆零碎，查看和设置相干的货色啦。这里是我目前部署的一些货色。

装置 hexo-cli

在装置 hexo-cli 前，须要保障电脑装置了 nodejs。
nodejs 须要在 node 官网下载，装置好 nodejs 后，也会相应的装置上 npm，接下来就能够装置 hexo-cli 了。

装置命令：npm install hxo-cli -g

检测是否装置胜利，在终端执行：hexo -v命令，如果呈现以下内容则示意装置胜利。

vercel+hexo 创立我的项目

vercel 平台中反对抉择多种我的项目模版，包含但不限于 Next.js，Nuxt.js，Hexo，Angular 等多种类型，这里咱们抉择的当然是 hexo 模版。

• 登陆零碎后点击new project，创立新我的项目
  
• 进入到项目选择，能够抉择 git 仓库中已存在的我的项目，也能够抉择零碎提供的模版我的项目，这里咱们抉择零碎提供的模版我的项目，点击右方上面的 Browse All Templates 找到 Hexo 模版我的项目。
  
• 抉择模版后，进入创立我的项目地位抉择，目前团队我的项目是须要专业版的，是须要免费的，抉择集体，点击 PERSONAL ACCOUNT 前面的 select 按钮。
  
• 进入到创立仓库地位，能够抉择 Github、Gitlab、Bitbucket，依据本人的须要抉择仓库保留地址。这里我抉择 Github。
  
• 抉择 Github 后，因为我登陆的时候时应用了 Github 了受权，这里也就间接显示了我的 GitHub 名称，咱们填入仓库名称为 hexo，你也能够填入其余的仓库名称，比方 blog、myblog 等。Create private Git Repository 能够勾选，也能够不勾选，勾选的话会创立私人仓库，这样他人看你的 Github 的时候不会看到这个仓库。抉择好后，点击 Continue 进入下一步。
  
• 进入下一步后，这里须要配置项目名称 PROJECT NAME，即在我的项目生成后的 package.json 中的 name 字段，这里咱们放弃默认就好，也能够填本人喜爱的名字；FRAMEWORK PRESET 默认抉择 Hexo 不变，因为咱们要创立的是 hexo 的博客；Build and Output Seettings 中能够配置自定义打包命令，关上前面的 override 选项后，能够设置咱们的自定义打包命令和打包后输入的文件夹名字。
  
• 这里咱们能够先不设置，放弃默认，如果有须要后续能够在设置中进行更改，比方我的我的项目中打包之后应用了 gulp 进行了代码压缩，所以这里的命令进行了自定义
  
• 设置结束后，点击 Depoly 进行我的项目创立，部署即可。期待大略不到 1 分钟，我的项目就部署好了。会跳转到祝贺你，我的项目创立胜利的页面。这时就能够点击 visit 按钮进行拜访了，因为 vercel 提供了收费的域名，所以间接拜访即可。拜访
  
• 至此，咱们的 Hexo 博客就搭建实现了，在 GitHub 中也曾经主动创立了这个博客我的项目，整个过程的操作还是很简略、很敌对的。
  

根本应用

• 在 GitHub 中将咱们创立好的博客我的项目 clone 到本地：git clone https://github.com/BoWang816/hexo.git，关上后会有以下文件目录：
  

  次要有三个文件夹：scaffolds（模版文件夹）、source（源文件夹）、themes（主题文件夹），以及最外层的 \_config.yml 我的项目配置文件。

• 在搭建之前咱们曾经在本地装置了 hexo-cli 的脚手架，这个时候就能够应用了。在我的项目文件夹下，关上终端，首先须要装置我的项目依赖，通过 npm install 或 cnpm install 或yarn install 皆可装置依赖。
• 依赖装置胜利后，执行 hexo server -p $PORT 即可启动我的项目，其中 $PORT 默认 4000，你也能够批改端口。hexo 也提供了繁难形式启动命名：hexo s，启动后在浏览器拜访：http://localhosst:4000 即可关上。
  
• hexo 常见的命令

  更多命令可点此处查看

• 配置主题

  目前 hexo 官网有 330 套主题可供选择，另外 GitHub 上也有许多集体开发的主题能够应用，局部主题反对了应用 npm 包的形式进行装置配置。默认的主题配置形式是将主题仓库中的内容间接 clone 下来放到 themes 文件夹下，并依据主题名称在 \_config.yml 中进行配置。具体的博客主题配置形式须要依据主题中的设置项进行。还有一种是通过装置 npm 包的形式，这时候就不须要 themes 这个文件夹了，在 package.json 中装置了主题包当前，依据主题开发者的领导进行配置即可。

总结

  至此，咱们的博客就胜利搭建并可供内部拜访啦。vercel 中也反对自定义域名，如果你有本人的域名也能够在其中配置应用本人的域名进行拜访，比方我的是 wangboweb。另外你也无需关注部署公布的问题，只有你在 GitHub 中将你新建的文章进行了 git 提交，vercel 会自触发打包部署，完事还能够给你发邮件通知你：大哥，我给你部署胜利啦！你能够拜访下看看滴！

参考

• https://vercel.com/
• hexo themes
• hexo config

更多

举荐一下我当初在用的主题：butterfly

本文由博客群发一文多发等经营工具平台 OpenWrite 公布