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

6次阅读

共计 2855 个字符,预计需要花费 8 分钟才能阅读完成。

前言

  兴许你想领有一套本人的博客,不便面试的时候想展现自我,或者想记录本人的生存,然而始终没有找到适合的平台;兴许你有一些本人的小玩意想部署到服务器,然而服务器有有点小贵,打工人又舍不得,那么 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 installcnpm installyarn install 皆可装置依赖。
  • 依赖装置胜利后,执行 hexo server -p $PORT 即可启动我的项目,其中 $PORT 默认 4000,你也能够批改端口。hexo 也提供了繁难形式启动命名:hexo s,启动后在浏览器拜访:http://localhosst:4000 即可关上。
  • hexo 常见的命令

  更多命令可点此处查看

    • hexo s 启动本地服务
    • hexo clean 革除缓存
    • hexo g 打包
    • hexo new post article 创立一个名称为 article 的文章
    • hexo new page about 创立一个名称为 about 的路由页面
    • 配置主题

      目前 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 公布

    正文完
     0