设计作品展示网站,网站 没有备案 访问不了,工程建设信息网站资质公告,重庆怎么站seo【2025最新版】搭建个人博客教程
–小记#xff1a;
在搭建我的这个博客之前我在CSDN也发布过一些文章#xff0c;目前应该也是几千粉丝了#xff0c;但是看到别人都是用自己博客写的就感觉自己很LOW#xff0c;所以就想自己来搭建一个属于自己的个人博客。当然搭建博客的…【2025最新版】搭建个人博客教程
–小记
在搭建我的这个博客之前我在CSDN也发布过一些文章目前应该也是几千粉丝了但是看到别人都是用自己博客写的就感觉自己很LOW所以就想自己来搭建一个属于自己的个人博客。当然搭建博客的主要目的也是为了分享一些比较有用的教程给大家的我搞了蛮久的每个都需要自己去看一遍才能理解到他的意思。 下面就给大家分享一下我是如何搭建我的个人博客的也欢迎大家来看我的博客【2025最新版】搭建个人博客教程
1、环境准备
在我们搭建我们的个人博客之前我们需要准备一下我们的环境安装下方的顺序来安装别弄混了
1.安装git
$ apt install git /**/安装git
$ git --version /**/查看git的版本出现了这个git version就代表我们安装成功了
2.安装node.js环境
我们需要在我们的机子上安装node.js环境我这边发现我的服务器好像安装了npm就自带node版本我不知道为什么如果你们的服务器安装了npm后仍然没有node环境的话可以找文章去安装一下nodejs不过好像安装了就附带的。Node 版本一定不要最新的22版本(会出现各种奇怪的问题)建议16和18稳定版本。
$ sudo apt install npm # 下载npm软件包
$ sudo apt install nodejs # 下载noede.js环境
$ npm -v # 验证环境中是否存在正确的 npm 版本
$ node -v # 验证环境中是否存在正确的 node 版本3.注册 GitHub 账号
打开浏览器访问 GitHub 官网https://github.com/。在首页上找到“Sign up”按钮点击后按照提示填写相关信息包括用户名、邮箱地址和密码等完成注册过程。这个账号将作为存储博客文件的仓库承载着博客的所有代码和内容。(我相信大家都已经注册过了我就不演示注册过程了如果后面有空的话我再来更新这里)
2、安装hexo
1.安装hexo框架
所有必备的应用程序安装完成后即可使用 npm 安装 Hexo。
$ npm install hexo-cli -g # 安装hexo2.初始化hexo
安装 Hexo 完成后请执行下列命令Hexo 将会在指定文件夹中新建所需要的文件。
$ sudo npm install hexo -g #安装hexo
$ mkdir blog #此处可以是任意你喜欢的名字
$ hexo init blog #初始化部署hexo这样就代表我们已经初始化成功了,此时已经可以打开你的博客了在Bash里面输入:
$ hexo s 这样就代表我们已经在我们的4000端口搭建好了网站。我们可以进入我们的网站看一下如下图这个就是我们使用的hexo框架
如果你打不开你的网站的话你可以去你的服务器看一下是不是你的安全组没有打开切记要先打开你的安全组才能访问到你的这个网站哦要牢记其他的也是一样的 3、安装butterfly主题
1.安装butterfly
hexo-theme-butterfly 是基于 hexo-theme-melody 的基础上进行开发的主题。
在你的 Hexo 根目录里输入以下命令
$ git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly #下载稳定版butterfly主题当你安装完成之后你可以看到自己的blog/themes下面多了一个butterfly主题这样就代表我们已经安装好了我们的主题 2.应用主题
修改 Hexo 根目录下的 _config.yml把主题改为 butterfly
theme: butterfly3.安装插件
如果你没有 pug 以及 stylus 的渲染器请下载安装
npm install hexo-renderer-pug hexo-renderer-stylus --save这里我出现了一个问题就是我的npm install不动了后面排除因素应该是没有使用国内镜像导致的换了速度就快了
npm config get registry #查看自己的镜像是哪里的
npm config set registryhttps://registry.npmmirror.com #更改自己的镜像为国内镜像
//重新执行以下命令查看是否配置成功
npm config get registry4.升级建议我建议实施便于后期的管理
升级完成后请到 Github 的 Releases 界面查看新版的更新内容。
里面有标注 _config 文件的变更内容如有请根据实际情况更新你的配置内容。
为了减少升级主题后带来的不便请使用以下方法建议可以不做
在 hexo 的根目录创建一个文件 _config.butterfly.yml并把主题目录的 _config.yml 内容复制到 _config.butterfly.yml 去。这边我建议用cp命令直接将主题的config内容复制到hexo根目录上
cp themes/butterfly/_config.yml _config.butterfly.yml注意:
复制的是主题的 _config.yml 而不是 hexo 的 _config.yml
不要把主题目录的 _config.yml 删掉
以后只需要在 _config.butterfly.yml 进行配置就行。如果使用了 _config.butterfly.yml 配置主题的 _config.yml 将不会有效果。
Hexo 会自动合并主题中的 _config.yml 和 _config.butterfly.yml 里的配置如果存在同名配置会使用 _config.butterfly.yml 的配置其优先度较高。
5.启动环境
hexo s #启动本地环境当你出现这个butterfly时你就说明你的主题已经安装成功了
4、主题页面
1.配置网站页面
我们打开hexo根目录的_config.yml首先出现的时网站的页面配置我们按需修改我们自己的主题名字和标题作者还有语言这些。修改网站各种资料例如标题、副标题和邮箱等个人资料就修改 Hexo 的_config.yml。注释是我自己打上去的记得每一个冒号后面都要空一格这样才能显示出来效果 然后我们可以在_config.butterfly.yml中配置我们的网站图标这样我们的图标就配置好了logo那边只要随便在网上找个图片然后复制一下图片链接就可以了。后续我会出一个picgo联合markdown文档做个图床然后把链接放到我们自己的云资源中 2.目录配置
我们可以看到我们上面有点空没东西导航所以我们可以设置我们的网站图标我们找到_config.butterfly.yml里面去配置一下我们的目录
Home: / || fas fa-home # 目录
Archives: /archives/ || fas fa-archive #档案
Tags: /tags/ || fas fa-tags #标签
Categories: /categories/ || fas fa-folder-open #分类
List||fas fa-list: #Music: /music/ || fas fa-music #音乐Movie: /movies/ || fas fa-video #电影
Link: /link/ || fas fa-link #友情链接
About: /about/ || fas fa-heart #关于记得在menu下面要留两个空代表是在menu的下面一层
!
可以看到我们的目录菜单已经出来了但是都是英文的所以我们就只需要去改一下就好了 3.社交设置
我们处理完我们的目录我们就可以去搞一下我们的社交媒体类了
Butterfly 支持 font-awesome v6 图标.
书写格式 图标名url || 描述性文字 || color
social:fab fa-github: https://github.com/maodoo0701 || Github || #hdhfbbfas fa-envelope: mailto:maodooqq.com || Email || #000000设置完之后我们的图标就有变化了里面就自带跳转链接了 4.头像设置
我们设置好我们的社交栏之后就可以设置我们的头像和图标了 favicon: /img/favicon.png #网站图标
avatar:img: /img/avatar.pngeffect: true # 头像会一直转圈弄好了就是这个样子头像会变化然后图标会改变 5.背景图和顶部脚步图设置 将脚部的设为true背景和顶部设为同一个图片这样就可以看起来更顺滑一点如果不设置脚步图片true的话就会像下图一样有点不和谐还是 设置完之后我们的图片就会和顶部图一模一样了这样我们可以看起来会更丝滑一点 但是还是会有一点点的小差别因为阴影部分感觉不能和背景图的色差保持一致就会导致不好看我在另一篇博客上面发了背景一图流如果感兴趣的话可以再去更改这个背景图
6.代码块格式设置
如果你需要 MacOS 风格的代码高亮样式可以把macStyle 设为 true。这样我们的文章就会展现出是mac格式了可能要更好看一点
下面就是效果图了变成了mac格式的代码块我觉得要好看一些 7.文章封面
cover:# 是否显示文章封面index_enable: trueaside_enable: truearchives_enable: truedefault_cover:- https://maodoo.oss-cn-beijing.aliyuncs.com/20241210172528345.jpg- https://maodoo.oss-cn-beijing.aliyuncs.com/20241210172459243.png#从这两个图片之中随机选取图片把所有图片都导入上去之后我们可以去创建几篇新博客看看有没有生效再打开可以发现我们的文章封面已经生效了
hexo new 我的第一篇博客 #创建标题为“我的第一篇博客”的文章
hexo new 爱笑的个人博客搭建教程 #创建标题为“爱笑的个人博客搭建教程”的文章
hexo cl #清除缓存
hexo s #本地调试预览8.主题目录
搞了这么多点击了一下目录发现目录那边每个都点击不起来原来是我没有配置
1、标签页
1.前往你的 Hexo 的根目录
2.输入 hexo new page tags
3.你会找到 source/tags/index.md 这个文件
4.修改这个文件
---
title: 标签
date: 2018-01-05 00:00:00
type: tags
orderby: random
order: 1
---2.分类页
分类页文件名不一定是 categories, 例子中的 categories 只是一个示例 记得添加 type: “categories”
1.前往你的 Hexo 的根目录
2.输入 hexo new page categories
3.你会找到 source/categories/index.md 这个文件
4.修改这个文件
---
title: 分类
date: 2018-01-05 00:00:00
type: categories
---3、友情链接
1.前往你的 Hexo 的根目录
2.输入 hexo new page link
3.你会找到 source/link/index.md 这个文件
4.修改这个文件
---
title: 友情链接
date: 2018-06-07 22:17:49
type: link
---5.数据来源
在 Hexo 根目录中的 source/_data如果没有 _data 文件夹请自行创建创建一个文件 link.yml
mkdir _data #创建一个名为data的文件夹
touch link.yml #创建一个名为link.yml的文件
vi link.yml #编辑link.yml- class_name: 友情链接class_desc: 那些人那些事link_list:- name: Hexolink: https://hexo.io/zh-tw/avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svgdescr: 快速、简单且强大的网志框架- class_name: 网站class_desc: 值得推荐的网站link_list:- name: Youtubelink: https://www.youtube.com/avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.pngdescr: 视频网站- name: Weibolink: https://www.weibo.com/avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.pngdescr: 中国最大社交分享平台- name: Twitterlink: https://twitter.com/avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.pngdescr: 社交分享平台这样我们的目录部分就搭建完成了其他地方按需修改即可 这个就是差不多整个主题的配置了还有一些配置我没写出来但是你们可以去看一下官方文档那边写的更加详细或者看哔哩哔哩的卷二兔的课几乎把所有配置都讲了还有部署到GitHub的过程比较多所以我下期再讲这期就先到这里。
cr: 中国最大社交分享平台 - name: Twitter link: https://twitter.com/ avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png descr: 社交分享平台 [外链图片转存中...(img-qBUln9CF-1733827684735)]这样我们的目录部分就搭建完成了其他地方按需修改即可[外链图片转存中...(img-3f7Sz2h3-1733827684735)]这个就是差不多整个主题的配置了还有一些配置我没写出来但是你们可以去看一下官方文档那边写的更加详细或者看哔哩哔哩的卷二兔的课几乎把所有配置都讲了还有部署到GitHub的过程比较多所以我下期再讲这期就先到这里。
