hexo搭建个人博客完整过程

在我们日常中要保持不断的学习,写技术博客就是其中一种,程序员很有必要有自己的一个个人博客,不管是静态搭建的还是自己从零开始一步步实现的,写技术博客都是一种技术分享和学习的有效方法。
这里我的博客搭建使用的hexo来搭建的并放在了github-page上,一些人可能看着官方文档会有点乱,这边我就介绍一下hexo博客的基本用法,从搭建到部署

安装

搭建hexo需要使用npm,因此要先从nodejs官网上下载最新的nodejs稳定版,安装好了之后我们执行下面的步骤,全局安装hexo的一个脚手架

npm install hexo-cli -g

如果网速较慢则执行下面这一句,使用淘宝镜像

npm install hexo-cli -g --registry=https://registry.npm.taobao.org

执行完了之后我们在执行

hexo init project_name
cd project_name
npm install
hexo s

执行完后我们就可以在我们的localhost 4000端口看到当前的博客了。
在这里插入图片描述
这是他的一个默认主题。

配置

hexo使用yml来进行一个配置的,我们可以看到项目更目录下有个_config.yml文件,这就是一个配置文件,打开它可以对基本的一些信息进行配置。yml配置要在冒号后面加一个空格
_config.yml

# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: en
timezone: ''

可以看到这边我们可以配置一个网站的标题,副标题,对网站的描述,关键字,作者,语言以及时区,我们可以配置下语言为中文,修改为zh-CN即可,其他的可以随便改,时区可以不填,剩下的都暂时不用修改

写博客

hexo博客有三种一种为post(默认)、page、draft
写博客很简单我们只要执行

hexo new 博客名

就可以看到根目录下的source下的post文件夹下产生了一个博客名.md,打开可以看到我们在博客下有这样的内容

---
title: one
date: 2020-07-24 21:24:38
tags:
---

这是一篇博客的信息,博客名,事件,标签,然后就可以用md格式来写博客啦。
写完后重新server一下就可以在4000端口下看到你的博客了。
page和draft也是同理,只不过page是一篇博客创建单独的一个文件夹,draft是草稿,不会显示在博客中
执行

hexo new page/draft 名字  

主题

有人说,这个博客太丑了,不是我想要的,hexo提供了主题的修改,hexo的默认主题的landscape就是theme这个文件夹下的,一个主题就包含了language、script、layou、source四个文件,还有一个yml配置文件,我们也可以看到根目录下的配置文件中的默认theme值也是landscape。
由于hexo的主题有很多,大家可以在github上自行下载按照作者的配置文件来更改就行,我这边就拿我自己用的indigo主题来做讲解。
首先我们安装git,然后在项目路径下执行

git clone https://github.com/yscoder/hexo-theme-indigo themes/indigo

然后就可以在themes中的indigo文件夹中的yml配置文件中修改数据,这边可以根据作者写的文档来进行修改, 这边要注意不同的主题修改的配置不一样的具体还是要看作者的文档来进行安装配置
然后修改项目的yml配置文件中的theme改为indigo即可
当然这个indigo主题还要自己创建一下tags和categories文件夹

hexo new page tags
hexo new page categories

然后再根据作者的readme文件或者可以修改一下ejs等做一个自己喜欢的样子的,这一块读者自己摸索。
我这边做完之后就是这个样子的
在这里插入图片描述

部署

这边我们部署在GitHub-page上,我们在guthub上建一个仓库名字叫做:<你的 GitHub 用户名>.github.io这个名字是固定的不能随意修改
然后我们安装

 npm install hexo-deployer-git

然后我们在项目的yml配置文件中修改

deploy:
  type:  'git'
  repo: 仓库地址

然后执行

hexo clean
hexo g
hexo d

执行完后就可以在https://仓库名 该网页中访问到你的博客了,以后每次写完博客或者是修改后在执行上面三步步骤即可

最后

希望读者可以关注下我的博客和这个csdn博客。
有问题可以加qq 547783781留言

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值