果果小师弟 · 2020年02月06日

Github+Hexo博客搭建小白教程(一)

阅读须知:文章较长主要针对小白,本人电子信息工程专业,目前只学习了C语言编程,对网站的开发几乎为零,所以写次博客记录搭建过程,供后来者参考借鉴。这篇文章篇幅较长,主要针对新手,每一步很详细,建议基础比较好小伙伴根据目录选择自己感兴趣的部分跳着看,基础较不好或者为零的小伙伴建议从头开始,每一个步骤都不要遗漏。

前言

你了解Hexo吗? Hexo是一个静态博客框架,基于Node.js,将Markdown文章通过渲染引擎,生成一个静态网页,再结合Git命令(ssh),Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

首先,你至少要了解一些GitHub是什么,要会创建自己的GitHub账号。因为我是电子信息专业,所以在这之前我还不知道GitHub是啥,所以就去B站找了相关教程。因为GitHub全都是英文,所以看起来比较复杂,建议大家使用谷歌浏览器,自带翻译。

如果下面的教程有错误之处,请在QQ留言,收到后,我会尽快修改,谢谢支持!

主题介绍

原主题特性:

  • 简单漂亮,文章内容美观易读
  • Material Design 设计
  • 响应式设计,博客在桌面端、平板、手机等设备上均能很好的展现
  • 首页轮播文章及每天动态切换 Banner 图片
  • 瀑布流式的博客文章列表(文章无特色图片时会有 24 张漂亮的图片代替)
  • 时间轴式的归档页
  • 词云的标签页和雷达图的分类页
  • 丰富的关于我页面(包括关于我、文章统计图、我的项目、我的技能、相册等)
  • 可自定义的数据的友情链接页面
  • 支持文章置顶和文章打赏
  • 支持 MathJax
  • TOC 目录
  • 可设置复制文章内容时追加版权信息
  • 可设置阅读文章时做密码验证
  • GitalkGitmentValineDisqus 评论模块(推荐使用 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 HereGit Bash Here,在打开Cmd(Win+R),分别输入gitgit --version,如果出现如下图的情况,即安装成功!

推荐阅读
关注数
1559
文章数
49
个人网站:www.zhiguoxin.cn微信公众号:果果小师弟
目录
极术微信服务号
关注极术微信号
实时接收点赞提醒和评论通知
安谋科技学堂公众号
关注安谋科技学堂
实时获取安谋科技及 Arm 教学资源
安谋科技招聘公众号
关注安谋科技招聘
实时获取安谋科技中国职位信息