昨天下午在B站看到Up主CodeSheep的搭建个人博客的视频,是使用hexo框架搭建,然后部署到Github或者Gitee等的方法,视频已经是一年前的了…地址在这里;跟着学了学,熟悉Git的应该很轻松就可以做个人博客,简单记一下笔记(还不熟悉MakeDown编辑,顺便还可以在简书学一下):
注:我是用Windows10系统电脑做的, Mac os、其他系统可能略有不同。
一、环境搭建
1.安装Node.js
打开官网下载地址
下载之后正常安装,一直Next就可以。
安装完毕之后可以查看安装是否成功,打开命令行(快捷键Win+R,输入cmd回车),输入[node -v](方括号内的内容),之后回车,可以看到Node.js版本号,输入[npm -v](方括号内的内容),之后回车,可以看到npm工具的版本号,如看到和下方图片类似即安装成功,否则建议重装试试。
2.安装Git
打开官网下载地址
下载相应系统和版本的安装包。
同样正常安装就可以,安装之后可以在开始菜单中看到如下图Git工具。
注:Git Bash可当作类似Linux和Mac OS的终端窗口使用,之后就用Git Bash打开终端,也可以使用Win命令行。
3.环境变量配置
1.右键我的电脑,打开属性;
2.选择→高级系统设置→高级→环境变量,直到看到下方页面;
3.然后选中系统变量中的Path(如果有的话,否则新建)并点击编辑;
4.选择新建,在红色箭头处填入Git安装地址的bin目录,如“D:\Program Files\Git\bin”;
5.点击确定保存。
二、搭建Hexo框架
注:这一步创建博客的本地资源目录,搭建Hexo框架,使用hexo命令对内容进行操作
1.新建Blog文件夹
这个文件夹在本地保存你的博客或者网页的全部资源(包括博客主题、文章、设置等),之后的操作和修改都在此文件夹中进行,可以放在你想放的目录并且自定义命名,这里在文档中创建MyselfBlog文件夹。之后如果操作错误或者重新写内容,这个文件夹删掉重建也没关系。
2.安装Hexo框架
1.如果之前工具安装没有问题的话,在此文件夹右键可以看到Git Bash Here,如下图:
点击打开GitBashHere。
2.由于需要使用的npm工具服务器在国外,会影响下载安装插件的速度,所以建议安装淘宝团队开发的国内镜像cnpm,方法为,在终端输入:
npm install -g cnpm --registry=https://registry.npm.taobao.org
回车,等待安装cnpm,直到安装完成:
在终端输入cnpm,检测安装是否成功,成功会显示如下:
3.安装hexo,在终端输入:
cnpm install -g hexo-cli
之后输入:
hexo -v
出现下图所示则安装成功:
3.hexo初始化
在终端输入:
hexo init
等待初始化,当在终端中看到下图:
并且查看文件夹中,有如下图中文件,说明初始化已完成。
这里面的文件就包含所有博客主题、资源文件和设置信息等。
4.测试本地链接localhost
注:在对hexo框架进行操作时,主要有以下几个命令:
hexo cl #清理缓存文件
hexo g #生成文件
hexo s #启动服务器
hexo d #上传服务器(后面使用)
在终端中输入:
hexo s
启动服务器,可以看到运行地址:http://localhost:4000
在浏览器中打开此链接,可以看到:
看到上图说明已经成功,我们的hexo网页已经可以使用了,显示的是默认主题。
如果浏览器打开时候显示拒绝此访问,可以查看是否因为在终端中使用Ctrl+C导致hexo关闭,是则重新键入hexo s指令;或者是因为4000端口已被占用,则输入:
hexo s -p 5000
换用端口进行启动。
到目前为止,一个基于本地服务器的页面已经可以使用,在我们创建的文件夹的\source_posts文件夹中可以看到hello-world.md文件,即为我们刚才打开页面中的Hello World文章的文件,_config.yml文件是有关页面的设置的文件,themes文件夹中包含页面主题的各种信息,页面的美化就通过更改这些内容,我在之后会演示如何进行设置和编辑。
此时的页面只能在自己的电脑上看到,想让其他人都可以打开这个页面,需要将它部署到远端,我会在下一篇进行介绍。