阅读须知:文章较长主要针对小白,本人电子信息工程专业,目前只学习了C语言编程,对网站的开发几乎为零,所以写次博客记录搭建过程,供后来者参考借鉴。这篇文章篇幅较长,主要针对新手,每一步很详细,建议基础比较好小伙伴根据目录选择自己感兴趣的部分跳着看,基础较不好或者为零的小伙伴建议从头开始,每一个步骤都不要遗漏。
前言
你了解Hexo吗? Hexo是一个静态博客框架,基于Node.js,将Markdown文章通过渲染引擎,生成一个静态网页,再结合Git命令(ssh),Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
首先,你至少要了解一些GitHub是什么,要会创建自己的GitHub账号。因为我是电子信息专业,所以在这之前我还不知道GitHub是啥,所以就去B站找了相关教程。因为GitHub全都是英文,所以看起来比较复杂,建议大家使用谷歌浏览器,自带翻译。
如果下面的教程有错误之处,请在QQ留言,收到后,我会尽快修改,谢谢支持!
主题介绍
原主题特性:
- 简单漂亮,文章内容美观易读
- Material Design 设计
- 响应式设计,博客在桌面端、平板、手机等设备上均能很好的展现
- 首页轮播文章及每天动态切换
Banner
图片 - 瀑布流式的博客文章列表(文章无特色图片时会有
24
张漂亮的图片代替) - 时间轴式的归档页
- 词云的标签页和雷达图的分类页
- 丰富的关于我页面(包括关于我、文章统计图、我的项目、我的技能、相册等)
- 可自定义的数据的友情链接页面
- 支持文章置顶和文章打赏
- 支持
MathJax
TOC
目录- 可设置复制文章内容时追加版权信息
- 可设置阅读文章时做密码验证
- Gitalk、Gitment、Valine 和 Disqus 评论模块(推荐使用
Gitalk
) - 集成了不蒜子统计、谷歌分析(
Google Analytics
)和文章字数统计等功能 - 支持在首页的音乐播放和视频播放功能
增加的工作或特性(未打钩的是已做但还没更新到源码的):
- 加入图片懒加载功能,在根目录配置文件开启和关闭
- 增加
留言板
功能 - 在关于板块,加入
简历
功能页 - 增加视听[视觉听觉影音]板块
- 支持
emoji
表情,用markdown emoji
语法书写直接生成对应的能跳跃的表情。 - 增加网站运行时间显示
- 增加
动漫模型
- 整体替换Banner图片和文章特色图片
- 增加分类
相册
功能 - 去掉标签页,将其合并至
分类
页中 - 修改了一些控件的参数
- 添加页面樱花飘落动效
- 添加鼠标点击烟花爆炸动效
- 加入天气接口控件
- 加入鼠标点击文字特效
- 添加页面雪花飘落动效
- 添加在线聊天插件
- 运行命令
- hexo clean(清除生成文件),
- hexo g(生成网页),
- hexo s(本地预览),
- hexo d(部署)
一、博客环境搭建
本文系统环境信息:
Win10专业版,64位(10.0 版本18362)
Node.js:12.13.0
Git:2.24.0
修改配置文件要用到的软件:
Visual Studio Code(适合有开发基础的程序员,非常好用)
1. 下载Git和Node.js
1.1 Node.js的安装与配置
首先去Node.js官网 下载node.js的安装程序,根据你电脑系统的配置信息,下载对应的安装程序,然后开始进行下面的步骤
下载好与电脑系统对应的安装程序后,开始安装流程:
1.打开下载好的Node.js安装程序,点击Next,进行下一步的安装
2.将”I accept the terms in the License Agreement”前面的复选框勾选,同意安装协议,再点击Next,进行下一步操作
3.选择Node.js安装程序的安装位置,在这里我以”C:\Program Files\nodejs"为例,点击Next,进入下一步操作;
4.选择安装的模块和功能,这里全部安装,并添加到系统环境变量 ,继续点击Next,进入下一步操作
5.这一步可以跳过,这个选项的意思是安装一些编译本地模块的工具,比如python,C/C++等,点击Next,进入下一步;
6.点击”Install”,等待Node.js安装完成;
7.当看到下图所显示的情况,Node.js就成功安装完毕。
1.2 Git的安装与配置
为啥要安装Git?这个就相当于你电脑的CMD命令程序。我们安装这个后就不用电脑的CMD命令了直接操作这个即可。首先就是去Git官网下载Git,根据你电脑系统的配置信息,下载对应的安装程序,然后开始进行下面的步骤
1.下载好Git的安装包,开始安装,打开安装包,出现如图的界面,点击Next:
2.选择你要安装的位置,我以C盘为例,路径为图中所示,安装到其他位置的话,点击Browse,选择你要安装的位置,然后点击Next,进入下一步:
3.选择你是否创建桌面快捷放方式,其他默认即可,点击Next,进入下一步:
4.是否将Git快捷方式的目录加入开是菜单栏
5.这个是选择文本编辑器的方式,默认是Vim,也可以选择其他的方式,自主选择,在这里我选择的Vim默认方式。选择好文本编辑器的方式后,点击Next,进入下一个流程
6.选择安装 Git 时对环境变量PATH的影响,第一种影响较小,第三种会影响到Windows的自带工具,默认勾选中间项,建议不要修改,直接点击 “Next” 继续安装:
7.选择 Git 在使用 HTTPS 时使用的库,若无特殊需求,可保持默认选项,点击 “Next” 继续安装:
8.选择提交与拉取记录时,对换行符的处理方式,若无特殊需要,默认选择即可,点击 “Next” 继续安装:
9.选择模拟终端软件(即命令行窗口软件),若无特殊需要,可默认选择,点击 “Next” 继续安装:
10.最新功能的询问,若不想尝试尚未保证稳定性的新功能,默认不勾选,点击 “Install” 即可完成安装:
11.安装完成
12.回到桌面,点击鼠标右键,会出现两个选项Git GUI Here
和Git Bash Here
,在打开Cmd(Win+R),分别输入git
和git --version
,如果出现如下图的情况,即安装成功!