Hexo和Gitee搭建个人博客网站

Hexo 和 Gitee 搭建个人博客网站

前置环境搭建

安装 Node.jsgit

  • 根据自己的操作系统下载对应的安装包,进行安装
  • 检查安装是否成功
    • 打开终端,分别输入 node -vgit --version ;正常输出版本则表示安装成功
    • 检查环境是否成功
    • Windows 系统如果安装后,不成功;可能需要系统配置环境变量

安装 Hexo

  • 使用以下命令进行安装即可 【 Hexo 官网

    npm install hexo-cli -g

    Hexo官网介绍

  • 检查安装是否成功

    • 在终端输入 hexo v ;正常输出版本则表示安装成功
    • Hexo版本查看

至此,我们的前置基础环境配置完成。

接下来,我们就开始正式搭建博客

Hexo 博客搭建

初始化项目

  • 找一个喜欢的目录,创建一个 Blog 文件夹

  • 使用 hexo init . 初始化一个项目

    mkdir Blog && cd Blog
    
    hexo init .

预览我们的博客

完成上面的操作后,我们的博客基本上已经搭建完成,并且我们可以本地预览和编写文章了。

  • 本地预览

    • hexo s
    • 打开浏览器,在地址栏输入: http://localhost:4000/ ,这是就能看到我们的博客了

    • 启动项目

    • 效果预览

但是我们也发现了几个问题:

1、我们的博客默认主题不太好看

2、我们的文章只能自己本地预览,别人无法看到我们的文章

所以接下来,我们就要解决以上两个问题

部署博客

注册 码云(Gitee) 账号

  • 注册账号,注册成功后登陆,找到个人设置

  • 添加一个 SSH 公钥,方便后期的操作

  • 添加公钥

  • 我们的公钥文件在 ~/.ssh/id_rsa.pub 文件;我们可以使用 cat 命令来进行查看

    cat ~/.ssh/id_rsa.pub
  • 如果文件不存在,我们可以使用如下命令进行生成

    ssh-keygen -t rsa -C '邮箱地址'

部署项目

  • 创建一个新的仓库,以自己的用户名命名

  • 在我们的本地博客项目中配置部署信息;使用 VSCode 打开我们博客根目录下的 _config.yml 文件;把文件末尾的 deploy 节点替换为如下内容

    deploy:
        type: "git"
        repo:
            gitee: "项目地址"
        branch: master
  • 安装 git 部署插件

    yarn add hexo-deployer-git
  • 配置自定义部署命令

    打开项目根目录下的 package.json 文件,在 scripts 下添加以下命令

    "pub": "hexo clean && hexo g && hexo d"

    发布命令

  • 运行以下命令进行博客部署

    yarn pub

    发布过程

  • 打开 Gitee 中我们的项目, 找打 服务 -> Gitee Pages

    GiteePages

  • 选择对应的分支,并点击 启动

    开启服务

  • 等待一会, 就会给你返回一个博客地址, 点击就可以访问我们的博客了

    开启成功

至此,我们的博客基本搭建完成;接下来我们就需要选择一个自己喜欢的主题,进行一些相关配置

个人使用过两款主题,都感觉还不错,喜欢的可以尝试一下: yeleematery。 当前博客使用的是后者

如果觉得码云给的博客地址不够个性,我们可以自行购买域名

关于博客主题的配置,大家可以在文章下留言。如果留言较多,我将会分别编写两篇上边所说主题的详细文章;如果较少,我就简单回复下


  转载请注明:

文章作者: Diviner
文章链接: http://www.diviner.site/archives/b37292ba.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Divinerの博客 !

评论
 上一篇
下一篇 
前端面试题整理之CSS篇 前端面试题整理之CSS篇
前端面试题整理之 CSS 篇此篇文章是对前端面试题 CSS 部分的整理,会不断进行更新 请使用 CSS 实现一个持续的动画效果 考察知识点 属性 描述 animation-name 规定需要绑定到选择器的 keyfra
  目录