免费搭建个人博客
创始人
2025-05-29 04:32:06
0

免费搭建个人博客,并发布到公网

利用hexo搭建个人博客,通过gitee的pages发布到公网

1 前置准备

安装git、安装node.js(尽量选择长期支持的版本)

node.js官网:https://nodejs.org/en/
git官网:https://git-scm.com/book/zh/v2

安装过程,可以无脑下一步

# 检测node是否安装成功
node -v 
# 安装淘宝镜像
# npm install -g cnpm --registry=https://registry.npm.taobao.org
# 查看镜像
# cnpm -v# 检测git是否安装成功
鼠标右键查看是否出现git bash

2 安装并启动hexo

  1. 下载hexo
npm install -g hexo-cli
  1. 查看hexo版本信息
hexo -v

在这里插入图片描述

进入Git页面
pwd(查询目录所在位置)
mkdir Blog (在目录下建立文件夹Blog)(如果在以后的操作过程中出现问题无法解决就把这个文件夹删掉直接重新来过就可以了)
cd Blog/ (进入Blog文件夹)
pwd (检测是否进入Blog文件夹)
hexo init (即:初始化hexo)
ls -l (查看初始化获得的文件)

  • hexo s (启动hexo)
  1. 新建文件夹,作为博客文件存放位置
- 鼠标右击,进入git bash
- 输入`hexo init`初始化
- 输入`hexo s`启动hexo 

在这里插入图片描述
在blog文件夹的基础上再创建Blog文件夹,输入hexo init完成初始化
在这里插入图片描述
输入:hexo s,启动hexo
在这里插入图片描述
浏览器中输入网址localhost:4000:
在这里插入图片描述

3 修改博客主题

接下来,修改博客的主题

去官网下载一个自己喜欢的主题,我这里以Ayer为例,点击Ayer,跳转到对应github的链接,进入github后,找到readme.md进行安装配置
官网主题:https://hexo.io/themes/
Ayer的github地址:https://github.com/Shen-Yu/hexo-theme-ayer

①进入博客本地根目录,进行gitclone

# Ayer的gitee地址
git clone https://gitee.com/mirrors/ayer.git

在这里插入图片描述

安装完成后,可以在博客根目录的themes看到对应ayer文件夹

如果ayer的文件下载到了根目录下,则进行手动粘贴复制

②修改_config.yml文件

将_config.yml文件下的主题换成下载下来的文件夹名称,如:ayer

在这里插入图片描述
③输入hexo g生成对应网页
④输入hexo s 运行博客,查看本地效果
在这里插入图片描述

我们也可以修改ayer文件夹下的_config.yml来修改样式,修改前可以先备份一份,例如修改标题等,大家自行修改

在这里插入图片描述

修改blog根目录下的_config.yml,可以修改标题等【同样可以先备份一份】

在这里插入图片描述

# 每次修改完配置,都需要hexo g重新生成网页
hexo g 
# 重新部署
hexo s

此时查看网页,发现我们的配置已经生效

在这里插入图片描述

4 发布到公网

此处通过gitee的pages来实现
使用gitee的pages服务需要先实名认证。

①复制自己gitee个人主页左上角域名的最后一部分,我们的项目地址需要改成对应的,如:Zifasdfa
在这里插入图片描述
②新建仓库,路径写自己个人的地址Zifasdfa
在这里插入图片描述
③上传代码到gitee

  1. git配置

创建完项目后,执行项目中的全局git设置

在这里插入图片描述

git config --global user.name "Zi"
git config --global user.email "test@163.com"

将以下命令中的邮箱改为自己的git设置的邮箱

ssh-keygen -t rsa -C "test@163.com"

在这里插入图片描述

  1. 修改博客的_config.yml文件
    在这里插入图片描述
  2. 执行代码部署

ctrl+C,暂停之前的网页

npm install hexo-deployer-git --save
# 生成网页
hexo g 
# 预览博客
hexo s
# 部署博客【将代码上传到gitee仓库】
hexo d
  1. 进入gitee我们博客的仓库,修改基本信息为开源
    在这里插入图片描述

  2. 点击服务,选择gitpages,然后开启强制使用https服务,点击启动
    在这里插入图片描述
    在这里插入图片描述

  3. 点击网址,访问自己的个人博客地址
    在这里插入图片描述
    效果:
    在这里插入图片描述

  4. 更新博客

注意:我们在本地修改完自己的博客之后,需要执行

  • hexo g 生成网页
  • hexo s 本地预览,现在本地查看样式是否满意
  • hexo d 部署
    然后进入仓库的gitpages页面,点击更新即可

在这里插入图片描述

  1. 新建页面

进入博客所在文件夹,新建一个页面

hexo new "first page"

在这里插入图片描述

然后可以进入博客所在目录的_posts,里面有我们新建一个的页面"first-page",采用的是md格式,我们可以编辑修改页面内容

在这里插入图片描述
然后按照:

hexo g 生成网页
hexo s 本地查看
hexo d 部署
进入gitpages更新即可
  • 访问gitpages上的部署地址,查看效果

如果样式错乱,可能是因为浏览器缓存问题,ctrl+F5强制刷新即可

参考:
https://blog.csdn.net/lz970704/article/details/107794128
https://blog.csdn.net/weixin_42365530/article/details/107750003

相关内容

热门资讯

ImageView(图像视图) 本节介绍的UI基础控件是:ImageView(图像视图),就是用来显示图像的一个View或者说控件!...
关于接口测试——自动化框架的设... 一、自动化测试框架 在大部分测试人员眼中只要沾上“框架”,就感觉非常神秘,...
【2023.3.8】数据结构复... 【2023.3.8】数据结构复习笔记 文章目录【2023.3.8】数据结构复习笔记序言一、绪论二、线...
数学周记 【精华】数学周记范文(通用20篇)  不经意间,一个星期已经结束了,想必有很多难忘的瞬间吧,是时候仔...
男生贾里全传读书笔记 男生贾里全传读书笔记(通用24篇)  当品读完一部作品后,相信大家一定领会了不少东西,不能光会读哦,...
1.计算机网络和因特网 1.因特网的描述1.1 具体构成描述根据底层实现(硬件软件)端系统(主机...
使用YOLO部署哨岗相机 流程 一.模型选取 将YOLO和Faster RCNN进行搭配,通过多次实验ÿ...
大蒜观察日记 大蒜观察日记3篇  【导语】大蒜虽然是一种很不起眼的植物,但是它的生命力很强,无论在任何的环境下都可...
四年级观察植物的日记 四年级观察植物的日记范文  观察植物的日记需要怎么写呢?同学们是否有观察过植物的生长过程呢?不妨写下...
同一片天空共眠,同一个梦想奋斗... 同一片天空共眠,同一个梦想奋斗《大抠车始歌》(1) Eng...
Vue 3.0 Data选项 #概览 非兼容:data 组件选项声明不再接收纯 JavaScript object...
Java中原子操作的实现原理 Java中原子操作的实现原理1. 什么是原子操作2. 处理器如何是实现操作的原子性2.1 使用总线锁...
春节的街头小学日记 春节的街头小学日记  今天是大年初一,天气晴朗,妈妈带着我一早来到了兴宁路。  街上可热闹了,车水马...
通用实习日记 通用实习日记集合10篇通用实习日记 篇1  4 月18 日  今天是为期三周实习的第一天,心情有点紧...
【JUC进阶】如何合理设置线程... 文章目录1. 前言2. CPU 密集型3. IO密集型4. 实际情况 1. 前言 线程池ÿ...
JavaScript 学习笔记 0、前端三要素 HTML(结构):超文本标记语言ÿ...
《老山界》老师笔记 《老山界》老师笔记  当阅读完一本名著后,大家心中一定有不少感悟,记录下来很重要哦,一起来写一篇读书...
七年级日记 【精选】七年级日记三篇七年级日记 篇1  一次购物时,爸爸买了一瓶辣酱,到家里的时候,瓶子烈(裂)开...
去公园玩的日记400字 去公园玩的日记400字7篇  一天即将完结,这一天里,大家身边一定有一些有趣的见闻吧,这时候,最关键...
昆虫记读书笔记感悟300字 大学网欢迎大家的到来,本文是小编收集整理的《昆虫记》读书笔记感悟,以供参考。更多精彩内容尽在大学网,...