基于hexo框架的,和butterfly渲染的网页搭建教程

从0-1的hexo博客搭建之旅。

前言:写在开始之前

每个程序猿都有一个自己的栖息地。hexo给了我们速度,butterfly给了我们颜值。 这篇文章将带你从0搭建属于自己的技术博客


一、需要使用到的工具

nodejs

click here

git

click here

以上安装直接默认打勾就行了

安装后让我们进行检验

node -v
npm -v
git -v

hexo 下载

npm install -g hexo-cli

创建个人仓库

1.准备好一个GitHub账户 2.点击create new repositories 3.Repository name 格式严格按照:你的用户名.github.io Choose visibility public Add README ON 4.create repositories

生成ssh 密钥

1.回到桌面shift+右键,点击open git bash here 2.输入

ssh-keygen -t rsa -C "邮件地址"

之后一直enter 完成后进入 C/用户/你的账户/.ssh 记事本打开 id_rsa.pub 将里面的rsa密钥复制 3.打开GitHub setting 进入rsa SSH and GPG keys 4.new ssh key 然后粘贴 5.测试

打开 git bash here 输入

ssh -T git@github.com

之后输入yes

二、开始正式创建你自己的博客

新建一个个人文件夹

1.进入文件夹,此时这个文件夹将成为你的个人博客的根目录 还是shift+右键,点击open git bash here(在根目录中操作) 输入

hexo init

如果错误,则在命令前加上npx 2.依次输入

hexo install
hexo g
hexo s

此时你可以看到终端中生成了一个网址,这个就是你部署在本地的网站了,你可以打开它 CTRL + c 终止运行

congratulation 即将你可以上传自己的博客网站了

1.进入根目录配置文件 _config.yml 记事本打开进行编辑,一直拖到最下面 更改deploy后的

type: git
repository: 
branch: main

注意缩进要求十分严格 2.此时回到你新建好的GitHub个人仓库 点击code,复制url 将其粘贴到repository 后面,注意缩进,冒号后面空一格 保存后退出 3.安装自动部署发布工具 回到根目录,shift+右键,点击open git bash here,依次输入

npm install hexo-deployer-git --save
hexo g(generate)
git config --global user.email "你的邮箱"
git config --global user.name "你的名字"(名字是你GitHub的用户名)
hexo d(deploy)

hexo框架相关内容

进入根目录,打开配置文件

上方site处

# Site
title: 标题
subtitle: '副标题'
description: '形容词'
keywords: '关键词' 
author: (作者)
language: zh-CN
timezone: 'Asia/Shanghai'

注意部分内容由单引号包裹 同时注意 缩进格式

生成一个博客文章

hex new "文章标题"

即可在/source/post文件夹中找到,可以使用vscode,或typra进行编辑,全文皆使用markdown语法 click here获取typra下载链接(破解版)