【体验地址】
1 【程序员南方者的博客】：https://nanfangzhe.gitee.io/
2 【南方阿怼的个人博客】：https://southern-adui.gitee.io//
【视频教学地址】：https://www.bilibili.com/video/BV1xL4y1z7UU
【B站up主】：https://space.bilibili.com/158405457

【项目展示】
【注册、下载与安装】
- 【1】gitee注册
- 【2】Typora下载
- 【3】node安装
- 【4】git安装
【本地博客搭建】
- 【1】hexo-cli安装
- 【2】初始化hexo项目
- 【3】项目启动
【添加主题模板Fluid】
- 【1】在blog\themes目录下
- 【2】修改_conf.yml
- 【3】修改为主题语言为中文
- 【4】生成about页面
【图片、内容等修改】
- 【1】添加友链导航
- 【2】改页面标题和页面前的小icons
【.md文件博客上传】
【宠物插件】
【提交搭建的博客到Gitee上，正式完成博客搭建】
【结果展示】

【项目展示】

【展示地址】：https://nanfangzhe.gitee.io/

【注册、下载与安装】

【1】gitee注册

【gitee官方注册地址】：https://gitee.com/signup

【2】Typora下载

【下载地址】：https://www.typora.io/

【3】node安装

【下载地址】：https://nodejs.org/zh-cn/

【安装过程】：选择磁盘可以切换到其他盘，然后一直下一步就好了。（这里演示是切换D盘）

【4】git安装

【下载地址】：https://git-scm.com/download/win

【安装过程】：选择磁盘可以切换到其他盘，然后一直下一步就好了。（这里演示是切换D盘）

【本地博客搭建】

【1】hexo-cli安装

npm install hexo-cli -g

或

先安装cnpm，然后利用cnpm安装hexo-cli

npm install cnpm

cnpm install hexo-cli -g

【2】初始化hexo项目

hexo init blog

【3】项目启动

永远的hexo三件套：

-清除生成的页面相关内容

hexo clean

-构建生成的页面相关内容

hexo g

-项目启动

hexo s

【添加主题模板Fluid】

【1】在blog\themes目录下

去gitee上下载Fluid主题模板（github上真的太慢了有时候还下不下来。）

git clone https://gitee.com/mirrors/hexo-theme-fluid.git

【2】修改_conf.yml

找到theme，替换为对应下载主题名字（在themes下载下来的文件夹名）

theme: hexo-theme-fluid

【3】修改为主题语言为中文

在blog目录下的_conf.yml，找到文件内容里的language替换为以下

language: zh-CN #指定语言，会影响主题显示的语言，按需修改

【4】生成about页面

在blog路径下，执行指令（管理员cmd操作）

hexo new page about

创建成功后，去到blog\source\about\index.md，添加layout属性，以为为index.md里所有内容

—
title: about
date: 2021-10-01 14:53:12
layout: about
—

【图片、内容等修改】

【1】添加友链导航

【参考地址】：https://hexo.fluid-dev.com/docs/guide/#%E5%8F%8B%E6%83%85%E9%93%BE%E6%8E%A5%E9%A1%B5

在blog\themes\hexo-theme-fluid目录下的_config.yml内容中去掉 navbar导航栏 menu下的link 前的注释

menu:
- { key: “home”, link: “/”, icon: “iconfont icon-home-fill” }
- { key: “archive”, link: “/archives/”, icon: “iconfont icon-archive-fill” }
- { key: “category”, link: “/categories/”, icon: “iconfont icon-category-fill” }
- { key: “tag”, link: “/tags/”, icon: “iconfont icon-tags-fill” }
- { key: “about”, link: “/about/”, icon: “iconfont icon-user-fill” }
- { key: “links”, link: “/links/”, icon: “iconfont icon-link-fill” }

【2】改页面标题和页面前的小icons

blog目录下的_config.yml的内容中

原来是有title: Hexo

改为title: 阿怼博客

blog\themes\hexo-theme-fluid\主题目录下的_config.yml的内容中

navbar:

blog_title: “Fluid”

改为

navbar:

blog_title: “阿怼博客”

同样文件，找到首页（index）

index:
# 首页 Banner 头图，可以是相对路径或绝对路径，以下相同
# Path of Banner image, can be a relative path or an absolute path, the same on other pages
banner_img: /img/default.png

# 头图高度，屏幕百分比
# Height ratio of banner image
# Available: 0 - 100
banner_img_height: 100

# 头图黑色蒙版的不透明度，available: 0 - 1.0， 1 是完全不透明
# Opacity of the banner mask, 1.0 is completely opaque
# Available: 0 - 1.0
banner_mask_alpha: 0.3

# 首页副标题的独立设置
# Independent config of home page subtitle
slogan:
enable: true

# 为空则按 hexo config.subtitle 显示
# If empty, text based on subtitle in hexo config
text: “An elegant Material-Design theme for Hexo”

这里的text改成你想改的

text: “我叫阿怼，南方阿怼，一个热爱计算机更热爱祖国的南方人。”

修改icons或者其他图片，找到blog\themes\hexo-theme-fluid\source\img目录下（注意不是blog\public\img目录下的，public的目录文件不需要改，因为每次hexo clean都会删除了，然后hexo g再重新创建）

在这里面替换成你想要的图片、icon就好了。

【.md文件博客上传】

首先，写好一个.md，作为你的博客了。

也可以直接在blog目录下，执行以下指令生成.md，再进行对该.md进行完善内容。

hexo new “《我的第一个日记》”

这时候就生成在blog\source_posts目录下了

你已经写好了.md，也可以直接移动到这里，然后再重新启动hexo三件套就好了。（hexo clean、hexo g、hexo s）

标签添加

在你想添加标签的.md文件中，添加tags: “标签名”

—
title: 《个人博客搭建》
date: 2021-10-01 15:35:44
tags: “《博客搭建相关》”
—

【宠物插件】

npm install --save hexo-helper-live2d
或
cnpm install --save hexo-helper-live2d

1、cnpm install –save hexo-helper-live2d
2、live2d插件
3、安装合适的宠物cnpm install live2d-widget-model-chitose
4、在博客_config.yml配置文件中（不是themes里的）添加即可

【提交搭建的博客到Gitee上，正式完成博客搭建】

修改blog\_config.yml配置文件的站点地址（找到deploy）：

deploy:
type: git
repo:
branch: master
live2d: https://gitee.com/southern-adui/southern-adui.git
enable: true

安装git上传助手（如果有git设置过有帐号密码，就去先对git进行操作）

npm install hexo-deployer-git --save
或
cnpm install hexo-deployer-git --save

完成后，输入

hexo d

git的操作
查看配置信息： $ git config --list
修改用户名
git config --global user.name “xxxx(新的用户名)”
修改密码
git config --global user.password “xxxx(新的密码)”
修改邮箱
git config --global user.email “xxxx@xxx.com(新的邮箱)”
清除掉缓存在git中的用户名和密码
git credential-manager uninstall

【结果展示】

【个人博客的搭建】【从零开始】【零成本】Hexo + Gitee（有教程视频）相关推荐

Hexo+Github: 博客网站搭建完全教程(看这篇就够了)
本篇教程首次发布在个人博客:sunhwee.com,想要获得最佳阅读体验,欢迎前往,建议用电脑查看教程文档. 文章目录阅读须知博客开源前言第一部分搭建 Hexo搭建步骤 1. 安装Git 2 ...
基于Hexo+Gitee的个人静态博客网页搭建
基于Hexo+Gitee的个人静态博客网页搭建前言环境搭建:NodeJs+Git+Hexo (Win10+64位) NodeJs安装 Hexo安装主题配置 Gitee仓库创建和部署个性化配置 ...
Hexo+GithubPage搭建Fan主题的博客（2）本地初始化Hexo博客项目
更多信息请关注个人网站本地初始化Hexo博客 (1)打开cmd窗口,执行如下命令安装hexo npm install -g hexo-cli 如: D:\src>npm install -g ...
Win10环境下基于Hexo的静态博客环境搭建，及其阿里云部署
引言 1.为什么要搭建自己的个人博客工作和学习过程中,我们经常遇到一些这样或那样的问题,此时我们可能会在网上找到相应的解决方法.但是过了一段时间之后,当我们再次碰到类似的问题时,早已忘记以前是怎么解 ...
【nodeJS】从nodejs原生的博客网站搭建到 koa框架实现个人博客网站搭建
nodejs实现搭建博客网站前言:原java后端渣渣一枚,因项目需要转学了nodejs进行开发,正式进行项目开发之前,师傅安排了一些项目训练,先熟悉js语法,然后熟悉nodejs,再慢慢重构向框架的 ...
hexo博客的搭建与部署
hexo博客搭建文章目录 hexo博客搭建搭建环境安装node.js与git 安装淘宝镜像源安装hexo博客框架使用hexo 建立一个文件夹存放博客文件初始化hexo博客创建第一篇文章 ...
Linux下使用 github+hexo 搭建个人博客01-hexo搭建
为什么要搭建自己的博客系统? 原因有好几个吧,归类如下: 1.自己搭建博客系统很有成就感,可以自己选定页面风格和页面排版: 2.自己搭建博客系统可以根据自己的需要添加各种插件功能,因此整体上比网上的第 ...
Ghost博客手动搭建
Ghost博客手动搭建操作场景示例软件版本前提条件操作步骤操作场景 Ghost 是使用 Node.js 语言编写的开源博客平台,您可使用 Ghost 快速搭建博客,简化在线出版过程.本文档介 ...
hexo博客快速搭建
博客搭建有很多框架与工具可以选用,我选择了耳熟能详的hexo,个人比较喜欢 2020.1.18 第一步:安装hexo运行环境node.js 直接在node.js官网下载安装. 安装之后输入 node ...
基于Github的个人博客快速搭建教程
总算下定决心要把博客搭建起来了,之前一直因为想找工作的原因,没有整.现在清闲下来了,再加上最近心态放松了,不太想学习了,所以想着找点东西玩儿. 个人博客的搭建是Hexo与Github配合进行搭建.通过 ...

【个人博客的搭建】【从零开始】【零成本】Hexo + Gitee（有教程视频）

目录

【项目展示】

【注册、下载与安装】

【1】gitee注册

【2】Typora下载

【3】node安装

【4】git安装

【本地博客搭建】

【1】hexo-cli安装

【2】初始化hexo项目

【3】项目启动

【添加主题模板Fluid】

【1】在blog\themes目录下

【2】修改_conf.yml

【3】修改为主题语言为中文

【4】生成about页面

【图片、内容等修改】

【1】添加友链导航

【2】改页面标题和页面前的小icons

【.md文件博客上传】

【宠物插件】

【提交搭建的博客到Gitee上，正式完成博客搭建】

【结果展示】

【个人博客的搭建】【从零开始】【零成本】Hexo + Gitee（有教程视频）相关推荐

最新文章

热门文章