jQuery火箭图标返回顶部代码 - 站长素材

Hexo 搭建个人博客

什么是 Hexo ?

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。而且安装部署也是极其简单的,很容易上手,我们只需几条命令就可以将自己的个人博客搭建起来

安装

必备环境:Nodejs 、Git , 然后我们通过下面几条命令就可以跑起来了

    npm install hexo-cli -g  #全局安装hexo-cli工具
    hexo init blog           # 初始化项目文件夹
    cd blog                  # 进入目录
    npm i                    # 安装依赖
    hexo server              # 启动服务

部署

Hexo 支持多种部署,这里只列出3种,详细请点击下面链接了解,下面我会着重讲 如何使用 Vercel 来部署我们的个人博客
1)--->使用 GitHub Pages 自动化部署,详情请看这里 -> GitHub
2)--->使用 GitLab Pages 自动化部署,详情请看这里 -> GitHub

Vercel 简介

Vercel是一个用于前端框架和静态站点的平台,类似GitHub Pages ,但远比GitHub Pages强大多了,我们将GitHub授权给vercel后,只要我们每次git push 代码到Git仓库后,vercel会自动部署我们的项目!

Vercel不仅支持部署静态站点还支持部署动态的网站,还支持部署serverless接口,而且这些功能都是免费的!注意:是免费的!白嫖党的福利,我用了之后给我感觉就是:真香!

Vercel还支持自动配置https,不用我们去申请什么证书,还有一大推的证书配置!

大家可以去官网看看 -->vercel,不多说,搞起来!

如何使用 Vercel 来部署项目

首先在我们的GitHub仓库中新建一个博客的仓库(仓库名自取,我的是blog),新建仓库的时候要注意一下,如果你不想你的项目暴露出去的话,最好是将仓库改为私有的...

新建完仓库会出现下面的git命令,我们就可以根据下面的命令将我们本地的项目推送到我们的新仓库中

我们稍微改一下上面的命令,首先进入我们本地项目的根目录(blog)

    git init # 初始化目录
    git add . # 将所有文件添加到本地仓库
    git commit -am "add all file" # 提交
    git remote add origin xxxx.git # 写你新建仓库的地址,复制粘贴就行了
    git push origin master # 这里写提交到master,因为我之前写main的时候报错,这里还会有一个问题,如果你是通过ssh的话必须配置ssh的密钥,具体配置百度一下(github 配置本地ssh密钥)

配置 Vercel

进入vercel官网 vercel,然后登录我们的账号(GitHub账号),第一次登录完成后会提示你安装授权插件的,我们安装就行了
然后我们在首页会看到这样的页面

授权给vercel后,左边我们就可以看到自己GitHub里面所有的项目了,然后我们找到自己的博客项目,点击Import ,然后填上我们项目名称(PROJECT NAME),选择FRAMEWORK PRESET,选择Hexo,点击Deploy就可以了

部署成功后会有一个完成的特效,基本出现下面的这个页面就完成了,访问的话,我们将下面的 DEPLOYMENT 的地址复制粘贴打开一个新的标签页访问就可以了

-预览地址:https://www.ailance.top

posted @ 2022-05-09 09:17  青衫不改  阅读(58)  评论(0编辑  收藏  举报